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();
最终运行效果如图：
最新文章
- C# API项目代码正确 ，页面出不来的问题
- JAVA中的枚举小结
- 或许是 Nginx 上配置 HTTP2 最实在的教程了
- Seo的几个境界
- SQL Server中数据库文件的存放方式，文件和文件组
- 如何使用Xcode6 调试UI,Reveal
- 『奇葩问题集锦』npm install 报错 node-pre-gyp ERR! node-pre-gyp -v v0.6.25
- Asp.net原理(第一篇)
- vs2013 IntelliSense: &quot;const char *&quot; 类型的实參与 &quot;LPCWSTR&quot; 类型的形參不兼容
- 升级Linux tar &&解决某用tar解压失败的tar包
- Eclipse中Hibernate插件的安装
- [Codeforces 863B]Kayaking
- 面向对象开发C++快速入门视频教程 C++基础加实战视频教程
- 使用scrapy爬取海外网学习频道
- C# redis简单的使用
- 使用别名访问MSSQL Express
- 20155216 Exp3 免杀原理与实践
- 替换linux系统文件etc下passwd文件的字段获取真正的root权限
- Postman—authorization简介
- Asis CTF 2015-Car_Market