vue组件、数据解析的实现思想猜想与实践

Vue的全局组件，在注册后，可在全局范围内无限次使用，猜想是利用了闭包"可以保持形参"的特性，使初始化时的作用域得意保存，下面用原生js和部分jquery代码模拟了数据解析和组件渲染的技术设计思想，简化期间忽略了应用scope，组件实例直接追加在body里了，具体过程如下：

1.设计并扩展Array原型，增加myEach方法（也可用ES5的map方法，此处模拟了map的实现），返回组件中template里的参数项：

function myMatch(str){
        var rst = str.replace("{{","").replace("}}","");
        return rst;
    }
    Array.prototype.myEach = function(f){
        var rst = [];
        for( var i=0;i<this.length;i++ ){
            var macther = f(this[i]);
            rst.push( macther );
        }
        return rst;
    }

2.设计并构建组件生成器，接受Options参数，包含必备的data和template属性：

//组件生成器
    function CreateComponent(options){
        data = options.data;
        template = options.template;
        //返回一个用于创建实例的函数指针
        return function(){

　　     //正则，用于提取{{}}形式的数据，返回['{{name}}','{{age}}']形式的参数名数组
            var reg = /{{[a-zA-Z_0-9]+}}/g;

　　    //对正则返回的数据调用myEach,接受myMatch,返回去除了"{{}}"的参数名数组：['name','age']
            var arr = template.match( reg ).myEach( myMatch );
            var temp = template;
            for( i=0;i<arr.length;i++ ){

　　　　//用data里的属性替换template中的参数名
                temp = temp.replace( "{{"+arr[i]+"}}",data[arr[i]] );
            }

　　　//在body中追加基于template的解析结果
            var newNode = document.createElement("div");
            newNode.innerHTML = temp;
            document.body.appendChild( newNode );
        }
    }

3.执行组件生成器，返回一个全局函数句柄，之后每次生成dom,直接调用该句柄即可

var factory = CreateComponent({
        data:{
            name:'msl',
            age:29
        },
        template:"<div>{{name}}</div><div>{{age}}</div>"
    });
    factory();
    factory();
    factory();

最终运行效果如图：