当前位置:Gxlcms > html代码 > 从零开始一步一步写一个简单的VirtualDOM实现2:Props&Event处理_html/css_WEB-ITnose

从零开始一步一步写一个简单的VirtualDOM实现2:Props&Event处理_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:16人阅读

Props

首先我们要回顾下前文讲的一个有些偏差的小点,假设我们在JSX中只写一个最简单的Div:

Babel会自动将该JSX转化为如下的DOM表达式:

{ type: ‘’, props: null, children: [] }

注意,这里的props默认是null,我们在之前的文章中并没有关注到这个属性,而本部分则是要讲解Virtual DOM中Props的用法。一般来说,无论在哪种编程环境下都要尽量避免Null的出现,因此我们首先来改造下 h 函数,使得其能够默认返回一个空的Object,而不是Null:

function h(type, props, …children) { return { type, props: props || {}, children };}

Setting Props:设置Props

接触过React的同学对于Props肯定不会陌生,而设置Props也就跟使用普通的HTML标签属性很类似:

    而最终会转化为如下的表达式:

    {  type: ‘ul’,  props: { className: ‘list’, style: ’list-style: none;’ }  children: []}

    props对象中的每个键即为属性名,而值为属性值,一般来说我们只需要简单的调用一个 setAttribute 方法来讲这个Props中的键值对设置到DOM元素上即可:

    function setProp($target, name, value) { $target.setAttribute(name, value);}

    这个函数用于将单个的Prop值设置到DOM元素上,而对于props对象,我们要做的就是依次遍历:

    function setProps($target, props) { Object.keys(props).forEach(name => {   setProp($target, name, props[name]); });}

    你应该还记得那个用于创建元素的 createElement 方法吧,我们需要将 setProps 方法放置到元素成功创建之后:

    function createElement(node) { if (typeof node === ‘string’) {   return document.createTextNode(node); } const $el = document.createElement(node.type); setProps($el, node.props); node.children   .map(createElement)   .forEach($el.appendChild.bind($el)); return $el;}

    不要急,这还远远不够。React的初学教程中一直强调className与class的区别,在我们的setProps中也需要对于这些JS的保留字做一个替换,譬如:

    另外,还有比较常见的就是对于DOM的布尔属性,譬如checked、disabled等等的处理:

    在真实的DOM节点上,如果是出现了false的情况,我们并不希望checked属性会出现,那么我们的Props函数就要能智能地进行判断:

    function setBooleanProp($target, name, value) { if (value) {   $target.setAttribute(name, value);   $target[name] = true; } else {   $target[name] = false; }}

    最后呢,要做的就是对于自定义的,即非标准的HTML属性进行一个过滤,这些属性只应该出现在JS对象上,而不应该出现在真实的DOM对象上:

    function isCustomProp(name) { return false;}
    function setProp($target, name, value) { if (isCustomProp(name)) {   return; } else if (name === ‘className’) {   $target.setAttribute(‘class’, value); } else if (typeof value === ‘boolean’) {   setBooleanProp($target, name, value); } else {   $target.setAttribute(name, value); }}

    总结一下,本部分完整的JSX代码为:

    /** @jsx h */function h(type, props, ...children) {  return { type, props: props || {}, children };}function setBooleanProp($target, name, value) {  if (value) {    $target.setAttribute(name, value);    $target[name] = true;  } else {    $target[name] = false;  }}function isCustomProp(name) {  return false;}function setProp($target, name, value) {  if (isCustomProp(name)) {    return;  } else if (name === 'className') {    $target.setAttribute('class', value);  } else if (typeof value === 'boolean') {    setBooleanProp($target, name, value);  } else {    $target.setAttribute(name, value);  }}function setProps($target, props) {  Object.keys(props).forEach(name => {    setProp($target, name, props[name]);  });}function createElement(node) {  if (typeof node === 'string') {    return document.createTextNode(node);  }  const $el = document.createElement(node.type);  setProps($el, node.props);  node.children    .map(createElement)    .forEach($el.appendChild.bind($el));  return $el;}//--------------------------------------------------const f = (  
    • item 1
    );const $root = document.getElementById('root');$root.appendChild(createElement(f));

    Diffing Props:Props变化比较

    现在我们已经创建了带有Props属性的元素,下一个需要考虑的就是应该如何应用到我们上文提到的Diff算法中。首先我们要来看下如何从真实的DOM中移除某些Props:

    function removeBooleanProp($target, name) { $target.removeAttribute(name); $target[name] = false;}function removeProp($target, name, value) { if (isCustomProp(name)) {   return; } else if (name === ‘className’) {   $target.removeAttribute(‘class’); } else if (typeof value === ‘boolean’) {   removeBooleanProp($target, name); } else {   $target.removeAttribute(name); }}

    然后我们需要写一个updateProp函数,来根据新旧节点的Props的变化进行恰当的真实DOM节点的修改,共有以下几种情况:

    • 新节点移除了某个旧节点的Prop

    • 新节点添加了某个旧节点没有的Prop

    • 新旧节点的某个Prop的值发生了变化

    根据以上规则,我们可知更新Prop的函数为:

    function updateProp($target, name, newVal, oldVal) { if (!newVal) {   removeProp($target, name, oldVal); } else if (!oldVal || newVal !== oldVal) {   setProp($target, name, newVal); }}

    可以看出,更新单个Prop的函数还是非常简单的,就是将移除与设置结合起来使用,那么我们扩展到Props,就得到如下的函数:

    function updateProps($target, newProps, oldProps = {}) {  const props = Object.assign({}, newProps, oldProps);  Object.keys(props).forEach(name => {    updateProp($target, name, newProps[name], oldProps[name]);  });}

    同样地,我们需要将该更新函数添加到 updateElement 函数中:

    function updateElement($parent, newNode, oldNode, index = 0) {  ...  } else if (newNode.type) {    updateProps(      $parent.childNodes[index],      newNode.props,      oldNode.props    );     ...  }}

    Events

    用户交互是任何一个应用不可或缺的部分,而在这里我们讨论下如何为Virtual DOM添加事件处理的能力,React大概会这么做:

    可以看出,设置一个事件处理器就是添加一个Prop,只不过名称会以 on 开始,那么我们可以用如下函数来判断某个Prop是否与事件相关:

    function isEventProp(name) { return /^on/.test(name);}

    判断是事件类型之后,我们可以提取出事件名:

    function extractEventName(name) { return name.slice(2).toLowerCase();}

    看到这里,估计你会考虑直接将事件处理也放到setProps与updateProps函数中,不过这边就会存在一个问题,在diffProps的时候,你很难去比较两个function:

    因此我们将所有的事件类型的Props认为是自定义的Props,这样我们上面提到的isCustomProp就起作用了:

    function isCustomProp(name) { return isEventProp(name);}

    而把事件响应函数绑定到真实的DOM节点也很简单:

    function addEventListeners($target, props) { Object.keys(props).forEach(name => {   if (isEventProp(name)) {     $target.addEventListener(       extractEventName(name),       props[name]     );   } });}

    同样的需要将该函数添加到createElement中:

    function createElement(node) { if (typeof node === ‘string’) {   return document.createTextNode(node); } const $el = document.createElement(node.type); setProps($el, node.props); addEventListeners($el, node.props); node.children   .map(createElement)   .forEach($el.appendChild.bind($el)); return $el;}

    Re-Adding Events:重新设置了事件响应

    在这里我们暂时不考虑地很复杂,即不深入地比较那些事件类型的Prop发生变化的情况,作为替代的,我们引入一个forceUpdate属性,即强制整个DOM进行更新:

    function changed(node1, node2) { return typeof node1 !== typeof node2 ||        typeof node1 === ‘string’ && node1 !== node2 ||        node1.type !== node2.type ||        node.props.forceUpdate;}
    function isCustomProp(name) { return isEventProp(name) || name === ‘forceUpdate’;}

    最后,本文完整的JSX为:

    /** @jsx h */function h(type, props, ...children) {  return { type, props: props || {}, children };}function setBooleanProp($target, name, value) {  if (value) {    $target.setAttribute(name, value);    $target[name] = true;  } else {    $target[name] = false;  }}function removeBooleanProp($target, name) {  $target.removeAttribute(name);  $target[name] = false;}function isEventProp(name) {  return /^on/.test(name);}function extractEventName(name) {  return name.slice(2).toLowerCase();}function isCustomProp(name) {  return isEventProp(name) || name === 'forceUpdate';}function setProp($target, name, value) {  if (isCustomProp(name)) {    return;  } else if (name === 'className') {    $target.setAttribute('class', value);  } else if (typeof value === 'boolean') {    setBooleanProp($target, name, value);  } else {    $target.setAttribute(name, value);  }}function removeProp($target, name, value) {  if (isCustomProp(name)) {    return;  } else if (name === 'className') {    $target.removeAttribute('class');  } else if (typeof value === 'boolean') {    removeBooleanProp($target, name);  } else {    $target.removeAttribute(name);  }}function setProps($target, props) {  Object.keys(props).forEach(name => {    setProp($target, name, props[name]);  });}function updateProp($target, name, newVal, oldVal) {  if (!newVal) {    removeProp($target, name, oldVal);  } else if (!oldVal || newVal !== oldVal) {    setProp($target, name, newVal);  }}function updateProps($target, newProps, oldProps = {}) {  const props = Object.assign({}, newProps, oldProps);  Object.keys(props).forEach(name => {    updateProp($target, name, newProps[name], oldProps[name]);  });}function addEventListeners($target, props) {  Object.keys(props).forEach(name => {    if (isEventProp(name)) {      $target.addEventListener(        extractEventName(name),        props[name]      );    }  });}function createElement(node) {  if (typeof node === 'string') {    return document.createTextNode(node);  }  const $el = document.createElement(node.type);  setProps($el, node.props);  addEventListeners($el, node.props);  node.children    .map(createElement)    .forEach($el.appendChild.bind($el));  return $el;}function changed(node1, node2) {  return typeof node1 !== typeof node2 ||         typeof node1 === 'string' && node1 !== node2 ||         node1.type !== node2.type ||         node1.props && node1.props.forceUpdate;}function updateElement($parent, newNode, oldNode, index = 0) {  if (!oldNode) {    $parent.appendChild(      createElement(newNode)    );  } else if (!newNode) {    $parent.removeChild(      $parent.childNodes[index]    );  } else if (changed(newNode, oldNode)) {    $parent.replaceChild(      createElement(newNode),      $parent.childNodes[index]    );  } else if (newNode.type) {    updateProps(      $parent.childNodes[index],      newNode.props,      oldNode.props    );    const newLength = newNode.children.length;    const oldLength = oldNode.children.length;    for (let i = 0; i < newLength || i < oldLength; i++) {      updateElement(        $parent.childNodes[index],        newNode.children[i],        oldNode.children[i],        i      );    }  }}//---------------------------------------------------------function log(e) {  console.log(e.target.value);}const f = (  
    • alert('hi!')}>item 1
    • {/* this node will always be updated */}
    • text
    );const g = (
    • alert('hi!')}>item 1
    • {/* this node will always be updated */}
    • text
    );const $root = document.getElementById('root');const $reload = document.getElementById('reload');updateElement($root, f);$reload.addEventListener('click', () => { updateElement($root, g, f);});

    到这里我们就完成了一个最简单的Virtual DOM算法,不过其与真正能够投入实战的Virtual DOM算法还是有很大距离,进一步阅读推荐:

    • 深度剖析:如何实现一个 Virtual DOM 算法

    • 我的前端故事----React算法又是个什么鬼?!

    • A Virtual DOM and diffing algorithm :一个比较复杂的Virtual DOM算法的实现

    • simple-virtual-dom :一个简单的Virtual DOM的实现

    • how-to-write-your-own-virtual-dom

    • Virtual DOM Benchmark

    人气教程排行