91精品国产色综合久久不卡电影 ,国产精品无码,超级国产人人做人人爽

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

基于JSX的動態(tài)數(shù)據(jù)綁定

基于 JSX 的動態(tài)數(shù)據(jù)綁定歸屬于筆者的 React 與前端工程化實踐中的，本文中設(shè)計的引用資料參考 React 學(xué)習(xí)與實踐資料索引，如果有對 JavaScript 基礎(chǔ)語法尚存疑惑的可以參閱現(xiàn)代 JavaScript 開發(fā)：語法基礎(chǔ)與實踐技巧。

創(chuàng)新互聯(lián)公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元新樂做網(wǎng)站,已為上家服務(wù),為新樂各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

基于 JSX 的動態(tài)數(shù)據(jù)綁定

筆者在 2016-我的前端之路: 工具化與工程化一文中提及，前端社區(qū)用了 15 年的時間來分割 HTML、JavaScript 與 CSS，但是隨著 JSX 的出現(xiàn)仿佛事物一夕回到解放前。在 Angular、Vue.js 等 MVVM 前端框架中都是采用了指令的方式來描述業(yè)務(wù)邏輯，而 JSX 本質(zhì)上還是 JavaScript，即用 JavaScript 來描述業(yè)務(wù)邏輯。雖然 JSX 被有些開發(fā)者評論為丑陋的語法，但是筆者還是秉持 JavaScript First 原則，盡可能地用 JavaScript 去編寫業(yè)務(wù)代碼。在前文 React 初窺：JSX 詳解中我們探討了 JSX 的前世今生與基本用法，而本部分我們著手編寫簡單的面向 DOM 的 JSX 解析與動態(tài)數(shù)據(jù)綁定庫;本部分所涉及的代碼歸納于 Ueact 庫。

JSX 解析與 DOM 元素構(gòu)建

元素構(gòu)建

筆者在 JavaScript 語法樹與代碼轉(zhuǎn)化實踐一文中介紹過 Babel 的原理與用法，這里我們?nèi)匀皇褂?Babel 作為 JSX 語法解析工具;為了將 JSX 聲明轉(zhuǎn)化為 createElement 調(diào)用，這里需要在項目的 .babelrc 文件中做如下配置：

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

這里的 createElement 函數(shù)聲明如下：

 
 
 
 
  
  
  
  /**
  
  
  
   * Description 從 JSX 中構(gòu)建虛擬 DOM
  
  
  
   * @param tagName 標簽名
  
  
  
   * @param props 屬性
  
  
  
   * @param childrenArgs 子元素列表
  
  
  
   */
  
  
  
  export function createElement(
  
  
  
    tagName: string,
  
  
  
    props: propsType,
  
  
  
    ...childrenArgs: [any]
  
  
  
  ) {}

該函數(shù)包含三個參數(shù)，分別指定標簽名、屬性對象與子元素列表;實際上經(jīng)過 Babel 的轉(zhuǎn)化之后，JSX 文本會成為如下的函數(shù)調(diào)用(這里還包含了 ES2015 其他的語法轉(zhuǎn)化)：

 
 
 
 
  
  
  
  ...
  
  
  
    (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);
  
  
  
          }
  
  
  
        })
  
  
  
      )
  
  
  
    ),
  
  
  
  ...

在獲取到元素標簽之后，我們首先要做的就是創(chuàng)建元素;創(chuàng)建元素 createElementByTag 過程中我們需要注意區(qū)分普通元素與 SVG 元素：

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

屬性處理

在創(chuàng)建了新的元素對象之后，我們需要對 createElement 函數(shù)傳入的后續(xù)參數(shù)進行處理，也就是為元素設(shè)置對應(yīng)的屬性;基本的屬性包含了樣式類、行內(nèi)樣式、標簽屬性、事件、子元素以及樸素的 HTML 代碼等。首先我們需要對子元素進行處理：

 
 
 
 
  
  
  
  // 處理所有子元素，如果子元素為單純的字符串，則直接創(chuàng)建文本節(jié)點
  
  
  
  const children = flatten(childrenArgs).map(child => {
  
  
  
    // 如果子元素同樣為 Element，則創(chuàng)建該子元素的副本
  
  
  
  if (child instanceof HTMLElement) {
  
  
  
  return child;
  
  
  
    }
  
  
  
  
  
  
  
  if (typeof child === 'boolean' || child === null) {
  
  
  
      child = '';
  
  
  
    }
  
  
  
  
  
  
  
  return document.createTextNode(child);
  
  
  
  });

