基于JSX的动态数据绑定

基于 JSX 的动态数据绑定归属于笔者的 React 与前端工程化实践中的，本文中设计的引用资料参考 React 学习与实践资料索引，如果有对 JavaScript 基础语法尚存疑惑的可以参阅现代 JavaScript 开发：语法基础与实践技巧。

创新互联公司2013年成立，是专业互联网技术服务公司，拥有项目成都网站制作、网站建设、外贸网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元新乐做网站,已为上家服务,为新乐各地企业和个人服务,联系电话:18982081108

基于 JSX 的动态数据绑定

笔者在 2016-我的前端之路: 工具化与工程化一文中提及，前端社区用了 15 年的时间来分割 HTML、JavaScript 与 CSS，但是随着 JSX 的出现仿佛事物一夕回到解放前。在 Angular、Vue.js 等 MVVM 前端框架中都是采用了指令的方式来描述业务逻辑，而 JSX 本质上还是 JavaScript，即用 JavaScript 来描述业务逻辑。虽然 JSX 被有些开发者评论为丑陋的语法，但是笔者还是秉持 JavaScript First 原则，尽可能地用 JavaScript 去编写业务代码。在前文 React 初窥：JSX 详解中我们探讨了 JSX 的前世今生与基本用法，而本部分我们着手编写简单的面向 DOM 的 JSX 解析与动态数据绑定库;本部分所涉及的代码归纳于 Ueact 库。

JSX 解析与 DOM 元素构建

元素构建

笔者在 JavaScript 语法树与代码转化实践 一文中介绍过 Babel 的原理与用法，这里我们仍然使用 Babel 作为 JSX 语法解析工具;为了将 JSX 声明转化为 createElement 调用，这里需要在项目的 .babelrc 文件中做如下配置：

 
 
 
 

  
  
  
  
"plugins": [
  
  
  
  
   "transform-decorators-legacy",
  
  
  
  
   "async-to-promises",
  
  
  
  
   [
  
  
  
  
     "transform-react-jsx", {
  
  
  
  
       "pragma": "createElement"
  
  
  
  
     }
  
  
  
  
   ]
  
  
  
  
 ],
 
 
 
 

这里的 createElement 函数声明如下：

 
 
 
 

  
  
  
  
/**
  
  
  
  
 * Description 从 JSX 中构建虚拟 DOM
  
  
  
  
 * @param tagName 标签名
  
  
  
  
 * @param props 属性
  
  
  
  
 * @param childrenArgs 子元素列表
  
  
  
  
 */
  
  
  
  
export function createElement(
  
  
  
  
  tagName: string,
  
  
  
  
  props: propsType,
  
  
  
  
  ...childrenArgs: [any]
  
  
  
  
) {}
 
 
 
 

该函数包含三个参数，分别指定标签名、属性对象与子元素列表;实际上经过 Babel 的转化之后，JSX 文本会成为如下的函数调用(这里还包含了 ES2015 其他的语法转化)：

 
 
 
 

  
  
  
  
...
  
  
  
  
  (0, _createElement.createElement)(
  
  
  
  
    'section',
  
  
  
  
    null,
  
  
  
  
    (0, _createElement.createElement)(
  
  
  
  
      'section',
  
  
  
  
      null,
  
  
  
  
      (0, _createElement.createElement)(
  
  
  
  
        'button',
  
  
  
  
        { className: 'link', onClick: handleClick },
  
  
  
  
        'Custom DOM JSX'
  
  
  
  
      ),
  
  
  
  
      (0, _createElement.createElement)('input', {
  
  
  
  
        type: 'text',
  
  
  
  
        onChange: function onChange(e) {
  
  
  
  
          console.log(e);
  
  
  
  
        }
  
  
  
  
      })
  
  
  
  
    )
  
  
  
  
  ),
  
  
  
  
...
 
 
 
 

在获取到元素标签之后，我们首先要做的就是创建元素;创建元素 createElementByTag 过程中我们需要注意区分普通元素与 SVG 元素：

 
 
 
 

  
  
  
  
export const createElementByTag = (tagName: string) => {
  
  
  
  
if (isSVG(tagName)) {
  
  
  
  
return document.createElementNS('http://www.w3.org/2000/svg', tagName);
  
  
  
  
  }
  
  
  
  
return document.createElement(tagName);
  
  
  
  
};
 
 
 
 

属性处理

