Zobrazit příspěvky

Tato sekce Vám umožňuje zobrazit všechny příspěvky tohoto uživatele. Prosím uvědomte si, že můžete vidět příspěvky pouze z oblastí Vám přístupných.


Příspěvky - mareolan

Stran: [1]
1
(pro React) Dlouhé seznamy se obvykle optimalizují tak, že se pro položky udělá samostatná komponenta, tato bude navíc memoizovaná pomocí React.memo a při vykreslování seznamu se každé položce nastaví key. Díky té memoizaci se to renderování skutečně uřízne před voláním render-u na jednotlivých položkách (když se jim nezměnily propsy).

V upraveném příkladu se tedy bude opakovaně renderovat jenom první řádek (a App samozřejmě).

Kód: [Vybrat]
class A0 extends React.Component {
  constructor(props) {
    super();
    console.log("Constructor called ");
    this.state = {
      input: 1
    };
  }

  render() {
    console.log("A render, props: " + JSON.stringify(this.props));
    return <div>Input {this.state.input}</div>;
  }
}
const A = React.memo(A0);

class App extends React.Component {
  i = 0;
  constructor() {
    super();
    this.state = {
      arr: [
        { id: 0, val: 0 },
        { id: 1, val: 0 },
        { id: 2, val: 0 }
      ]
    };
  }

  componentDidMount() {
    setInterval(
      () =>
        this.setState({
          arr: this.state.arr.map((item) =>
            item.id === 0 ? { id: 0, val: this.i++ } : item
          )
        }),
      1000
    );
  }

  render() {
  console.log("App render");
    return (
      <div>
        {this.state.arr.map((i) => (
          <A key={i.id} data={i} />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

2
Vývoj / Re:Vývoj webových aplikací pro nenáročné
« kdy: 26. 05. 2021, 00:30:06 »
Můžeš si zkusit, zda by ti pro rozčlenění vyhovovaly tzv. JavaScript modules. K těm npm nepotřebuješ, ale web server ano (otevření z file systému pomocí file:// protokolu nefunguje).

Použití s Vue.js by pak vypadalo nějak takhle:

index.html
Kód: [Vybrat]
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <grocery-list v-bind:list="foodList"></grocery-list>
</div>

<script type="module">
  import "./components/grocery-list.js";

  let app = new Vue({
    el: "#app",
    data: {
      foodList: [{ id: 0, text: "Vegetables" }, { id: 1, text: "Cheese" }]
    }
  });
</script>

components/grocery-list.js
Kód: [Vybrat]
import "./grocery-item.js";

Vue.component("grocery-list", {
  props: ["list"],
  template: `
    <ol>
      <grocery-item v-for="item in list" v-bind:item="item" v-bind:key="item.id" />
    </ol>
  `
});

components/grocery-item.js (s ukázkou templaty oddělené do samostatného souboru)
Kód: [Vybrat]
Vue.component("grocery-item", async () => {
  let templateResponse = await fetch(import.meta.url.replace(/\.js$/, ".html"));
  let template = await templateResponse.text();

  return {
    props: ["item"],
    template
  };
});

components/grocery-item.html
Kód: [Vybrat]
<li>{{ item.text }}</li>
V html si naimportuješ pouze ty komponenty, které v něm přímo použiješ, tranzitivní komponenty (grocery-item) se dotáhnou z těch přímých (viz import v grocery-list.js). A jestli chceš mít ty HTML šablony někde bokem, tak si je můžeš dotahovat tak, jak to dělá grocery-item.js. Pokud bys ty šablony chtěl mít přímo v .js souboru jako ne-string, např. JSX (nevím, jestli jsou Vue.js šablony kompatibilní s JSX), tak to by sis do stránky musel načíst něco jako babel, co by ti v podstatě provádělo transpilaci modulů (bývá to pořádný kusisko JS kódu).

3
Vývoj / Re:CSS text-overflow: ellipsis v tabulce
« kdy: 09. 07. 2019, 01:40:33 »
V tomto ohledu s tabulkou moc dělat nejde. Pro novější prohlížeče by mohlo jít přestylovat tabulku jako CSS grid - https://jsfiddle.net/e7vgpmdn/1/

Kód: [Vybrat]
@supports (display: grid) {
  table {
    display: block;
  }
  tbody {
    display: grid;
    grid-template-columns: auto minmax(150px, 2fr) minmax(100px, 1fr);
  }
  tr {
    display: contents;
  }
  td {
    border: 1px solid black;
    padding: 5px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

  • ukázka má 3 sloupce, 2. a 3. obsahují dlouhé řetězce; zkracování je ve všech buňkách, ale lze to přenastavit
  • první sloupec má automatickou velikost, druhý má min. 150px, třetí má min. 100px; extra místo se přerozděluje mezi druhý a třetí sloupec v poměru 2:1
  • jestli chceš border, tak si budeš muset vyřešit překrývání (border-collapse: collapse nejde použít) - mělo by jít nastavením top a left borderu na tabulce a pak bottom a right na buňkách
  • CSS selektory (table, tbody, tr, td) si uprav pomocí class, aby sis nepřestyloval všechny tabulky  :)

Pokud bys chtěl zůstat čistě u tabulky bez CSS gridu, tak by to (teoreticky) mohlo jít pomocí starých HTML atributů <td width="30%"> na těch sloupcích, kde to potřebuješ zkracovat, stačí v prvním řádku. Navíc bys ale nejspíš musel do všech zkracovaných buněk dát ještě ~ flex container s flex item-ou, která bude mít šířku 0 (nebo tolik, jaká má být minimální šířka) a pak flex-grow, abys oklamal automatické měření šířky buněk. Nemám vyzkoušeno, očekával bych ale někde nějaký zádrhel ;D.

Stran: [1]