SS - DIY一个前端模板引擎.(一)

前端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
        
		

        		
网友评论
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		学习是年轻人改变自己的最好方式