内容简介: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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序设计语言理论基础
米切尔 / 电子工业出版社 / 2006-11 / 68.00元
本书提出了一个框架,用于分析程序设计语言的语法、操作和语义性质,该框架基于称为类型化λ演算的数学系统。λ演算的主要特色是对于函数和其他可计算的值的一种记法,以及一个等式逻辑和用于表达式求值的一组规则。本书中最简单的系统是称为泛代数的一个等式系统,它可以用来公理化和分析通常用于程序设计的许多数据类型。可作为理论计算机科学、软件系统和数学专业的大学本科高年级或者研究生初始学习阶段的教材,同时也适合用于......一起来看看 《程序设计语言理论基础》 这本书的介绍吧!