從乙個實際需求出發認識模板引擎
實現乙個模板引擎的思路及步驟
當我們需要用js渲染乙個歌曲列表的時候，由於資料需要向後端請求，所以實現不能在html中把資料寫死。
如下所示，我們需要在頁面上展示這樣乙個列表，
但是卻不能像下面一樣把資料寫死在li標籤中。
這個時候有兩種我們容易思考得到的方法來解決這個問題，乙個是html字串拼接，另一種是構建dom物件。
第一種：html字串拼接
第二種：構建dom物件
但是這兩種方法都有很大缺陷：
第一種方法容易漏引號，出現拼接錯誤。
第二種方法則是**量增加，雖然可以用jquery來減少**量，但依然不是最優選擇。
這兩種方法的共同特徵都是需要建立乙個li標籤，然後裡面的內容動態獲取
var li = ''+ songs[i].name +'-'+songs[i].singer''var li = stringformat(' -
', songs[0].name, songs[0].singer)
"some like it hot!! - spyairli>"傳入的引數：
' -
'
但是這樣的話，就必須把這部分函式寫在script標籤中，否則無法區分哪部分是html**，哪部分是邏輯**，所以我們需要特殊的字元來表示，這個特殊的字元就是定界符，
比如這個模板，使用的定界符就是：
'hello, my name is . i\'m years old.
';
var template =
'my skills:' +
'' +
'';var data =
var templateengine = function
(template, data)
1. 建立乙個新陣列，將沒有定界符包裹的**部分放入陣列中
2. 分辨出js邏輯部分，也就是有定界符包裹的部分，取出，
3. 傳入data
這樣最後返回給我們的就是這樣乙個字串，
最終**如下：
var templateengine = function
(html, options) ))(.*)?/g,
code = 'var r=;\n',
cursor = 0;
var add = function
(line, js)
while(match = re.exec(html))
add(html.substr(cursor, html.length - cursor));
code += 'return r.join("");';
return
new}
var templateengine = function
(html, options) 等關鍵字
var reexp = /(^( )?(if|for|else|switch|case|break|))(.*)?/g;
//宣告乙個字串code，用來儲存我們最終輸出的結果
var code = 'var r=;\n';
//設定乙個游標，用來遍歷完我們傳入的整個模板字串
var cursor = 0;
//宣告乙個add函式，用來判斷是js指令碼部分，還是需要新增到陣列中的字串部分
var add = function
(line, js) else
}elseelse
}return add
}while( match = re.exec(html) )
var rest = html.substr(cursor, html.length - cursor);//匹配結束後，模板字串中最後剩餘的部分
add(rest);//這一部分也需要進入add函式中判斷
code = code + 'return r.join("");';//最後新增返回語句
code = code.replace(/[\r\t\n]/g, '');//去除code字串中的製表符，回車符和換行符等，使**看起來更加簡潔
return
new}
利用js給我們提供了建構函式的「類」，
可以執行code
注意
這裡之所以會報錯，是因為console.log中新增的雙引號沒有加上轉義符（\），所以會報錯
完結：
寫完這篇部落格斷斷續續差不多用了兩天的時間，理解乙個東西不難，但是怎麼用文字說明白就很傷腦筋了，不過也算是前進了一小步啦。
參考部落格
Python（12）萌新也能看懂之 檔案讀寫
file open child.py r 開啟child.py檔案。第二個引數 r 表示以文字模式讀取。rb 表示以二進位制格式讀取，有些功能只能在二進位制格式時使用。除此之外，還有其他選項 引自菜鳥教程 模式 描述r以唯讀方式開啟檔案。檔案的指標將會放在檔案的開頭。這是預設模式。rb以二進位制格式...
小白也能看懂的XML簡介
目錄 一.xml簡介 二 xml用途 三 xml結構 四 xml語法 五 xml元素 六 xml屬性 七 總結 1.xml指可擴充套件標記語言，很類似html。xml被設計為傳輸和儲存資料，其焦點是資料的內容 html被設計用來顯示資料，其焦點是資料的外觀。2.xml的設計宗旨是傳輸資料，而非顯示資...
小白也能看懂的Cookie跟Session的區別
首先為了能充分理解為什麼引入cookie和cookie是什麼，先看了例子。不然官網上定義的概念不太容易看懂。eg 我今天想找老王吃放，打 給老王 例子看完了，在看看一些官網上一些專業術語的定義。會話 由一組請求和響應組成 理解為上面例子中的 對話 是圍繞著一件相關事情 吃飯 所進行的請求和響應。這些...