一套代码小程序&Web&Native运行的探索02

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

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 += "'+
((__t=(" + escape + "))==null?'':_.escape(__t))+
'";
    }
    if (interpolate) {
      source += "'+
((__t=(" + interpolate + "))==null?'':__t)+
'";
    }
    if (evaluate) {
      source += "';
" + evaluate + "
__p+='";
    }
    index = offset + match.length;
    return match;
  });
  source += "';
";

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

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

  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') + '){
' + source + '}';

  return template;
};

将上述代码做字符串处理成字符串函数，然后将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(/<!--([sS]*?)-->|<![CDATA[([sS]*?)]]>/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;
        }
    }
};

这是一段非常牛逼的代码，要写出这种代码需要花很多功夫，绕过很多细节，自己写很难还未必写得好，所以拿来用就好，不必愧疚......，但是我们需要知道这段代码干了什么：

他会遍历我们的字符串模板，解析后会有四个回调可供使用：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>

这里输出了我们想要的结构：

第一个节点便是跟节点，我们可以根据他遍历整个节点，我们也可以根据数组（里面有对应的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>

<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以及属性大同小异，我们这里开始处理，介于篇幅，下次继续