由於各種原因，被逼使用前臺模板。看了一下其他JS模板庫的實現，發現其原理並不難，遂決定重造輪子。使用ROR.erb風格。換言之，邏輯是寫在""之間，如果是註釋，則用""，凡是後臺傳過來的變數都加上@來標記。現在這個模板系統還沒有搭載任何helper方法，也不依賴任何程式碼，因此非常精短。
| <meta content="IE=8" http-equiv="X-UA-Compatible"/> |
| <meta name="keywords" content="javascript模板 by 司徒正美" /> |
| <meta name="description" content="javascript模板 by 司徒正美" /> |
| <title>javascript模板 by 司徒正美title> |
| <h1>javascript模板 by 司徒正美h1> |
| <textarea id="tmpl" style="display:none;" > |
| <p style="text-indent:2em;">p> |
| window.onload = function(){ |
| dom.erb("tmpl", {name:"司徒正美",supplies:["第一個LI元素","第二個LI元素","第三個LI元素","第四個LI元素"],address:"異次元"}) |
模板系統：
| str = str.replace(/[\x00-\x1f\\]/g, function (chr) { |
| var special = metaObject[chr]; |
| return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4) |
| return '"' + str.replace(/"/g, '\\"') + '"'; |
| //selector ，必須，String， 模板容器textarea的ID值 |
| //onsite，可選，Boolean，是否就地替換掉模板容器，預設true，如果為false，則返回一個文件碎片，交由使用者自己插入到需要的地方 |
| dom.erb = function (selector, json, onsite) { |
| onsite = !!onsite|| true; |
| var el = document.getElementById(selector); |
| if (!el) throw "找不到目標元素"; |
| var arr = text.split(/\s*\s*/g), |
| buff = ["var __views = [];\n"] |
| for (var i = 0, segment, n = arr.length; i < n; i++) { |
| if (i & 1) { //偶數項，處理動態的邏輯 |
| switch (segment.charAt(0)) { |
| buff.push(erb.startOfHTML, dom.quote("<!--" + segment + "-->"), erb.endOfHTML); |
| if (segment.indexOf("@") !== -1) { //處理後臺返回的變數（輸出到頁面的） |
| buff.push(erb.startOfHTML, segment.slice(1).replace(erb.rAt, "$1json."), erb.endOfHTML); |
| buff.push(erb.startOfHTML, segment.slice(1), erb.endOfHTML) |
| if (segment.indexOf("@") !== -1) { //處理後臺返回的變數 |
| buff.push(segment.replace(erb.rAt, "$1json."), "\n"); |
| } else { //奇數項，處理靜態的HTML片斷 |
| buff.push(erb.startOfHTML, dom.quote(segment), erb.endOfHTML); |
| erb[selector] = new Function("json", buff.join("") + ';return __views.join("");') |
| div.innerHTML = erb[selector](json); |
| var fragment = document.createDocumentFragment(); |
| fragment.appendChild(div.firstChild) |
| return onsite ? el.parentNode.replaceChild(fragment, el) : fragment; |
| dom.erb.parser = document.createElement("div"); |
| dom.erb.startOfHTML = "\t__views.push("; |
| dom.erb.endOfHTML = ");\n"; |
| dom.erb.rAt = /(^|[^\w\u00c0-\uFFFF_])(@)(?=\w)/g; |
javascript模板 by 司徒正美
javascript模板 by 司徒正美
執行程式碼
PS:發現javascript模板沒有想象中的糟糕，尤其是大流量的頁面在無法使用UI庫的情況下，這是個不錯的選擇，例子如qq zone與ニコニコ動畫。
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-670847/，如需轉載，請註明出處，否則將追究法律責任。