DIY乙個前端模板引擎 一

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

var template = `

}span> div> `;
這是我的資料
var scope =

很自然的想到 正規表示式

第一步 ，可以使用字串的replace 函式。

這是正則

var regex = /\\}/g;

var ss = (function() \}/g; var result = ""; var ss = {}; ss.render = function(template, scope) ) return result; } return ss; })()

ss.render(template,scope);

但是，僅僅渲染一級屬性的模板引擎有什麼用呢？

在這裡，渲染多級屬性還是分為兩種。

這裡，先解決變數屬性

首先,需要乙個新的正規表示式

var regex = /\\}/g;

正則寫的很爛,如果發現錯誤希望不吝賜教

var template = `}

}li> }li> `
按照上面模板匹配的資料
var scope = 
}

ss.render = function(template, scope)  return innerdata; }); return result; } 

在這裡考慮到元素的屬性,所以將} 中包含字元'.' 也匹配出來,再使用'.'分割,然後依次向下尋找

var res = ss.render(template, scope);

console.log(res);

貌似這個模板引擎已經具有雛形了

在這裡,要是正則能夠匹配上 ,而且裡面必須是數字

var regex = /\\}/g;

變數名必須是字母下劃線或者$ 符號打頭,後面必須是 ,.[a-za-z_\$] 或者

[a-za-z0-9_$]

如果正則有錯,還忘各位不吝賜教.

在每一次迭代中,可以使用 /[\d+]/.test(items[i]) 來判斷是否包含'',如果包含,那麼使用/[\d+]/迴圈匹配取出其中每一項.

總體**就是這樣

ss.render = function (template, scope)  } else  } return innerdata; });

var template =`}

name:}
age:}
***:}li> name:}
age:}
***:}li> `;
模板資料
var scope = , ,] }

console.log(ss.render(template, scope));

ss 模板中簡單的資料繫結就已經實現.

在 ss 前端模板引擎.(二) 中會插入 三元表示式,for迴圈和if條件判斷

學習前端模板引擎 jade 一

通常大部分前端開發工作者一開始步入前端開發的時候，都是直接簡單的寫html頁面然後丟給後台開發，後台開發在來嵌入模版。對於日益龐大的前端頁面來說，還是用老的字串拼接的方法來嵌入html內容已經不適應當下的開發趨勢了。廢話不多說，直接切入正題。第二步我要安裝npm包管理工具，在node環境下，不裝gr...

diy乙個小工具

仔細分析任務,其實關鍵點就是環境變數,建立乙個新程序,然後把環境變數塊傳遞進去,變可完成任務,環境塊是乙個string,name value 而且對於unicode 和ansi 的對待方式不同,如果是unicode,createprocess時要傳遞 dword dwcreationflags這個引...

DIY乙個簡易查詢系統

前段時間應需求計畫做乙個簡潔的 中藥毒 查詢 小工具 們提供了不少資料.最簡潔的還屬這個名單 我們預期一下我們希望做出乙個什麼東東,它應該 可以展示資料裡的藥物及其屬性關係.例如 柴胡 對應 小柴胡片 小柴胡顆粒 得生丸 安坤贊育丸。柴胡皂苷 能導致腎上腺肥大 胸腺萎縮，使人體免疫功能降低。有腎毒性...