Skip to content

Instantly share code, notes, and snippets.

@xyzdata

xyzdata/Virtual-DOM.md

Created June 28, 2017 01:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xyzdata/fd55867026b7daa70a9452e54e459f49 to your computer and use it in GitHub Desktop.
Save xyzdata/fd55867026b7daa70a9452e54e459f49 to your computer and use it in GitHub Desktop.
Download ZIP
Virtual DOM 算法
@xyzdata
Copy link
Author

xyzdata commented Jun 28, 2017

virtual dom & DocumentFragment & insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

DocumentFragment 接口表示表示一个没有父级文件的最小文档对象。

https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

let docFragment = document.createDocumentFragment();

// assuming it exists (ul element)

let ul = document.getElementsByTagName("ul")[0],
    docfrag = document.createDocumentFragment();

const browserList = [
    "Internet Explorer", 
    "Mozilla Firefox", 
    "Safari", 
    "Chrome", 
    "Opera"
];

browserList.forEach((e) => {
    let li = document.createElement("li");
    li.textContent = e;
    docfrag.appendChild(li);
});

ul.appendChild(docfrag);

https://stackoverflow.com/questions/16126960/what-is-the-difference-between-appendchild-insertadjacenthtml-and-innerhtml

insertAdjacentHTML & insertAdjacentElement & insertAdjacentText

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

element.insertAdjacentHTML(position, text);


<!-- beforebegin -->
    <p>
        <!-- afterbegin -->
        foo
        <!-- beforeend -->
    </p>
<!-- afterend -->

https://gist.github.com/xgqfrms-gildata/f2b41a63feb21081e9f51d464d7434d7#gistcomment-2134601

@xgqfrms-GitHub
Copy link

React State

https://gist.github.com/xgqfrms-GitHub/a9869ffb1202562991cfbf77d67a95ef#gistcomment-2139610

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment