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();
最终运行效果如图:
vue组件、数据解析的实现思想猜想与实践的更多相关文章
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue 组件数据传递
vue组件化开发 主要为了把一个大功能拆分成若干个小的功能,解决高耦合问题,同时也方便开发人员维护. 从功能上组件可以分为木偶组件和功能组件. 木偶组件(为了接收数据,渲染数据,基本上是没有逻辑的 ...
- Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
- [前端开发]Vue组件化的思想
组件化的思想 将一个页面中的处理逻辑放在一起,处理起来就会很复杂,不利于后续管理和扩展. 如果将页面拆分成一个个小的功能块,每个功能块实现自己的内容,之后对页面的管理和维护就变得很容易了. 注册组件的 ...
- 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
随机推荐
- Android多线程更新UI的方式
Android下,对于耗时的操作要放到子线程中,要不然会残生ANR,本次我们就来学习一下Android多线程更新UI的方式. 首先我们来认识一下anr: anr:application not rep ...
- Arch Linux 下Android 源代码的下载以及编译
之前把公司的开发环境由Ubuntu Kylin 换成了Arch Linux.而Arch 下由于种种问题公司的代码一直编只是去.搞定了之后也一直忘了写下来,希望能给相同在Arch 下做Android 开 ...
- [办公自动化]企业网IE多版本引发的网页无法访问
今天同事的某个网页无法打开,但是在我的计算机上该网站确实又能打开. 去看了一下,他的其他网站都正常.确认网络本身没有问题. 最后,看了一下IE版本,IE11. 只好尝试一下兼容性视图的设置. 设置了一 ...
- [JS进阶] HTML5 之文件操作(file)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/oscar999/article/details/37499743 前言 在 HTML 文档中 < ...
- mongodb05---游标
游标cursor: 通俗的说,游标不是查询结果,而是查询的返回资源,或者接口. 通过这个接口,你可以逐条读取.就像php中的fopen打开文件,得到一个资源一样, 通过资源,可以一行一行的读文件. v ...
- Buildroot构建指南--快速上手与实用技巧【转】
本文转载自:http://blog.csdn.net/zhou_chenz/article/details/52335634 Buildroot官方全英文使用手册的链接是https://buildro ...
- HubbleDotNet引擎查询技术
系统简介 HubbleDotNet 是一个基于.net framework 的开源免费的全文搜索数据库组件.开源协议是 Apache 2.0.HubbleDotNet提供了基于SQL的全文检索接口,使 ...
- linux 远程杀掉进程
转自http://blog.csdn.net/tengdazhang770960436/article/details/53906263 第一步:获取进程号 pid=$(ssh root@$remot ...
- hdu 3507(DP+斜率优化)
Print Article Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)To ...
- 小程序-demo:妹纸图
ylbtech-小程序-demo:妹纸图 1.返回顶部 0. 1.app.js //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 ...