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

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

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

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

12345678910

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

這裡第一個關鍵便是將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裡面的程式碼

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758

_.template=function(text,data,settings){varrender;settings=_.defaults({},settings,_.templateSettings);// Combine delimiters into one regular expression via alternation.varmatcher=newRegExp([(settings.escape||noMatch).source,(settings.interpolate||noMatch).source,(settings.evaluate||noMatch).source].join('|')+'|$','g');// Compile the template source, escaping string literals appropriately.varindex=0;varsource="__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;returnmatch;});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=newFunction(settings.variable||'obj','_',source);}catch(e){e.source=source;throwe;}if(data)returnrender(data,_);vartemplate=function(data){returnrender.call(this,data,_);};// Provide the compiled function source as a convenience for precompilation.template.source='function('+(settings.variable||'obj')+'){\n'+source+'}';returntemplate;};// 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;
        }
    }
};

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170

/* * Modified at https://github.com/blowsie/Pure-JavaScript-HTML5-Parser */// Regular Expressions for parsing tags and attributeslet 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 5let empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr")// Block Elements - HTML 5let 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 5let 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 notinascript orstyle elementif(!stack.last()||!special[stack.last()]){// Commentif(html.indexOf("");if(index>=0){

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

一套程式碼小程式&Web&Native執行的探索02

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

一套程式碼小程式&Web&Native執行的探索03

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

一套程式碼小程式&Web&Native執行的探索04——資料更新

一套程式碼小程式&Web&Native執行的探索05——snabbdom

一套程式碼小程式&Web&Native執行的探索07——mpvue簡單調研

【一套程式碼小程式&Native&Web階段總結篇】可以這樣閱讀Vue原始碼

十一課堂|通過小遊戲學習Ethereum DApps程式設計（2）

.NET Core 小程式開發零基礎系列（2）——小程式服務通知（模板訊息）

web服務程式設計探索（2）——外掛模型

一套程式碼 iOS、Android 兩端執行，Google Flutter 對開發者意味著什麼？

java web程式啟動自動執行方法（spring）

小程式picker---級聯效果（三級）

十一課堂|通過小遊戲學習Ethereum DApps程式設計（1）

十一課堂|通過小遊戲學習Ethereum DApps程式設計（3）

十一課堂|通過小遊戲學習Ethereum DApps程式設計（5）

小程式學習之路--UI（1）

小程式---清除系統盤垃圾（BAT）

python高階（二）——多工（一）執行緒（2）多執行緒UDP聊天器

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

相關推薦