打造属于自己的MVVM框架: 2.模版渲染引擎
2016-05-19 13:38
441 查看
上一篇介绍了MVVM的基本知识,本篇讲针对MVVM的模版渲染引擎进行介绍,不但从原理上对模版引擎的渲染原理进行剖析,而且有会相应的实现代码。
源码请戳
原文请戳
页面效果:
First name: Bert
Last name: Bertington
在HTML里,我们用
模版,即Html
渲染源,即viewModel
所谓的引擎,一段解析流程的,由knockoutjs负责
现在我们来自己试着实现一下这个模版引擎。
template标签可以放在任意位置
template标签默认display: none
基于以上优点,个人觉得template标签太适合做模版了,难怪会称为template。
将我们要渲染的Html包裹在中,加上id是为了能够确保唯一。
分离子节点
renderTemplate的方法较为复杂,首先会渲染父节点,然后将所有的子节点当作父节点再次递归,直到没有子节点为止。递归后的子节点集合渲染完后,需要加入到重新加入到父节点中。递归中途需要对
源码请戳
原文请戳
源码请戳
原文请戳
什么是模版渲染引擎
还是先来看一下上一篇有关knockoutjs的Demo:<p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p>
var viewModel = { firstName: "Bert", lastName: "Bertington" }; ko.applyBindings(viewModel);
页面效果:
First name: Bert
Last name: Bertington
在HTML里,我们用
data-bind: "text: firstName"作为Binding Instruction,而在JS里的viewModel相当于一个$scope,当Dom加载时,首先会检查HTML标签,发现有Binding Instruction后会对DOM进行解析,此时根据具体的指令在viewModel中进行解析,将解析后的值渲染到已经生成的DOM树上,就完成了整个指令渲染工作,而这个流程,就是前端模版渲染引擎的主要任务。
怎么做一个简单的渲染引擎
其实称为引擎还真有点夸张,充其量它只不过是一个解析的逻辑流程,在整个过程中有三个部分:
模版,即Html
渲染源,即viewModel
所谓的引擎,一段解析流程的,由knockoutjs负责
现在我们来自己试着实现一下这个模版引擎。
1.模版
为了在渲染是保留原模版,我采用template标签去画Html模版,因为:template标签可以放在任意位置
template标签默认display: none
基于以上优点,个人觉得template标签太适合做模版了,难怪会称为template。
<template id="test">
<p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p>
</template>
将我们要渲染的Html包裹在中,加上id是为了能够确保唯一。
2.解析template
利用id我们可以唯一找到template,首先将template里的内容取出来,var clone = document.importNode(document.querySelector('#' + id).content, true);
分离子节点
var fragmentContent = splitSubRealDoms(clone); function splitSubRealDoms(fatherDom) { var subRealDoms = []; while(fatherDom.firstElementChild) { var firstElementChild = fatherDom.removeChild(fatherDom.firstElementChild); subRealDoms.push(firstElementChild); } return subRealDoms; }
3.根据父节点的Binding Instruction去渲染子节点
for(var i = 0;i < fragmentContent.length;i++) { var result = renderTemplate(fragmentContent[i], viewModel); }
renderTemplate的方法较为复杂,首先会渲染父节点,然后将所有的子节点当作父节点再次递归,直到没有子节点为止。递归后的子节点集合渲染完后,需要加入到重新加入到父节点中。递归中途需要对
data-bind = instruction: value进行解析,将得到的value值在viewModel的$scope中,利用eval进行解析后绑定到DOM上。(详细代码略长,就不在这里贴了,可以去我的repo里去查看)
4.渲染完成
渲染完成后,将最终的结果插入到body上。$('body').append($(result));
5.总结
这一节主要介绍了前端模版引擎的工作原理,同时也分享了我自己的代码。但模版引擎仅仅只起到了单向绑定的效果(即viewModl->view),要想体现MVVM的优势,那就必须得实现双向绑定,那就必须的介绍MVVM中的核心对象observable了,下一篇会介绍如何实现observable。源码请戳
原文请戳
相关文章推荐
- RodChong入驻博客园
- 人人快递是怎么连接陌生人相互传达爱的
- java拦截器实例
- Javascript学习总结
- 关于removeFromSuperview的一系列处理
- Unity3D脚本各函数执行顺序And不同脚本的执行顺序
- fedora配置网络
- C++多态性
- 软件开发实战(一)
- Boostrap实现的登录界面
- 笔记0519
- 都说依赖注入,我就从实现的角度来一发,以android作为引子..
- python学习概述
- Oracle控制文件
- iOS开发之常用知识储备与开发技巧总结篇
- FMDB官方使用文档
- velocity map list 遍历
- eclipse安装python插件
- NSCoding 协议 父类只需要实现一次,所有子类 都可以 继承 的 runtime特性
- 顺序表应用1:多余元素删除之移位算法