JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼

2019-11-20 21:15:46

字體：大中小

供稿：網(wǎng)友

本來想把之前對artTemplate源碼解析的注釋放上來分享下，不過隔了一年，找不到了，只好把當(dāng)時(shí)分析模板引擎原理后，自己嘗試

寫下的模板引擎與大家分享下，留個(gè)紀(jì)念，記得當(dāng)時(shí)還對比了好幾個(gè)模板引擎來著。

這里所說的js的模板引擎，用的是原生的javascript語法，所以很類似php的原生模板引擎。

前端模板引擎的作用？

1. 可以讓前端開發(fā)更簡單，不需要為了生成一個(gè)dom結(jié)構(gòu)而使用+運(yùn)算符去拼接字符串，而只需要一個(gè)元素的（里面的html模板），或者一個(gè)變量（存儲(chǔ)著模板），或者　　一個(gè)模板文件

2. 易于維護(hù)，減少耦合，假使你的dom結(jié)構(gòu)變化了，不需要更改邏輯代碼，而只需要更改對應(yīng)的模板（文件）

3. 可以緩存，如果你的模板是一個(gè)類似.tpl的文件，那么完全可以用瀏覽器去加載，并且還存下來。說到.tpl文件，可以做的不僅僅是緩存了，你還可以做到通過模塊加載器

將.tpl作為一個(gè)模塊，那就可以按需加載文件，不是更省寬帶，加快頁面速度嗎？

4. 等等等

前端模板引擎的原理？

原理很簡單就是對象（數(shù)據(jù)）＋模板（含有變量）－> 字符串（html）

前端模板引擎的如何實(shí)現(xiàn)？

通過解析模板，根據(jù)詞法，將模板轉(zhuǎn)換成一個(gè)函數(shù)，然后通過調(diào)用該函數(shù)，并傳遞對象（數(shù)據(jù)），輸出字符串（html）

（當(dāng)然，具體的還要看代碼的）

就像這樣：

復(fù)制代碼代碼如下:

var tpl = 'i am <%= name%>, <%= age=> years old'; // <%=xxx>% 詞法，標(biāo)記為變量

var obj = {
    name : 'lovesueee' ,
    age : 24
};
var fn = Engine.compile(tpl); // 編譯成函數(shù)

var str = fn(obj);   // 渲染出字符串        

例子：

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ice demo</title>
<script src="/javascripts/jquery/jquery-1.7.2.js"></script>
<script src="/javascripts/ice/ice.js"></script>
<body>
<div id="content"></div>
</body>

</script>
<script>
    var trs = [
        {name:"隱形殺手",age:29,sex:"男"},
        {name:"索拉",age:22,sex:"男"},
        {name:"fesyo",age:23,sex:"女"},
        {name:"戀妖壺",age:18,sex:"男"},
        {name:"

麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