一套代碼小程序&Web&Native運行的探索02

本文轉載自查看原文 2018-09-24 16:17 743 大前端/ 移動開發/ 設計模式

接上文：一套代碼小程序&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>

 1 Page({
 2   data: {
 3     name: 'hello world'
 4   },
 5   clickHandler: function () {
 6     this.setData({
 7       name: '葉小釵'
 8     })
 9   }
10 })

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

 1 _.template = function (text, data, settings) {
 2   var render;
 3   settings = _.defaults({}, settings, _.templateSettings);
 4 
 5   // Combine delimiters into one regular expression via alternation.
 6   var matcher = new RegExp([
 7     (settings.escape || noMatch).source,
 8     (settings.interpolate || noMatch).source,
 9     (settings.evaluate || noMatch).source
10   ].join('|') + '|$', 'g');
11 
12   // Compile the template source, escaping string literals appropriately.
13   var index = 0;
14   var source = "__p+='";
15   text.replace(matcher, function (match, escape, interpolate, evaluate, offset) {
16     source += text.slice(index, offset)
17       .replace(escaper, function (match) { return '\\' + escapes[match]; });
18 
19     if (escape) {
20       source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
21     }
22     if (interpolate) {
23       source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
24     }
25     if (evaluate) {
26       source += "';\n" + evaluate + "\n__p+='";
27     }
28     index = offset + match.length;
29     return match;
30   });
31   source += "';\n";
32 
33   // If a variable is not specified, place data values in local scope.
34   if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
35 
36   source = "var __t,__p='',__j=Array.prototype.join," +
37     "print=function(){__p+=__j.call(arguments,'');};\n" +
38     source + "return __p;\n";
39 
40   try {
41     render = new Function(settings.variable || 'obj', '_', source);
42   } catch (e) {
43     e.source = source;
44     throw e;
45   }
46 
47   if (data) return render(data, _);
48   var template = function (data) {
49     return render.call(this, data, _);
50   };
51 
52   // Provide the compiled function source as a convenience for precompilation.
53   template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
54 
55   return template;
56 };

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/，稍作更改后，便可以得到以下代碼：

  1 /*
  2  * Modified at https://github.com/blowsie/Pure-JavaScript-HTML5-Parser
  3  */
  4 
  5 // Regular Expressions for parsing tags and attributes
  6 let startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:@][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,
  7     endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/,
  8     attr = /([a-zA-Z_:@][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g
  9 
 10 // Empty Elements - HTML 5
 11 let empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr")
 12 
 13 // Block Elements - HTML 5
 14 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")
 15 
 16 // Inline Elements - HTML 5
 17 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")
 18 
 19 // Elements that you can, intentionally, leave open
 20 // (and which close themselves)
 21 let closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr")
 22 
 23 // Attributes that have their values filled in disabled="disabled"
 24 let fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected")
 25 
 26 // Special Elements (can contain anything)
 27 let special = makeMap("script,style")
 28 
 29 function makeMap(str) {
 30     var obj = {}, items = str.split(",");
 31     for (var i = 0; i < items.length; i++)
 32         obj[items[i]] = true;
 33     return obj;
 34 }
 35 
 36 export default function HTMLParser(html, handler) {
 37     var index, chars, match, stack = [], last = html;
 38     stack.last = function () {
 39         return this[this.length - 1];
 40     };
 41 
 42     while (html) {
 43         chars = true;
 44 
 45         // Make sure we're not in a script or style element
 46         if (!stack.last() || !special[stack.last()]) {
 47 
 48             // Comment
 49             if (html.indexOf("<!--") == 0) {
 50                 index = html.indexOf("-->");
 51 
 52                 if (index >= 0) {
 53                     if (handler.comment)
 54                         handler.comment(html.substring(4, index));
 55                     html = html.substring(index + 3);
 56                     chars = false;
 57                 }
 58 
 59                 // end tag
 60             } else if (html.indexOf("</") == 0) {
 61                 match = html.match(endTag);
 62 
 63                 if (match) {
 64                     html = html.substring(match[0].length);
 65                     match[0].replace(endTag, parseEndTag);
 66                     chars = false;
 67                 }
 68 
 69                 // start tag
 70             } else if (html.indexOf("<") == 0) {
 71                 match = html.match(startTag);
 72 
 73                 if (match) {
 74                     html = html.substring(match[0].length);
 75                     match[0].replace(startTag, parseStartTag);
 76                     chars = false;
 77                 }
 78             }
 79 
 80             if (chars) {
 81                 index = html.indexOf("<");
 82 
 83                 var text = index < 0 ? html : html.substring(0, index);
 84                 html = index < 0 ? "" : html.substring(index);
 85 
 86                 if (handler.chars)
 87                     handler.chars(text);
 88             }
 89 
 90         } else {
 91             html = html.replace(new RegExp("([\\s\\S]*?)<\/" + stack.last() + "[^>]*>"), function (all, text) {
 92                 text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, "$1$2");
 93                 if (handler.chars)
 94                     handler.chars(text);
 95 
 96                 return "";
 97             });
 98 
 99             parseEndTag("", stack.last());
100         }
101 
102         if (html == last)
103             throw "Parse Error: " + html;
104         last = html;
105     }
106 
107     // Clean up any remaining tags
108     parseEndTag();
109 
110     function parseStartTag(tag, tagName, rest, unary) {
111         tagName = tagName.toLowerCase();
112 
113         if (block[tagName]) {
114             while (stack.last() && inline[stack.last()]) {
115                 parseEndTag("", stack.last());
116             }
117         }
118 
119         if (closeSelf[tagName] && stack.last() == tagName) {
120             parseEndTag("", tagName);
121         }
122 
123         unary = empty[tagName] || !!unary;
124 
125         if (!unary)
126             stack.push(tagName);
127 
128         if (handler.start) {
129             var attrs = [];
130 
131             rest.replace(attr, function (match, name) {
132                 var value = arguments[2] ? arguments[2] :
133                     arguments[3] ? arguments[3] :
134                         arguments[4] ? arguments[4] :
135                             fillAttrs[name] ? name : "";
136 
137                 attrs.push({
138                     name: name,
139                     value: value,
140                     escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //"
141                 });
142             });
143 
144             if (handler.start)
145                 handler.start(tagName, attrs, unary);
146         }
147     }
148 
149     function parseEndTag(tag, tagName) {
150         // If no tag name is provided, clean shop
151         if (!tagName)
152             var pos = 0;
153 
154         // Find the closest opened tag of the same type
155         else
156             for (var pos = stack.length - 1; pos >= 0; pos--)
157                 if (stack[pos] == tagName)
158                     break;
159 
160         if (pos >= 0) {
161             // Close all the open elements, up the stack
162             for (var i = stack.length - 1; i >= pos; i--)
163                 if (handler.end)
164                     handler.end(stack[i]);
165 
166             // Remove the open elements from the stack
167             stack.length = pos;
168         }
169     }
170 };

View Code

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

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

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <title>起步</title>
 5 </head>
 6 <body>
 7 
 8 <script type="module">
 9 
10   import HTMLParser from './src/core/parser/html-parser.js'
11 
12   let html = `
13 <div class="c-row search-line" data-flag="start" ontap="clickHandler">
14   <div class="c-span9 js-start search-line-txt">
15     {{name}}</div>
16 </div>
17   `
18 
19   function arrToObj(arr) {
20     let map = {};
21     for(let i = 0, l = arr.length; i <  l; i++) {
22       map[arr[i].name] = arr[i].value
23     }
24     return map;
25   }
26 
27   //存儲所有節點
28   let nodes = [];
29 
30   //記錄當前節點位置,方便定位parent節點
31   let stack = [];
32 
33   HTMLParser(html, {
34     /*
35      unary: 是不是自閉和標簽比如 <br/> input
36      attrs為屬性的數組
37     */
38     start: function( tag, attrs, unary ) { //標簽開始
39       /*
40        stack記錄的父節點,如果節點長度大於1,一定具有父節點
41        */
42       let parent = stack.length ? stack[stack.length - 1] : null;
43 
44       //最終形成的node對象
45       let node = {
46         //1標簽, 2需要解析的表達式, 3 純文本
47         type: 1,
48         tag: tag,
49         attrs: arrToObj(attrs),
50         parent: parent,
51         //關鍵屬性
52         children: [],
53         text: null
54       };
55 
56       //如果存在父節點,也標志下這個屬於其子節點
57       if(parent) {
58         parent.children.push(node);
59       }
60       //還需要處理<br/> <input>這種非閉合標簽
61       //...
62 
63       //進入節點堆棧,當遇到彈出標簽時候彈出
64       stack.push(node)
65       nodes.push(node);
66 
67       debugger;
68     },
69     end: function( tag ) { //標簽結束
70       //彈出當前子節點,根節點一定是最后彈出去的,兄弟節點之間會按順序彈出,其父節點在最后一個子節點彈出后會被彈出
71       stack.pop();
72       debugger;
73     },
74     chars: function( text ) { //文本
75       //如果是空格之類的不予處理
76       if(text.trim() === '') return;
77       let node = nodes[nodes.length - 1];
78       //如果這里是表達式{{}}需要特殊處理
79       if(node) node.text = text.trim()
80       debugger;
81     }
82   });
83 
84   console.log(nodes)
85 
86 </script>
87 
88 </body>
89 </html>

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

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

簡單的Virtual DOM TO HTML

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

  1 <!doctype html>
  2 <html>
  3 <head>
  4   <title>起步</title>
  5 </head>
  6 <body>
  7 
  8 <div id="app">
  9 
 10 </div>
 11 
 12 <script type="module">
 13 
 14   import HTMLParser from './src/core/parser/html-parser.js'
 15 
 16   let html = `
 17 <div class="c-row search-line" data-flag="start" ontap="clickHandler">
 18   <div class="c-span9 js-start search-line-txt">
 19     {{name}}</div>
 20     <input type="text">
 21      <br>
 22 </div>
 23   `
 24 
 25   function arrToObj(arr) {
 26     let map = {};
 27     for(let i = 0, l = arr.length; i <  l; i++) {
 28       map[arr[i].name] = arr[i].value
 29     }
 30     return map;
 31   }
 32 
 33   function htmlParser(html) {
 34 
 35     //存儲所有節點
 36     let nodes = [];
 37 
 38     //記錄當前節點位置,方便定位parent節點
 39     let stack = [];
 40 
 41     HTMLParser(html, {
 42       /*
 43        unary: 是不是自閉和標簽比如 <br/> input
 44        attrs為屬性的數組
 45        */
 46       start: function( tag, attrs, unary ) { //標簽開始
 47         /*
 48          stack記錄的父節點,如果節點長度大於1,一定具有父節點
 49          */
 50         let parent = stack.length ? stack[stack.length - 1] : null;
 51 
 52         //最終形成的node對象
 53         let node = {
 54           //1標簽, 2需要解析的表達式, 3 純文本
 55           type: 1,
 56           tag: tag,
 57           attrs: arrToObj(attrs),
 58           parent: parent,
 59           //關鍵屬性
 60           children: []
 61         };
 62 
 63         //如果存在父節點,也標志下這個屬於其子節點
 64         if(parent) {
 65           parent.children.push(node);
 66         }
 67         //還需要處理<br/> <input>這種非閉合標簽
 68         //...
 69 
 70         //進入節點堆棧,當遇到彈出標簽時候彈出
 71         stack.push(node)
 72         nodes.push(node);
 73 
 74 //      debugger;
 75       },
 76       end: function( tag ) { //標簽結束
 77         //彈出當前子節點,根節點一定是最后彈出去的,兄弟節點之間會按順序彈出,其父節點在最后一個子節點彈出后會被彈出
 78         stack.pop();
 79 
 80 //      debugger;
 81       },
 82       chars: function( text ) { //文本
 83         //如果是空格之類的不予處理
 84         if(text.trim() === '') return;
 85         text = text.trim();
 86 
 87         //匹配 {{}} 拿出表達式
 88         let reg = /\{\{(.*)\}\}/;
 89         let node = nodes[nodes.length - 1];
 90         //如果這里是表達式{{}}需要特殊處理
 91         if(!node) return;
 92 
 93         if(reg.test(text)) {
 94           node.children.push({
 95             type: 2,
 96             expression: RegExp.$1,
 97             text: text
 98           });
 99         } else {
100           node.children.push({
101             type: 3,
102             text: text
103           });
104         }
105 //      debugger;
106       }
107     });
108 
109     return nodes;
110 
111   }
112 
113   class MVVM {
114     /*
115     暫時要求必須傳入data以及el,其他事件什么的不管
116 
117     */
118     constructor(opts) {
119 
120       //要求必須存在,這里不做參數校驗了
121       this.$el = typeof opts.el === 'string' ? document.getElementById(opts.el) : opts.el;
122 
123       //data必須存在,其他不做要求
124       this.$data = opts.data;
125 
126       //模板必須存在
127       this.$template = opts.template;
128 
129       //存放解析結束的虛擬dom
130       this.$nodes = [];
131 
132       //將模板解析后,轉換為一個函數
133       this.$initRender();
134 
135       //渲染之
136       this.$render();
137 debugger;
138     }
139 
140     $initRender() {
141       let template = this.$template;
142       let nodes = htmlParser(template);
143       this.$nodes = nodes;
144     }
145 
146     //解析模板生成的函數,將最總html結構渲染出來
147     $render() {
148 
149       let data = this.$data;
150       let root = this.$nodes[0];
151       let parent = this._createEl(root);
152       //簡單遍歷即可
153 
154       this._render(parent, root.children);
155 
156       this.$el.appendChild(parent);
157     }
158 
159     _createEl(node) {
160       let data = this.$data;
161 
162       let el = document.createElement(node.tag || 'span');
163 
164       for (let key in node.attrs) {
165         el.setAttribute(key, node.attrs[key])
166       }
167 
168       if(node.type === 2) {
169         el.innerText = data[node.expression];
170       } else if(node.type === 3) {
171         el.innerText = node.text;
172       }
173 
174       return el;
175     }
176     _render(parent, children) {
177       let child = null;
178       for(let i = 0, len = children.length; i < len; i++) {
179         child = this._createEl(children[i]);
180         parent.append(child);
181         if(children[i].children) this._render(child, children[i].children);
182       }
183     }
184 
185 
186   }
187 
188 
189   let vm = new MVVM({
190     el: 'app',
191     template: html,
192     data: {
193       name: '葉小釵'
194     }
195   })
196 
197 
198 
199 
200 </script>
201 
202 </body>
203 </html>

View Code

1 <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>

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 一套代碼小程序&Web&Native運行的探索04——數據更新【一套代碼小程序&Native&Web階段總結篇】可以這樣閱讀Vue源碼 uni-app 開發一套代碼實現公眾號和小程序總結如何快速開發一套微信商城小程序？基於vue element-ui整理了一套Web后台的基礎架構代碼微信小程序強力推薦整合的一套UI庫 vue 一套代碼支持多個項目探索小程序實現一套 Web 自動曝光埋點技術方案(轉) pm2同一套代碼啟動兩個不同的進程