Snabbdom（虚拟dom-6-createElm函数）

createElm

  function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node {let i: any;let data = vnode.data;if (data !== undefined) {// 执行用户设置的init钩子函数const init = data.hook?.init; // 用户传递的init函数if (isDef(init)) {init(vnode); // 调用init后,可能改变vnode的内容data = vnode.data; // 所以再次进行赋值;}}// 把vnode转换成真实DOM对象(没有渲染到页面)const children = vnode.children;const sel = vnode.sel;if (sel === "!") {//  注释节点if (isUndef(vnode.text)) {vnode.text = "";}vnode.elm = api.createComment(vnode.text!);} else if (sel !== undefined) {// 如果选择器不为空// 解析选择器// Parse selectorconst hashIdx = sel.indexOf("#"); // #位置const dotIdx = sel.indexOf(".", hashIdx); // .的位置const hash = hashIdx > 0 ? hashIdx : sel.length;const dot = dotIdx > 0 ? dotIdx : sel.length;const tag =hashIdx !== -1 || dotIdx !== -1? sel.slice(0, Math.min(hash, dot)): sel; // 标签名const elm = (vnode.elm =isDef(data) && isDef((i = data.ns))? api.createElementNS(i, tag, data): api.createElement(tag, data));if (hash < dot) elm.setAttribute("id", sel.slice(hash + 1, dot));if (dotIdx > 0)elm.setAttribute("class", sel.slice(dot + 1).replace(/\./g, " "));// 执行模块的create钩子函数for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);// 如果vnode中有子节点,创建子vnode对应的DOM元素并追加到DOM树上;if (is.array(children)) {for (i = 0; i < children.length; ++i) {const ch = children[i];if (ch != null) {// 如果子节点不为空,递归调用子节点,追加在对应父节点上api.appendChild(elm, createElm(ch as VNode, insertedVnodeQueue));}}} else if (is.primitive(vnode.text)) {// 如果vnode的text值是 string/number,创建文本节点并追加到 DOM树上api.appendChild(elm, api.createTextNode(vnode.text));}const hook = vnode.data!.hook;if (isDef(hook)) {// 执行用户传入的钩子 createhook.create?.(emptyNode, vnode);if (hook.insert) {// 把vnode 添加到队列中,为后续执行insert钩子做准备insertedVnodeQueue.push(vnode);}}} else {// 选择器为空,创建文本节点vnode.elm = api.createTextNode(vnode.text!);}// 返回新创建的DOMreturn vnode.elm;}

Snabbdom（虚拟dom-6-createElm函数）相关推荐

十二、虚拟 DOM 和 render() 函数（1）
本章概要虚拟DOM render()函数 Vue.js 之所以执行性能高,一个很重要的原因就是它的虚拟 DOM 机制. 12.1 虚拟 DOM 浏览器在解析 HTML 文档时,会将文档中的元素.注释 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
Github每日精选（第61期）：虚拟 DOM 走向未来 million
million million 使创建用户界面像React一样简单,但为最终用户提供更快的性能和更小的包大小.通过使用编译器预先计算用户界面,Million 减少了传统 Virtual DOM 的开销 ...
React框架简介（JSX语法、组件、虚拟DOM渲染）
目录 React框架为什么要学习React React特点 React核心 JSX语法语法详解 React开发过程实际DOM 虚拟DOM React组件函数组件类组件虚拟DOM渲染过程 R ...
Vue 这更新是要抛弃虚拟 DOM ？
最近 Vue 在美国举办了 Vue Conf 2022,不过可惜的是在国内并未掀起任何的波澜,于是我来试试能不能一石激起千层浪,因为尤雨溪在 Vue Conf 上说他们正在探索一种新的编译策略. 流行 ...
解密虚拟 DOM——snabbdom 核心源码解读
本文源码地址:https://github.com/zhongdeming428/snabbdom 对很多人而言,虚拟 DOM 都是一个很高大上而且远不可及的专有名词,以前我也这么认为,后来在学习 V ...
【Virtual DOM】虚拟 DOM 和 Snabbdom 库
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读 Virtual DOM 基本介绍什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的的 ...
虚拟DOM 之 Snabbdom 一、基本介绍
Snabbdom 接口介绍(Snabbdom@1.0.1) 官方文档当前snabbdom版本为 @1.0.1.接口介绍在官方文档的基础上做扩展,新版本接口使用基本和@0.7.4差不多. Snabbd ...
html5新的dom函数,从0到1: 实现一个虚拟 DOM（上）
写在前面本文分上下两篇,实现一个基础版本的虚拟 DOM. 上篇首先介绍什么是虚拟 DOM.为什么要使用虚拟 DOM,其次完成项目创建.实现 h 函数.render 函数以及 mount 函数,完成创 ...
【Vue.js源码解析二】-- 虚拟 DOM
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读虚拟 DOM 基本介绍什么是虚拟 DOM 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象 ...

Snabbdom（虚拟dom-6-createElm函数）

Snabbdom（虚拟dom-6-createElm函数）相关推荐

最新文章

热门文章