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

前端MVVM 模式有點很多，完全擺脫了意大利面條式的代碼。
個人認為，所有MVVM 的框架基礎(chǔ)就是一個高性能的JS模板引擎,它極大簡化了 DOM 操作, 使頁面渲染和業(yè)務(wù)邏輯徹底分離.
為了理解模板引擎原理(zhaungbi),所以我折騰了一個簡化版的模板引擎.可以實現(xiàn)數(shù)據(jù)綁定,三元表達式, for 循環(huán)和 if 判斷.
如何實現(xiàn)三元表達式, for 循環(huán)和 if 判斷,將在下一篇介紹.

HTML 模板

下面是我定義好的html 模板字符串。

var template = `<div>
    <span>
    {{number}}
    </span></div>`;

這是我的數(shù)據(jù)

var scope ={    number:10}

好了，現(xiàn)在怎么把數(shù)據(jù)渲染到模板上面呢？

很自然的想到 正則表達式

正則替換

第一步 ，可以使用字符串的replace 函數(shù)。
這是正則

   var regex = /\{\{([A-Za-z_\$]+[A-Za-z0-9_\$]*)\}\}/g;

好了，現(xiàn)在編寫一個函數(shù)，我把我的模板引擎就叫 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
        
		

        		
網(wǎng)友評論
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		學習是年輕人改變自己的最好方式