一套程式碼小程式&Web&Native執行的探索（2）

發表於2018-09-29

接上文：一套程式碼小程式&Web&Native執行的探索01，本文都是一些探索性為目的的研究學習，在最終版輸出前，內中的內容可能會有點亂

參考：

https://github.com/fastCreator/MVVM

https://www.tangshuang.net/3756.html

https://www.cnblogs.com/kidney/p/8018226.html

經過之前的學習，發現Vue其實與小程式框架相識度比較高，業內也有mpvue這種還比較成熟的方案了，我們這邊依舊不著急去研究成熟的框架，現在看看自己能做到什麼程度，最近也真正的開始接觸了一些Vue的東西，裡面的程式碼真的非常不錯，研究學習了下Vue的結構，發現其實跟我們要的很類似，這裡想要嘗試初步的方案：提供Html模板->解析Html模板，其實這裡就是Vue裡面Parse部分的邏輯，一小部分程式碼，這樣有很多Vue的程式碼可以借鑑，也變相的學習Vue的原始碼，一舉兩得，於是我們速度開始今天的學習

首先，我們設定一個簡單的目標：設定一段簡單的小程式模板，當我們做完web版本後，他可以在小程式中執行

<view class="c-row search-line" data-flag="start" ontap="clickHandler">
  <view class="c-span9 js-start search-line-txt">
    {{name}}</view>
</view>

{{name}}</view>

</view>

Page({
  data: {
    name: 'hello world'
  },
  clickHandler: function () {
    this.setData({
      name: '葉小釵'
    })
  }
})

