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();

最终运行效果如图:

vue组件、数据解析的实现思想猜想与实践的更多相关文章

  1. vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  2. vue 组件数据传递

    vue组件化开发 主要为了把一个大功能拆分成若干个小的功能,解决高耦合问题,同时也方便开发人员维护.   从功能上组件可以分为木偶组件和功能组件. 木偶组件(为了接收数据,渲染数据,基本上是没有逻辑的 ...

  3. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  4. 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

    1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...

  5. [前端开发]Vue组件化的思想

    组件化的思想 将一个页面中的处理逻辑放在一起,处理起来就会很复杂,不利于后续管理和扩展. 如果将页面拆分成一个个小的功能块,每个功能块实现自己的内容,之后对页面的管理和维护就变得很容易了. 注册组件的 ...

  6. 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  7. 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  8. Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)

    Vue总结第五天:vue-router ✿ 路由(器)目录: □  vue中路由作用 □  vue-router基本使用 □  vue-router嵌套路由 □  vue-router参数传递 □  ...

  9. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

随机推荐

  1. JMeter Web测试快速入门教程

    学习前的准备 学习本教程前,你的电脑上至少应该有Apache JMeter这款软件.如果你没有,点击此处下载. 当你点进去后,你会发现它是一个依赖Java的软件 因此如果你电脑上没有Java环境,你应 ...

  2. PHP使用debug_backtrace方法跟踪代码调用

    在开发过程中,例如要修改别人开发的代码或调试出问题的代码,需要对代码流程一步步去跟踪,找到出问题的地方进行修改.如果有一个方法可以获取到某段代码是被哪个方法调用,并能一直回溯到最开始调用的地方(包括调 ...

  3. Memory Analysis环境安装

    安装MAT(MAT在eclipse的页面:http://www.eclipse.org/mat/downloads.php) 显示饼图的时候,需要安装BIRT Chart Engine插件,通过Ins ...

  4. Entity Framework工具POCO Code First Generator的使用(参考链接:https://github.com/sjh37/EntityFramework-Reverse-POCO-Code-First-Generator)

    在使用Entity Framework过程中,有时需要借助工具生成Code First的代码,而Entity Framework Reverse POCO Code First Generator是一 ...

  5. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  6. MFC项目实战(1)文件管理器--界面设计篇

    1.创建项目 文件管理器是一个基于对话框的应用程序.首先新建一个“MFC应用程序”类型的项目,然后输入新建项目的名称“FileMng”,并指定该项目保存的位置,单击“确定”按钮,如图所示. 在弹出的“ ...

  7. brctl和虚拟网桥

    1 创建空的虚拟网桥 brctl addbr br0 这个时候可以认为该虚拟网桥有多个虚拟接口,但是没有实际的网卡接口和该虚拟网桥相连的. 2 将eth0网卡连接到br0 网卡只有一个接口,这个接口是 ...

  8. Lightoj 1029 - Civil and Evil Engineer

    1029 - Civil and Evil Engineer    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limi ...

  9. UVA11383 Golden Tiger Claw —— KM算法

    题目链接:https://vjudge.net/problem/UVA-11383 题解: 根据KM()算法,标杆满足:l(x) + l(y) >= w(x, y) . 当求完最大权匹配之后,所 ...

  10. YTU 2435: C++ 习题 输出日期时间--友元函数

    2435: C++ 习题 输出日期时间--友元函数 时间限制: 1 Sec  内存限制: 128 MB 提交: 1069  解决: 787 题目描述 设计一个日期类和时间类,编写display函数用于 ...