第三十八周总结—

vnode.js

export default function vnode(sel,data,children,text,elm){//key值是标签的唯一标识，在data.key中，这里获取一下keyconst key = data === undefined ? undefined : data.keyreturn { sel, data, children, text, elm, key };
}

h函数各个参数
sel:{String | Object | Function} 必须
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。

data:{Object} 可选
与 attribute、prop 和事件相对应的对象。

key:该值在data中，虚拟DOM的唯一标识可选

text:{String} 可选

children:(h() | {}) 可选

elm:表示是否上树
h函数的流程
h函数必定传的有一个值就是sel，表示的标签名称，比如div
h函数传值的时候先判断第三个参数children是否有值，如果有值则进行判断
1.children是数组，说明是子元素
2.children是字符串，说明是text参数中的内容，也就是标签中的文字
3.children有值，且children.sel有值，说明是子元素，只不过不是数组的形式，需要将其转换成数组的形式在添加
h函数传值的时候没有第三个参数children,有第二个参数data,这时再根据第三个参数判断的形式进行判断
1.data是数组，说明是子元素
2.data是字符串，说明是text参数中的内容，也就是标签中的文字
3.data有值，且data.sel有值，说明是子元素，只不过不是数组的形式，需要将其转换成数组的形式在添加
4.如果以上三种都不是则说明data中传的值是与 attribute、prop 和事件相对应的对象，将其直接赋值给data
h函数判断children中的值是否存在text,就是标签中的文字，如果有则只传children，其他的值都为undefined
h函数最后进行判断是否是svg标签
h.js

// 引入vnode
import vnode from "./vnode";
import is from './is'
function addNS(data,children,sel){data.ns = "http://www.w3.org/2000/svg";if (sel !== "foreignObject" && children !== undefined) {for (let i = 0; i < children.length; ++i) {const child = children[i];if (typeof child === "string")continue;const childData = child.data;if (childData !== undefined) {addNS(childData, child.children, child.sel);}}}
}
export default function h(sel,b,c){// 定义返回值let data = {};let children;let text;let i;//如果c!==undefined说明children传值了if(c!==undefined){if(b!==null){//如果b不是null则将b赋值给datadata = b;}//判断c是children还是textif(is.array(c)){//c为children时，将c赋值给childrenchildren = c}else if(is.primitive(c)){//c为输入的内容，将c转换成字符串赋值给texttext = c.toString();}else if(c&&c.sel){//c为一个子元素，并不是以数组的形式写上的，则将c变成数组的形式赋值给childrenchildren = [c];}}else if(b!==undefined&&b!==null){//如果c为undefined了就该判断c前面的b是否是undefined或null了//判断b是children还是dataif(is.array(b)){//这里说明b是childrenchildren = b;}else if(is.primitive(b)){//这里判断b是texttext = b.toString()}else if(b&&b.sel){//这里判断是否是单个h函数，不是数组形式的childrenchildren = [b];}else{//这里说明b是datadata = b;}}//判断children数组中的数据是否是textif(children !== undefined){for(i = 0;i<children.length;++i){if(is.primitive(children[i])){//如果是字符串则只传textchildren[i]=vnode(undefined,undefined,undefined,children[i].undefined)}}}if (sel[0] === "s" &&sel[1] === "v" &&sel[2] === "g" &&(sel.length === 3 || sel[3] === "." || sel === "#")) {//判断是否时svg标签addNS(data,children,sel)}//这里返回的最后一个参数为undefined，是因为还没有上树，elm为undefinedreturn vnode(sel,data,children,text,undefined);
}

第三十八周总结——h函数相关推荐

左耳听风第三十八周
左耳听风第三十八周每周完成一个ARTS: 每周至少做一个 leetcode 的算法题.阅读并点评至少一篇英文技术文章.学习至少一个技术技巧.分享一篇有观点和思考的技术文章.(也就是 Algorit ...
C语言编程＞第十八周 ⑧ 给定程序中，函数fun的功能是：将形参指针所指结构体数组中的三个元素按num成员进行升序排列。
例题:给定程序中,函数fun的功能是:将形参指针所指结构体数组中的三个元素按num成员进行升序排列. 注意:请勿改动主函数main与其他函数中的任何内容,仅在横线上填写所需的若干表达式或语句. 代码如 ...
OpenCV学习笔记（三十六）——Kalman滤波做运动目标跟踪 OpenCV学习笔记（三十七）——实用函数、系统函数、宏core OpenCV学习笔记（三十八）——显示当前FPS OpenC
OpenCV学习笔记(三十六)--Kalman滤波做运动目标跟踪 kalman滤波大家都很熟悉,其基本思想就是先不考虑输入信号和观测噪声的影响,得到状态变量和输出信号的估计值,再用输出信号的估计误差加 ...
[Python从零到壹] 三十八.图像处理基础篇之图像几何变换（平移缩放旋转）
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
三十八、Fluent融化凝固模型参数设置依据
1. 融化凝固模型概述 1.1 模型原理我们在Chapter37分享了Fluent融化凝固模型案例,前文只是介绍了Fluent中的操作过程. 不知道大家会不会觉得很奇怪,Fluent模拟融化和凝固, ...
视频教程-三十八课时零基础matlab精通优化算法-Matlab
三十八课时零基础matlab精通优化算法图像和算法等领域有多年研究和项目经验:指导发表科技核心期刊经验丰富:多次指导数学建模爱好者参赛. 宋星星 ¥100.00 立即订阅扫码下载「CSDN程序员学 ...
第十八周学习周报（20180702-20180708）
第十八周学习周报一.本周学习情况 1.学习了李宏毅老师的深度学习课程 2.学习了caffe的源码 3.做识别猪模型需要的数据二.学习笔记 caffe中训练自己数据集的步骤: 1.数据准备 ...
Django笔记三十八之发送邮件
这一篇笔记介绍如何在 Django 中发送邮件. 在 Python 中,提供了 smtplib 的邮件模块,而 Django 在这个基础上对其进行了封装,我们可以通过 django.core.mail ...
rust sabrina 滑雪板_「Rust」夺冠 Valve Index连续十八周TOP10
日前,Valve公布了上周(2021年1月4日-1月10日)Steam平台销量排行榜,由Facepunch Studios开发的第一人称末日生存联机游戏「Rust(腐蚀)」拿下冠军,「V社VR套件(V ...

第三十八周总结——h函数

第三十八周总结——h函数相关推荐

最新文章

热门文章