這里可以看出，對 createElement 函數(shù)的執(zhí)行是自底向上執(zhí)行的，因此傳入的子元素參數(shù)實際上是已經(jīng)經(jīng)過渲染的 HTML 元素。接下來我們還需要對其他屬性進行處理：

 
 
 
 
  
  
  
  ...
  
  
  
  // 同時支持 class 與 className 設(shè)置
  
  
  
  const className = props.class || props.className;
  
  
  
  
  
  
  
  // 如果存在樣式類，則設(shè)置
  
  
  
  if (className) {
  
  
  
    setAttribute(tagName, el, 'class', classNames(className));
  
  
  
  }
  
  
  
  
  
  
  
  // 解析行內(nèi)樣式
  
  
  
  getStyleProps(props).forEach(prop => {
  
  
  
    el.style.setProperty(prop.name, prop.value);
  
  
  
  });
  
  
  
  
  
  
  
  // 解析其他 HTML 屬性
  
  
  
  getHTMLProps(props).forEach(prop => {
  
  
  
    setAttribute(tagName, el, prop.name, prop.value);
  
  
  
  });
  
  
  
  
  
  
  
  // 設(shè)置事件監(jiān)聽，這里為了解決部分瀏覽器中異步問題因此采用同步寫法
  
  
  
  let events = getEventListeners(props);
  
  
  
  
  
  
  
  for (let event of events) {
  
  
  
    el[event.name] = event.listener;
  
  
  
  }
  
  
  
  ...

React 中還允許直接設(shè)置元素的內(nèi)部 HTML 代碼，這里我們也需要判斷是否存在有 dangerouslySetInnerHTML 屬性：

 
 
 
 
  
  
  
  // 如果是手動設(shè)置 HTML，則添加 HTML，否則設(shè)置顯示子元素
  
  
  
  if (setHTML && setHTML.__html) {
  
  
  
    el.innerHTML = setHTML.__html;
  
  
  
  } else {
  
  
  
    children.forEach(child => {
  
  
  
      el.appendChild(child);
  
  
  
    });
  
  
  
  }

到這里我們就完成了針對 JSX 格式的樸素的 DOM 標簽轉(zhuǎn)化的 createElement 函數(shù)，完整的源代碼參考這里。

簡單使用

這里我們依舊使用 create-webpack-app 腳手架來搭建示例項目，這里我們以簡單的計數(shù)器為例描述其用法。需要注意的是，本部分尚未引入雙向數(shù)據(jù)綁定，或者說是自動狀態(tài)變化更新，還是使用的樸素的 DOM 選擇器查詢更新方式：

 
 
 
 
  
  
  
  // App.js
  
  
  
  import { createElement } from '../../../src/dom/jsx/createElement';
  
  
  
  
  
  
  
  // 頁面內(nèi)狀態(tài)
  
  
  
  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}

);

// client.js

// @flow

import App from './component/Count';

document.querySelector('#root').appendChild(App);

數(shù)據(jù)綁定

當我們使用 Webpack 在后端編譯 JSX 時，會將其直接轉(zhuǎn)化為 JavaScript 中函數(shù)調(diào)用，因此可以自然地在作用域中聲明變量然后在 JSX 中直接引用;不過筆者在設(shè)計 Ueact 時考慮到，為了方便快速上手或者簡單的 H5 頁面開發(fā)或者已有的代碼庫的升級，還是需要支持運行時動態(tài)編譯的方式;本部分我們即討論如何編寫 JSX 格式的 HTML 模板并且進行數(shù)據(jù)動態(tài)綁定。本部分我們的 HTML 模板即是上文使用的 JSX 代碼，不同的是我們還需要引入 babel-standalone 以及 Ueact 的 umd 模式庫：

然后在本頁面的 script 標簽中，我們可以對模板進行渲染并且綁定數(shù)據(jù)：

這里我們調(diào)用 Ueact.observeDOM 函數(shù)對模板進行渲染，該函數(shù)會獲取指定元素的 outerHTML 屬性，然后通過 Babel 動態(tài)插件進行編譯：

 
 
 
 
  
  
  
  let input = html2JSX(ele.outerHTML);
  
  
  
  
  
  
  
     let output = Babel.transform(input, {
  
  
  
       presets: ['es2015'],
  
  
  
       plugins: [
  
  
  
         [
  
  
  
           'transform-react-jsx',
  
  
  
           {
  
  
  
             pragma: 'Ueact.createElement'
  
  
  
           }
  
  
  
         ]
  
  
  
       ]
  
  
  
     }).code;

值得一提的是，因為 HTML 語法與 JSX 語法存在一定的差異，我們獲取渲染之后的 DOM 對象之后，還需要對部分元素語法進行修正;主要包括了以下三個場景：