在创建了新的元素对象之后，我们需要对 createElement 函数传入的后续参数进行处理，也就是为元素设置对应的属性;基本的属性包含了样式类、行内样式、标签属性、事件、子元素以及朴素的 HTML 代码等。首先我们需要对子元素进行处理：

 
 
 
 

  
  
  
  
// 处理所有子元素，如果子元素为单纯的字符串，则直接创建文本节点
  
  
  
  
const children = flatten(childrenArgs).map(child => {
  
  
  
  
  // 如果子元素同样为 Element，则创建该子元素的副本
  
  
  
  
if (child instanceof HTMLElement) {
  
  
  
  
return child;
  
  
  
  
  }
  
  
  
  

  
  
  
  
if (typeof child === 'boolean' || child === null) {
  
  
  
  
    child = '';
  
  
  
  
  }
  
  
  
  

  
  
  
  
return document.createTextNode(child);
  
  
  
  
});
 
 
 
 

这里可以看出，对 createElement 函数的执行是自底向上执行的，因此传入的子元素参数实际上是已经经过渲染的 HTML 元素。接下来我们还需要对其他属性进行处理：

 
 
 
 

  
  
  
  
...
  
  
  
  
// 同时支持 class 与 className 设置
  
  
  
  
const className = props.class || props.className;
  
  
  
  

  
  
  
  
// 如果存在样式类，则设置
  
  
  
  
if (className) {
  
  
  
  
  setAttribute(tagName, el, 'class', classNames(className));
  
  
  
  
}
  
  
  
  

  
  
  
  
// 解析行内样式
  
  
  
  
getStyleProps(props).forEach(prop => {
  
  
  
  
  el.style.setProperty(prop.name, prop.value);
  
  
  
  
});
  
  
  
  

  
  
  
  
// 解析其他 HTML 属性
  
  
  
  
getHTMLProps(props).forEach(prop => {
  
  
  
  
  setAttribute(tagName, el, prop.name, prop.value);
  
  
  
  
});
  
  
  
  

  
  
  
  
// 设置事件监听，这里为了解决部分浏览器中异步问题因此采用同步写法
  
  
  
  
let events = getEventListeners(props);
  
  
  
  

  
  
  
  
for (let event of events) {
  
  
  
  
  el[event.name] = event.listener;
  
  
  
  
}
  
  
  
  
...
 
 
 
 

React 中还允许直接设置元素的内部 HTML 代码，这里我们也需要判断是否存在有 dangerouslySetInnerHTML 属性：

 
 
 
 

  
  
  
  
// 如果是手动设置 HTML，则添加 HTML，否则设置显示子元素
  
  
  
  
if (setHTML && setHTML.__html) {
  
  
  
  
  el.innerHTML = setHTML.__html;
  
  
  
  
} else {
  
  
  
  
  children.forEach(child => {
  
  
  
  
    el.appendChild(child);
  
  
  
  
  });
  
  
  
  
}
 
 
 
 

到这里我们就完成了针对 JSX 格式的朴素的 DOM 标签转化的 createElement 函数，完整的源代码参考这里。

简单使用

这里我们依旧使用 create-webpack-app 脚手架来搭建示例项目，这里我们以简单的计数器为例描述其用法。需要注意的是，本部分尚未引入双向数据绑定，或者说是自动状态变化更新，还是使用的朴素的 DOM 选择器查询更新方式：

 
 
 
 

  
  
  
  
// App.js
  
  
  
  
import { createElement } from '../../../src/dom/jsx/createElement';
  
  
  
  

  
  
  
  
// 页面内状态
  
  
  
  
const state = {
  
  
  
  
  count: 0
  
  
  
  
};
  
  
  
  

  
  
  
  
/**
  
  
  
  
 * Description 点击事件处理
  
  
  
  
 * @param e
  
  
  
  
 */
  
  
  
  
const handleClick = e => {
  
  
  
  
  state.count++;
  
  
  
  
  document.querySelector('#count').innerText = state.count;
  
  
  
  
};
  
  
  
  

  
  
  
  
export default (
  
  
  
  
  
  
  
  
  
    

  
  
  
  
      

  
  
  
  
        
  
  
  
  
          Custom DOM JSX
  
  
  
  
        
  
  
  
  
        
  
  
  
  
          onChange={(e)=>{
  
  
  
  
            console.log(e);
  
  
  
  
          }}
  
  
  
  
        />
  
  
  
  
      
  
  
  
  
    
  
  
  
  
    
  
  
  
  
      
  
  
  
  
    
  
  
  
  
    
  
  
  
  
    
  
  
  
  
      {state.count}