前端MVVM 模式有点很多，完全摆脱了意大利面条式的代码。
个人认为，所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.
为了理解模板引擎原理(zhaungbi),所以我折腾了一个简化版的模板引擎.可以实现数据绑定,三元表达式, for 循环和 if 判断.
如何实现三元表达式, for 循环和 if 判断,将在下一篇介绍.
HTML 模板
下面是我定义好的html 模板字符串。
var template = `<div>
<span>
{{number}}
</span></div>`;这是我的数据
var scope ={ number:10}好了，现在怎么把数据渲染到模板上面呢？
很自然的想到 正则表达式
正则替换
第一步 ，可以使用字符串的replace 函数。
这是正则
var regex = /\{\{([A-Za-z_\$]+[A-Za-z0-9_\$]*)\}\}/g;好了，现在编写一个函数，我把我的模板引擎就叫 SS。
var SS = (function() { var regex = /\{\{([A-Za-z_\$]+[A-Za-z0-9_\$]*)\}\}/g; var result = ""; var ss = {};
ss.Render = function(template, scope) {
result = templ
延伸阅读
- ssh框架
2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁
2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】
2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词
2017-07-26
- 从栈不平衡问题 理解 calling convention
2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明
2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解
2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析
2017-07-26
- 集合结合数据结构来看看(二)
2017-07-26
学习是年轻人改变自己的最好方式