我們會基本使用顯然不夠啊
我們要去了解mustache的原理 乃至自己去寫一個(gè)mustache
首先 mustache 不是不能用簡單的正則表達(dá)式來實(shí)現(xiàn)
但是 這里為了讓大家理解 為什么不能 我們還是用簡單正則寫一下
我們創(chuàng)建一個(gè) html文件
然后 編寫代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "list"></div>
<script>
var templateStr = `<h1>我是一只{{name}}，今年{{age}}歲啦</h1>`;
var data = {
name: "小貓貓",
age: 2
}
</script>
</body>
</html>
這里 我們定義了一個(gè)模板字符串 templateStr 寫的是一個(gè) h1的頁面模板字符串
在下面定義了一個(gè) data的對象 模板字符串里面用了data中的兩個(gè)字段
那么 我們現(xiàn)在就需要寫一個(gè)函數(shù) 將他們寫入到dom樹中
我們在下面編寫這樣一段代碼
console.log(templateStr.replace(/\{\{(\w+)\}\}/g, function(a, b, c){
console.log(a, b, c);
return "*";
}));
相信replace函數(shù) 大家都不會陌生 字符串替換
這里 我們 寫的 是 捕獲 {{ }} 一對花括號 里面帶有字母的內(nèi)容
{{ 代表捕獲 {{ 同理 }} 捕獲 }} 一對小括號 代表捕獲 里面 \w代碼字母 后面一個(gè)加號 代表一個(gè) 或者 多個(gè) 都會被捕獲
所以 我們捕獲到了 所有的 {{ 字母組合 }} 并在函數(shù)中 a代表原本的內(nèi)容 b代表 括號內(nèi) 被捕獲的字母內(nèi)容 c參數(shù)代表這個(gè)符號在字符串的下標(biāo)位置 簡單說 就是第幾個(gè)字符
我們運(yùn)行結(jié)果如下
可以看到 我們兩次 輸出 分別 捕獲到了templateStr中的 name 和 age的使用
并再最后 將他們也都替換成了 *
而我們 abc三個(gè)參數(shù)的輸出 也是沒有任何問題
而且 我們還有一個(gè)d參數(shù)
我們將代碼改成
console.log(templateStr.replace(/\{\{(\w+)\}\}/g, function(a, b, c, d){
console.log(a, b, c, d);
return "*";
}));
我們這兩次 輸出的d參數(shù) 都是字符串在沒有被替換時(shí)的內(nèi)容
當(dāng)然 你也不一定要一直用 abc這三個(gè)名字 這個(gè)行參本來名字你就可以順便取
其實(shí)目前來講 有用的直屬 前兩個(gè)參數(shù)
下面 我們就需要 將他這里 用到的字段 位置 替換成 data中字段的值
意思就是 例如 {{ name }} 我們就要想辦法 替換成 data.name 的值
我們可以將代碼改成這樣
console.log(templateStr.replace(/\{\{(\w+)\}\}/g, function(pattern, name){
return data[name];
}));
因?yàn)?我們之前說過 第二個(gè)參數(shù) 拿到的是 捕獲到的 花括號中的內(nèi)容 那么 比如 {{ name }} 進(jìn)來
第二個(gè)參數(shù) 捕獲到的內(nèi)容就是 字符串的 “name” 那么 我們就可以 通過 data[“name”] 拿到data中的這個(gè)字段 age也是一樣的
運(yùn)行結(jié)果如下
這里 我們就很順利的 將這個(gè)內(nèi)容 替換成了 data中的值
這就是一個(gè)非常簡單的 模板引擎基理 但 mustache的源碼不是這樣寫的
因?yàn)檫@個(gè)有點(diǎn)太基礎(chǔ)了 之后什么循環(huán)啊 甚至說循環(huán)嵌套的 這個(gè)肯定是搞不定的
但是 大體思路差不多 寫這個(gè) 只是讓大家對這個(gè)變量解析有個(gè)概念
好啦 既然邏輯已經(jīng)寫好了 我們也可以寫個(gè)弱功能版的 render函數(shù)啦
我們可以這樣寫
function render(template, data) {
return template.replace(/\{\{(\w+)\}\}/g, function(pattern, name){
return data[name];
});
}
接受兩個(gè)參數(shù) 第一個(gè)template 一個(gè)頁面模板的字符串 data 操作數(shù)據(jù)的對象 和我們mustache.js中的 render 接的參數(shù)寫的是一樣的
好那我們試著用自己寫的這個(gè)弱化版的render
將內(nèi)容寫到頁面上
我們編寫頁面代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "list"></div>
<script>
var templateStr = `<h1>我是一只{{name}}，今年{{age}}歲啦</h1>`;
var data = {
name: "小貓貓",
age: 2
}
function render(template, data) {
return template.replace(/\{\{(\w+)\}\}/g, function(pattern, name){
return data[name];
});
}
document.getElementById('list').innerHTML = render(templateStr, data);
</script>
</body>
</html>
運(yùn)行結(jié)果如下
功能是實(shí)現(xiàn)了 但是 這里還是要給大家潑一瓢冷水文章來源：http://www.zghlxwxcb.cn/news/detail-487647.html
因?yàn)?這個(gè)只是給大家建立一個(gè)具體的思路 但是 后面肯定不是這樣去實(shí)現(xiàn) 因?yàn)?這個(gè)只能實(shí)現(xiàn)變量轉(zhuǎn)換 字符串轉(zhuǎn)譯 但是 像什么 循環(huán)語句 等等比較復(fù)雜的東西 這個(gè)肯定就廢了文章來源地址http://www.zghlxwxcb.cn/news/detail-487647.html
到了這里，關(guān)于Web3簡述MetaMask并演示谷歌安裝MetaMask擴(kuò)展程序方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