Page({

data: {

clickHandler: function () {

this.setData({

})

}

})

這裡第一個關鍵便是將html模板轉換為js程式碼，如果是之前我們直接會用這種程式碼：

_.template = function (text, data, settings) {
  var render;
  settings = _.defaults({}, settings, _.templateSettings);

  // Combine delimiters into one regular expression via alternation.
  var matcher = new RegExp([
    (settings.escape || noMatch).source,
    (settings.interpolate || noMatch).source,
    (settings.evaluate || noMatch).source
  ].join('|') + '|$', 'g');

  // Compile the template source, escaping string literals appropriately.
  var index = 0;
  var source = "__p+='";
  text.replace(matcher, function (match, escape, interpolate, evaluate, offset) {
    source += text.slice(index, offset)
      .replace(escaper, function (match) { return '\\' + escapes[match]; });

    if (escape) {
      source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
    }
    if (interpolate) {
      source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
    }
    if (evaluate) {
      source += "';\n" + evaluate + "\n__p+='";
    }
    index = offset + match.length;
    return match;
  });
  source += "';\n";

  // If a variable is not specified, place data values in local scope.
  if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';

  source = "var __t,__p='',__j=Array.prototype.join," +
    "print=function(){__p+=__j.call(arguments,'');};\n" +
    source + "return __p;\n";

  try {
    render = new Function(settings.variable || 'obj', '_', source);
  } catch (e) {
    e.source = source;
    throw e;
  }

  if (data) return render(data, _);
  var template = function (data) {
    return render.call(this, data, _);
  };

  // Provide the compiled function source as a convenience for precompilation.
  template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';

  return template;
};

// underscore裡面的程式碼

_.template = function (text, data, settings) {

var render;

settings = _.defaults({}, settings, _.templateSettings);

// Combine delimiters into one regular expression via alternation.

var matcher = new RegExp([

(settings.escape || noMatch).source,

(settings.interpolate || noMatch).source,

(settings.evaluate || noMatch).source

].join('|') + '|$', 'g');

// Compile the template source, escaping string literals appropriately.

var index = 0;

var source = "__p+='";

text.replace(matcher, function (match, escape, interpolate, evaluate, offset) {

source += text.slice(index, offset)

.replace(escaper, function (match) { return '\\' + escapes[match]; });

if (escape) {

source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";

}

if (interpolate) {

source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";

}

if (evaluate) {

source += "';\n" + evaluate + "\n__p+='";

}

index = offset + match.length;

return match;

});

source += "';\n";

// If a variable is not specified, place data values in local scope.

if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';

source = "var __t,__p='',__j=Array.prototype.join," +

"print=function(){__p+=__j.call(arguments,'');};\n" +

source + "return __p;\n";

try {

render = new Function(settings.variable || 'obj', '_', source);

} catch (e) {

e.source = source;

throw e;

}

if (data) return render(data, _);

var template = function (data) {

return render.call(this, data, _);

};

// Provide the compiled function source as a convenience for precompilation.

template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';

return template;

};

// underscore裡面的程式碼

將上述程式碼做字串處理成字串函式，然後將data傳入，重新渲染即可。然而技術在變化，在進步。試想我們一個頁面某個子節點文字發生了變化，全部重新渲染似乎不太划算，於是出現了虛擬DOM概念（React 導致其流行），他出現的意義就是之前我們使用jQuery操作10次dom的時候瀏覽器會操作10次，這裡render過程中導致的座標計算10次render tree的形成可能讓頁面變得越來越卡，而虛擬DOM能很好的解決這一切，所以這裡我們就需要將我們模板中的程式碼首先轉換為虛擬DOM，這裡涉及到了複雜的解析過程

PS：回到最初Server渲染時代，每次點選就會導致一次伺服器互動，並且重新渲染頁面

Virtual DOM

我們做的第一步就是將模板html字串轉換為js物件，這個程式碼都不要說去實現，光是想想就知道里面必定會有大量的正則，大量的細節要處理，但我們的目標是一套程式碼多端執行，完全沒（能力）必要在這種地方耗費時間，所以我們直接閱讀這段程式碼：https://johnresig.com/blog/pure-javascript-html-parser/，稍作更改後，便可以得到以下程式碼：

/*
 * Modified at https://github.com/blowsie/Pure-JavaScript-HTML5-Parser
 */

// Regular Expressions for parsing tags and attributes
let startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:@][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,
    endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/,
    attr = /([a-zA-Z_:@][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g

// Empty Elements - HTML 5
let empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr")

// Block Elements - HTML 5
let block = makeMap("a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video")

// Inline Elements - HTML 5
let inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var")

// Elements that you can, intentionally, leave open
// (and which close themselves)
let closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr")

// Attributes that have their values filled in disabled="disabled"
let fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected")

// Special Elements (can contain anything)
let special = makeMap("script,style")

function makeMap(str) {
    var obj = {}, items = str.split(",");
    for (var i = 0; i < items.length; i++)
        obj[items[i]] = true;
    return obj;
}

export default function HTMLParser(html, handler) {
    var index, chars, match, stack = [], last = html;
    stack.last = function () {
        return this[this.length - 1];
    };

    while (html) {
        chars = true;

        // Make sure we're not in a script or style element
        if (!stack.last() || !special[stack.last()]) {

            // Comment
            if (html.indexOf("<!--") == 0) {
                index = html.indexOf("-->");

                if (index >= 0) {
                    if (handler.comment)
                        handler.comment(html.substring(4, index));
                    html = html.substring(index + 3);
                    chars = false;
                }

                // end tag
            } else if (html.indexOf("</") == 0) {
                match = html.match(endTag);

                if (match) {
                    html = html.substring(match[0].length);
                    match[0].replace(endTag, parseEndTag);
                    chars = false;
                }

                // start tag
            } else if (html.indexOf("<") == 0) {
                match = html.match(startTag);

                if (match) {
                    html = html.substring(match[0].length);
                    match[0].replace(startTag, parseStartTag);
                    chars = false;
                }
            }

            if (chars) {
                index = html.indexOf("<");

                var text = index < 0 ? html : html.substring(0, index);
                html = index < 0 ? "" : html.substring(index);

                if (handler.chars)
                    handler.chars(text);
            }

        } else {
            html = html.replace(new RegExp("([\\s\\S]*?)<\/" + stack.last() + "[^>]*>"), function (all, text) {
                text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, "$1$2");
                if (handler.chars)
                    handler.chars(text);

                return "";
            });

            parseEndTag("", stack.last());
        }

        if (html == last)
            throw "Parse Error: " + html;
        last = html;
    }

    // Clean up any remaining tags
    parseEndTag();

    function parseStartTag(tag, tagName, rest, unary) {
        tagName = tagName.toLowerCase();

        if (block[tagName]) {
            while (stack.last() && inline[stack.last()]) {
                parseEndTag("", stack.last());
            }
        }

        if (closeSelf[tagName] && stack.last() == tagName) {
            parseEndTag("", tagName);
        }

        unary = empty[tagName] || !!unary;

        if (!unary)
            stack.push(tagName);

        if (handler.start) {
            var attrs = [];

            rest.replace(attr, function (match, name) {
                var value = arguments[2] ? arguments[2] :
                    arguments[3] ? arguments[3] :
                        arguments[4] ? arguments[4] :
                            fillAttrs[name] ? name : "";

                attrs.push({
                    name: name,
                    value: value,
                    escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //"
                });
            });

            if (handler.start)
                handler.start(tagName, attrs, unary);
        }
    }

    function parseEndTag(tag, tagName) {
        // If no tag name is provided, clean shop
        if (!tagName)
            var pos = 0;

        // Find the closest opened tag of the same type
        else
            for (var pos = stack.length - 1; pos >= 0; pos--)
                if (stack[pos] == tagName)
                    break;

        if (pos >= 0) {
            // Close all the open elements, up the stack
            for (var i = stack.length - 1; i >= pos; i--)
                if (handler.end)
                    handler.end(stack[i]);

            // Remove the open elements from the stack
            stack.length = pos;
        }
    }
};

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

* Modified at https://github.com/blowsie/Pure-JavaScript-HTML5-Parser

// Regular Expressions for parsing tags and attributes

let startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:@][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,

endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/,

attr = /([a-zA-Z_:@][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g

// Empty Elements - HTML 5

let empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr")

// Block Elements - HTML 5

let block = makeMap("a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video")

// Inline Elements - HTML 5

let inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var")

// Elements that you can, intentionally, leave open

// (and which close themselves)

let closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr")

// Attributes that have their values filled in disabled="disabled"

let fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected")

// Special Elements (can contain anything)

let special = makeMap("script,style")

function makeMap(str) {

var obj = {}, items = str.split(",");

for (var i = 0; i < items.length; i++)

obj[items[i]] = true;

return obj;

}

export default function HTMLParser(html, handler) {

var index, chars, match, stack = [], last = html;

stack.last = function () {

return this[this.length - 1];

};

while (html) {

chars = true;

// Make sure we're not in a script or style element

if (!stack.last() || !special[stack.last()]) {

// Comment

if (html.indexOf("<!--") == 0) {

index = html.indexOf("-->");

if (index >= 0) {

if (handler.comment)

handler.comment(html.substring(4, index));

html = html.substring(index + 3);

chars = false;

}

// end tag

} else if (html.indexOf("</") == 0) {

match = html.match(endTag);

if (match) {

html = html.substring(match[0].length);

match[0].replace(endTag, parseEndTag);

chars = false;

}

// start tag

} else if (html.indexOf("<") == 0) {

match = html.match(startTag);

if (match) {

html = html.substring(match[0].length);

match[0].replace(startTag, parseStartTag);

chars = false;

}

if (chars) {

index = html.indexOf("<");

var text = index < 0 ? html : html.substring(0, index);

html = index < 0 ? "" : html.substring(index);

if (handler.chars)

handler.chars(text);

}

} else {

html = html.replace(new RegExp("([\\s\\S]*?)<\/" + stack.last() + "[^>]*>"), function (all, text) {

text = text.replace(/|<!\[CDATA\[([\s\S]*?)]]>/g, "$1$2");

if (handler.chars)

handler.chars(text);

return "";

});

parseEndTag("", stack.last());

}

if (html == last)

throw "Parse Error: " + html;

last = html;

}

// Clean up any remaining tags

parseEndTag();

function parseStartTag(tag, tagName, rest, unary) {

tagName = tagName.toLowerCase();

if (block[tagName]) {

while (stack.last() && inline[stack.last()]) {

parseEndTag("", stack.last());

}

if (closeSelf[tagName] && stack.last() == tagName) {

parseEndTag("", tagName);

}

unary = empty[tagName] || !!unary;

if (!unary)

stack.push(tagName);

if (handler.start) {

var attrs = [];

rest.replace(attr, function (match, name) {

var value = arguments[2] ? arguments[2] :

arguments[3] ? arguments[3] :

arguments[4] ? arguments[4] :

fillAttrs[name] ? name : "";

attrs.push({

value: value,

escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //"

});

if (handler.start)

handler.start(tagName, attrs, unary);

}

function parseEndTag(tag, tagName) {

// If no tag name is provided, clean shop

if (!tagName)

var pos = 0;

// Find the closest opened tag of the same type

else

for (var pos = stack.length - 1; pos >= 0; pos--)

if (stack[pos] == tagName)

break;

if (pos >= 0) {

// Close all the open elements, up the stack

for (var i = stack.length - 1; i >= pos; i--)

if (handler.end)

handler.end(stack[i]);

// Remove the open elements from the stack

stack.length = pos;

}

};

這是一段非常牛逼的程式碼，要寫出這種程式碼需要花很多功夫，繞過很多細節，自己寫很難還未必寫得好，所以拿來用就好，不必愧疚……，但是我們需要知道這段程式碼幹了什麼：

他會遍歷我們的字串模板，解析後會有四個回撥可供使用：start、end、chars、comment，我們要做的就是填充裡面的事件，完成我們將HTML轉換為js物件的工作：

<!doctype html>
<html>
<head>
  <title>起步</title>
</head>
<body>

<script type="module">

  import HTMLParser from './src/core/parser/html-parser.js'

  let html = `
<div class="c-row search-line" data-flag="start" ontap="clickHandler">
  <div class="c-span9 js-start search-line-txt">
    {{name}}</div>
</div>
  `

  function arrToObj(arr) {
    let map = {};
    for(let i = 0, l = arr.length; i <  l; i++) {
      map[arr[i].name] = arr[i].value
    }
    return map;
  }

  //儲存所有節點
  let nodes = [];

  //記錄當前節點位置,方便定位parent節點
  let stack = [];

  HTMLParser(html, {
    /*
     unary: 是不是自閉和標籤比如 <br/> input
     attrs為屬性的陣列
    */
    start: function( tag, attrs, unary ) { //標籤開始
      /*
       stack記錄的父節點,如果節點長度大於1,一定具有父節點
       */
      let parent = stack.length ? stack[stack.length - 1] : null;

      //最終形成的node物件
      let node = {
        //1標籤, 2需要解析的表示式, 3 純文字
        type: 1,
        tag: tag,
        attrs: arrToObj(attrs),
        parent: parent,
        //關鍵屬性
        children: [],
        text: null
      };

      //如果存在父節點,也標誌下這個屬於其子節點
      if(parent) {
        parent.children.push(node);
      }
      //還需要處理<br/> <input>這種非閉合標籤
      //...

      //進入節點堆疊,當遇到彈出標籤時候彈出
      stack.push(node)
      nodes.push(node);

      debugger;
    },
    end: function( tag ) { //標籤結束
      //彈出當前子節點,根節點一定是最後彈出去的,兄弟節點之間會按順序彈出,其父節點在最後一個子節點彈出後會被彈出
      stack.pop();
      debugger;
    },
    chars: function( text ) { //文字
      //如果是空格之類的不予處理
      if(text.trim() === '') return;
      let node = nodes[nodes.length - 1];
      //如果這裡是表示式{{}}需要特殊處理
      if(node) node.text = text.trim()
      debugger;
    }
  });

  console.log(nodes)

</script>

</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

import HTMLParser from './src/core/parser/html-parser.js'

let html = `

{{name}}</div>

</div>

function arrToObj(arr) {

let map = {};

for(let i = 0, l = arr.length; i < l; i++) {

map[arr[i].name] = arr[i].value

}

return map;

}

//儲存所有節點

let nodes = [];

//記錄當前節點位置,方便定位parent節點

let stack = [];

HTMLParser(html, {

unary: 是不是自閉和標籤比如 <br/> input

attrs為屬性的陣列

start: function( tag, attrs, unary ) { //標籤開始

stack記錄的父節點,如果節點長度大於1,一定具有父節點

let parent = stack.length ? stack[stack.length - 1] : null;

//最終形成的node物件

let node = {

//1標籤, 2需要解析的表示式, 3 純文字

type: 1,

tag: tag,

attrs: arrToObj(attrs),

parent: parent,

//關鍵屬性

children: [],

text: null

};

//如果存在父節點,也標誌下這個屬於其子節點

if(parent) {

parent.children.push(node);

}

//還需要處理<br/> <input>這種非閉合標籤

//...

//進入節點堆疊,當遇到彈出標籤時候彈出

stack.push(node)

nodes.push(node);

debugger;

end: function( tag ) { //標籤結束

//彈出當前子節點,根節點一定是最後彈出去的,兄弟節點之間會按順序彈出,其父節點在最後一個子節點彈出後會被彈出

stack.pop();

debugger;

chars: function( text ) { //文字

//如果是空格之類的不予處理

if(text.trim() === '') return;

let node = nodes[nodes.length - 1];

//如果這裡是表示式{{}}需要特殊處理

if(node) node.text = text.trim()

debugger;

}

});

console.log(nodes)

</script>

</body>

</html>

這裡輸出了我們想要的結構：

第一個節點便是跟節點，我們可以根據他遍歷整個節點，我們也可以根據陣列（裡面有對應的parent關係）生成我們想要的結構，可以看出藉助強大的第三方工具庫可以讓我們的工作變得更加高效以及不容易出錯，如果我們自己寫上述HTMLParser會比較困難的，什麼時候需要自己寫什麼時候需要藉助，就要看你要做那個事情有沒有現成確實可用的工具庫了，第二步我們嘗試下將這些模板標籤，與data結合轉換為真正的HTML結構

簡單的Virtual DOM TO HTML

這裡需要data加入了，我們簡單實現一個MVVM的類，並且將上述Parser做成一個方法：

<!doctype html>
<html>
<head>
  <title>起步</title>
</head>
<body>

<div id="app">

</div>

<script type="module">

  import HTMLParser from './src/core/parser/html-parser.js'

  let html = `
<div class="c-row search-line" data-flag="start" ontap="clickHandler">
  <div class="c-span9 js-start search-line-txt">
    {{name}}</div>
    <input type="text">
     <br>
</div>
  `

  function arrToObj(arr) {
    let map = {};
    for(let i = 0, l = arr.length; i <  l; i++) {
      map[arr[i].name] = arr[i].value
    }
    return map;
  }

  function htmlParser(html) {

    //儲存所有節點
    let nodes = [];

    //記錄當前節點位置,方便定位parent節點
    let stack = [];

    HTMLParser(html, {
      /*
       unary: 是不是自閉和標籤比如 <br/> input
       attrs為屬性的陣列
       */
      start: function( tag, attrs, unary ) { //標籤開始
        /*
         stack記錄的父節點,如果節點長度大於1,一定具有父節點
         */
        let parent = stack.length ? stack[stack.length - 1] : null;

        //最終形成的node物件
        let node = {
          //1標籤, 2需要解析的表示式, 3 純文字
          type: 1,
          tag: tag,
          attrs: arrToObj(attrs),
          parent: parent,
          //關鍵屬性
          children: []
        };

        //如果存在父節點,也標誌下這個屬於其子節點
        if(parent) {
          parent.children.push(node);
        }
        //還需要處理<br/> <input>這種非閉合標籤
        //...

        //進入節點堆疊,當遇到彈出標籤時候彈出
        stack.push(node)
        nodes.push(node);

//      debugger;
      },
      end: function( tag ) { //標籤結束
        //彈出當前子節點,根節點一定是最後彈出去的,兄弟節點之間會按順序彈出,其父節點在最後一個子節點彈出後會被彈出
        stack.pop();

//      debugger;
      },
      chars: function( text ) { //文字
        //如果是空格之類的不予處理
        if(text.trim() === '') return;
        text = text.trim();

        //匹配 {{}} 拿出表示式
        let reg = /\{\{(.*)\}\}/;
        let node = nodes[nodes.length - 1];
        //如果這裡是表示式{{}}需要特殊處理
        if(!node) return;

        if(reg.test(text)) {
          node.children.push({
            type: 2,
            expression: RegExp.$1,
            text: text
          });
        } else {
          node.children.push({
            type: 3,
            text: text
          });
        }
//      debugger;
      }
    });

    return nodes;

  }

  class MVVM {
    /*
    暫時要求必須傳入data以及el,其他事件什麼的不管

    */
    constructor(opts) {

      //要求必須存在,這裡不做引數校驗了
      this.$el = typeof opts.el === 'string' ? document.getElementById(opts.el) : opts.el;

      //data必須存在,其他不做要求
      this.$data = opts.data;

      //模板必須存在
      this.$template = opts.template;

      //存放解析結束的虛擬dom
      this.$nodes = [];

      //將模板解析後,轉換為一個函式
      this.$initRender();

      //渲染之
      this.$render();
debugger;
    }

    $initRender() {
      let template = this.$template;
      let nodes = htmlParser(template);
      this.$nodes = nodes;
    }

    //解析模板生成的函式,將最總html結構渲染出來
    $render() {

      let data = this.$data;
      let root = this.$nodes[0];
      let parent = this._createEl(root);
      //簡單遍歷即可

      this._render(parent, root.children);

      this.$el.appendChild(parent);
    }

    _createEl(node) {
      let data = this.$data;

      let el = document.createElement(node.tag || 'span');

      for (let key in node.attrs) {
        el.setAttribute(key, node.attrs[key])
      }

      if(node.type === 2) {
        el.innerText = data[node.expression];
      } else if(node.type === 3) {
        el.innerText = node.text;
      }

      return el;
    }
    _render(parent, children) {
      let child = null;
      for(let i = 0, len = children.length; i < len; i++) {
        child = this._createEl(children[i]);
        parent.append(child);
        if(children[i].children) this._render(child, children[i].children);
      }
    }


  }


  let vm = new MVVM({
    el: 'app',
    template: html,
    data: {
      name: '葉小釵'
    }
  })




</script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

<!doctype html>

<html>

<head>

</head>

<body>

</div>

import HTMLParser from './src/core/parser/html-parser.js'

let html = `

{{name}}</div>

<br>

</div>

function arrToObj(arr) {

let map = {};

for(let i = 0, l = arr.length; i < l; i++) {

map[arr[i].name] = arr[i].value

}

return map;

}

function htmlParser(html) {

//儲存所有節點

let nodes = [];

//記錄當前節點位置,方便定位parent節點

let stack = [];

HTMLParser(html, {

unary: 是不是自閉和標籤比如 <br/> input

attrs為屬性的陣列

start: function( tag, attrs, unary ) { //標籤開始

stack記錄的父節點,如果節點長度大於1,一定具有父節點

let parent = stack.length ? stack[stack.length - 1] : null;

//最終形成的node物件

let node = {

//1標籤, 2需要解析的表示式, 3 純文字

type: 1,

tag: tag,

attrs: arrToObj(attrs),

parent: parent,

//關鍵屬性

children: []

};

//如果存在父節點,也標誌下這個屬於其子節點

if(parent) {

parent.children.push(node);

}

//還需要處理<br/> <input>這種非閉合標籤

//...

//進入節點堆疊,當遇到彈出標籤時候彈出

stack.push(node)

nodes.push(node);

// debugger;

end: function( tag ) { //標籤結束

//彈出當前子節點,根節點一定是最後彈出去的,兄弟節點之間會按順序彈出,其父節點在最後一個子節點彈出後會被彈出

stack.pop();

// debugger;

chars: function( text ) { //文字

//如果是空格之類的不予處理

if(text.trim() === '') return;

text = text.trim();

//匹配 {{}} 拿出表示式

let reg = /\{\{(.*)\}\}/;

let node = nodes[nodes.length - 1];

//如果這裡是表示式{{}}需要特殊處理

if(!node) return;

if(reg.test(text)) {

node.children.push({

type: 2,

expression: RegExp.$1,

text: text

});

} else {

node.children.push({

type: 3,

text: text

});

}

// debugger;

}

});

return nodes;

}

class MVVM {

暫時要求必須傳入data以及el,其他事件什麼的不管

constructor(opts) {

//要求必須存在,這裡不做引數校驗了

this.$el = typeof opts.el === 'string' ? document.getElementById(opts.el) : opts.el;

//data必須存在,其他不做要求

this.$data = opts.data;

//模板必須存在

this.$template = opts.template;

//存放解析結束的虛擬dom

this.$nodes = [];

//將模板解析後,轉換為一個函式

this.$initRender();

//渲染之

this.$render();

debugger;

}

$initRender() {

let template = this.$template;

let nodes = htmlParser(template);

this.$nodes = nodes;

}

//解析模板生成的函式,將最總html結構渲染出來

$render() {

let data = this.$data;

let root = this.$nodes[0];

let parent = this._createEl(root);

//簡單遍歷即可

this._render(parent, root.children);

this.$el.appendChild(parent);

}

_createEl(node) {

let data = this.$data;

let el = document.createElement(node.tag || 'span');

for (let key in node.attrs) {

el.setAttribute(key, node.attrs[key])

}

if(node.type === 2) {

el.innerText = data[node.expression];

} else if(node.type === 3) {

el.innerText = node.text;

}

return el;

}

_render(parent, children) {

let child = null;

for(let i = 0, len = children.length; i < len; i++) {

child = this._createEl(children[i]);

parent.append(child);

if(children[i].children) this._render(child, children[i].children);

}

let vm = new MVVM({

el: 'app',

data: {

}

})

</script>

</body>

</html>

<div class="c-row search-line" data-flag="start" ontap="clickHandler">
    <div class="c-span9 js-start search-line-txt">
    <span>葉小釵</span></div>
    <input type="text">
</div>

</div>

這個程式碼非常簡陋，只是對text部分做了處理，沒有對屬性，style等做處理，但是越是功能簡單的程式碼理解起來越容易，後續的style以及屬性大同小異，我們這裡開始處理，介於篇幅，下次繼續。

有關程式碼執行效率提升的小例子
2020-03-27
jexl2 執行字串Java程式碼
2018-09-05
字串Java
程式碼執行
2020-10-20
多重影分身：一套程式碼如何生成多個小程式？
2019-03-14
多執行緒程式是如何執行程式碼的？
2023-10-27
執行緒行程
如何用一套程式碼執行跨多作業系統應用
2023-02-08
作業系統
PyQt5(2)、垃圾分類小程式(2)——初代視窗程式可執行檔案
2020-04-04
QT
JavaScript的程式碼執行機制
2019-09-16
JavaScript
程式碼是怎麼執行的？
2021-11-15
oracle執行java程式碼
2019-04-23
OracleJava
Python 計算程式執行多久程式碼
2018-12-23
Python
微信小程式的執行緒架構
2019-05-14
微信小程式執行緒架構
淺談小程式執行機制
2019-05-10
2B 領域下的低程式碼探索之路
2021-08-12
Spark閉包 | driver & executor程式程式碼執行
2020-11-23
Spark
提高程式碼的執行效率（1）
2020-04-04
微信小程式開發01-小程式的執行流程是怎麼樣的？
2018-07-30
微信小程式
桌面端執行小程式的簡易實操
2022-11-14
理解微信小程式的雙執行緒模型
2021-05-17
微信小程式執行緒模型
程式-程式-執行緒
2018-03-20
執行緒
PHP獲取小程式openid，10行程式碼快速獲取小程式openid
2021-09-09
PHP行程
微信小程式：小程式碼、小程式二維碼、普通二維碼
2018-04-27
微信小程式
執行緒池的實現程式碼分析
2024-06-09
執行緒
利用 Python 特性在 Jinja2 模板中執行任意程式碼
2020-08-19
Python
如何用iPad執行Python程式碼？
2018-06-27
iPadPython
程式碼精簡執行過程
2024-03-13
ThinkPHP遠端程式碼執行漏洞
2019-09-12
PHP
phpunit 遠端程式碼執行漏洞
2020-10-16
PHP
Facades 原理 (程式碼執行流程分析)
2019-01-05
動態執行c#程式碼
2024-11-15
C#
用GPU來執行Python程式碼
2023-02-06
GPUPython
宣告式UI框架在類小程式執行的原理
2019-11-13
UI框架
不用程式碼，2小時搞定自己的網站
2024-11-06
網站
Java普通程式碼塊，構造程式碼塊，靜態程式碼塊區別，執行順序的程式碼例項
2018-03-07
Java
GraalVM 21.0提供執行Java程式碼的第三種方式：Espresso通過Truffle框架執行Java程式碼 - graalvm
2021-01-21
LVMJavaEspresso框架
小程式框架執行時效能大測評
2020-04-03
框架
微信小程式掃碼解析小程式碼
2020-08-13
微信小程式
GO程式碼生成程式碼小思小試
2019-07-05
Go

一套程式碼小程式&Web&Native執行的探索（2）

相關文章