内容简介:It figures out relations between DOM elements without storing them or creating actual dom tree. Instead, it gets relationship based on element depth. In case you are studying any dom-tree, you can build entire branches and navigate through them using gener
@dflex/dom-gen
Generates relations between DOM elements depending on their depth.
npm install @dflex/dom-gen
It figures out relations between DOM elements without storing them or creating actual dom tree. Instead, it gets relationship based on element depth. In case you are studying any dom-tree, you can build entire branches and navigate through them using generated unique keys.
const domGen = new Generator() domGen.getElmPointer(id: string, depth: number)
Returns pointer object refers to element relation with its unique keys and related index:
-
order: Object <elementOrder>
self: number parent: number
-
keys: Object <relationKey>
sK: string pK: string chK: string
import Generator from "@dflex/dom-gen"; const domGen = new Generator(); let pointer = domGen.getElmPointer("id-0", 0); // pointer = { // keys: { // chK: null, // pK: "1-0", // sK: "0-0", // }, // order: { // parent: 0, // self: 0, // }, // };
Internally Generator
has build dom tree as following:
DOM-root │ │───id-0 => order: { parent: 0, self: 0 } || keys: { chK: null , pK: "1-0", sK: "0-0" }
Adding more elements on the same level:
const domGen = new Generator(); const pointer1 = domGen.getElmPointer("id-1", 0); // pointer1 = { // keys: { // chK: null, // pK: "1-0", // sK: "0-0", // }, // order: { // parent: 0, // self: 1, // }, // }; const pointer2 = domGen.getElmPointer("id-2", 0); // pointer2 = { // keys: { // chK: null, // pK: "1-0", // sK: "0-0", // }, // order: { // parent: 0, // self: 2, // }, // };
And dom tree is:
DOM-root │ │───id-0 => order: {parent: 0, self: 0} || keys: {chK: null, pK: "1-0", sK: "0-0"} │ │───id-1 => order: {parent: 0, self: 1} || keys: {chK: null, pK: "1-0", sK: "0-0"} │ │───id-2 => order: {parent: 0, self: 2} || keys: {chK: null, pK: "1-0", sK: "0-0"}
Note:id/0-2 all have same parent and siblings key. So any incoming parent will
carry key 1-0
and exists in position 0
. And this goes also for any parent
which means for any element you can go up↑ and down↓ .
Following the same logic we can go deeper:
const domGen = new Generator(); const pointer = domGen.getElmPointer("id-parent-1", 1); // pointer = { // keys: { // chK: "0-0", // pK: "2-0", // sK: "1-0", // this key was generated previously in children level // }, // order: { // parent: 0, // self: 0, // }, // };
And dom tree is with relational key is as following:
DOM-root ├───id-parent-1 => order: {parent: 0, self: 0} || keys: {chK: "0-0", pK: "2-0", sK: "1-0"} | │───id-0 => order: {parent: 0, self: 0} || keys: {chK: null, pK: "1-0", sK: "0-0"} │ │───id-1 => .. │ │───id-2 => ..
dom-gen
doesn't store keys and ids. All the id's validations should be done
outside Generator
logic. Also, storing relationships should be done separately
in a store.
Test
npm test
License
This project is licensed under the GPL-3.0 License
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Android编程权威指南
[美] Bill Phillips、[美] Brian Hardy / 王明发 / 人民邮电出版社 / 2014-4 / CNY 99.00元
权威、全面、实用、易懂,是本书最大的特色。本书根据美国大名鼎鼎的Big Nerd Ranch训练营的Android培训讲义编写而成,已经为微软、谷歌、Facebook等行业巨头培养了众多专业人才。作者巧妙地把Android开发所需的庞杂知识、行业实践、编程规范等融入一本书中,通过精心编排的应用示例、循序渐进的内容组织,以及循循善诱的语言,深入地讲解了Android开发的方方面面。如果学完一章之后仍......一起来看看 《Android编程权威指南》 这本书的介绍吧!