自閉合標簽處理，即 =>
去除輸入的 HTML 中的事件監(jiān)聽的引號，即 onclick="{methods.handleClick}" => onclick={methods.handleClick}
移除 value 值額外的引號，即 value="{state.a}" => value={state.a}

到這里我們得到了經(jīng)過 Babel 轉(zhuǎn)化的函數(shù)調(diào)用代碼，下面我們就需要去執(zhí)行這部分代碼并且完成數(shù)據(jù)填充。最簡單的方式就是使用 eval 函數(shù)，不過因為該函數(shù)直接暴露在了全局作用域下，因此并不被建議使用;我們使用動態(tài)構(gòu)造 Function 的方式來進行調(diào)用：

 
 
 
 
  
  
  
  /**
  
  
  
   * Description 從輸入的 JSX 函數(shù)字符串中完成構(gòu)建
  
  
  
   * @param innerContext
  
  
  
   */
  
  
  
  function renderFromStr(innerContext) {
  
  
  
    let func = new Function(
  
  
  
      'innerContext',
  
  
  
      `
  
  
  
       let { state, methods, hooks } = innerContext;
  
  
  
       let ele = ${innerContext.rawJSX}
  
  
  
  return ele;
  
  
  
      `
  
  
  
    ).bind(innerContext);
  
  
  
  
  
  
  
    // 構(gòu)建新節(jié)點
  
  
  
    let newEle: Element = func(innerContext);
  
  
  
  
  
  
  
    // 使用指定元素的父節(jié)點替換自身
  
  
  
    innerContext.root.parentNode.replaceChild(newEle, innerContext.root);
  
  
  
  
  
  
  
    // 替換完畢之后刪除舊節(jié)點的引用，觸發(fā) GC
  
  
  
    innerContext.root = newEle;
  
  
  
  }

innerContext 即包含了我們定義的 State 與 Methods 等對象，這里利用 JavaScript 詞法作用域(Lexical Scope)的特性進行變量傳遞;本部分完整的代碼參考這里。

變化監(jiān)聽與重渲染

筆者在 2015-我的前端之路:數(shù)據(jù)流驅(qū)動的界面中討論了從以 DOM 為核心到數(shù)據(jù)流驅(qū)動的變化，本部分我們即討論如何自動監(jiān)聽狀態(tài)變化并且完成重渲染。這里我們采用監(jiān)聽 JavaScript 對象屬性的方式進行狀態(tài)變化監(jiān)聽，采用了筆者另一個庫 Observer-X，其基本用發(fā)如下：

 
 
 
 
  
  
  
  import { observe } from '../../dist/observer-x';
  
  
  
  
  
  
  
  const obj = observe(
  
  
  
    {},
  
  
  
    {
  
  
  
      recursive: true
  
  
  
    }
  
  
  
  );
  
  
  
  
  
  
  
  obj.property = {};
  
  
  
  
  
  
  
  obj.property.listen(changes => {
  
  
  
    console.log(changes);
  
  
  
    console.log('changes in obj');
  
  
  
  });
  
  
  
  
  
  
  
  obj.property.name = 1;
  
  
  
  
  
  
  
  obj.property.arr = [];
  
  
  
  
  
  
  
  obj.property.arr.listen(changes => {
  
  
  
    // console.log('changes in obj.arr');
  
  
  
  });
  
  
  
  
  
  
  
  // changes in the single event loop will be print out
  
  
  
  
  
  
  
  setTimeout(() => {
  
  
  
    obj.property.arr.push(1);
  
  
  
  
  
  
  
    obj.property.arr.push(2);
  
  
  
  
  
  
  
    obj.property.arr.splice(0, 0, 3);
  
  
  
  }, 500);

核心即是當某個對象的屬性發(fā)生變化(增刪賦值)時，觸發(fā)注冊的回調(diào)事件;即：

 
 
 
 
  
  
  
  ...
  
  
  
    // 將內(nèi)部狀態(tài)轉(zhuǎn)化為可觀測變量
  
  
  
    let state = observe(innerContext.state);
  
  
  
    ...
  
  
  
  state.listen(changes => {
  
  
  
      renderFromStr(innerContext);
  
  
  
      innerContext.hooks.updated && innerContext.hooks.updated();
  
  
  
    });
  
  
  
    ...

【本文是專欄作者“張梓雄 ”的原創(chuàng)文章，如需轉(zhuǎn)載請通過與作者聯(lián)系】

網(wǎng)站名稱：基于JSX的動態(tài)數(shù)據(jù)綁定
文章位置：http://www.dlmjj.cn/article/djiichs.html

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

新聞中心

其他資訊