一層的渲染

將下面的模板中的mustache語(yǔ)法使用給定數(shù)據(jù)渲染.
模板如下

<div id="root"><div><div><p>{{name}} - {{message}}</p></div></div><p>{{name}}</p><p>{{msg}}</p> </div>

數(shù)據(jù)如下

const data = {name: '一個(gè)新name',message: '一個(gè)消息',msg: '哈哈哈' }

思路

• 首先使用document.querySelector方法獲取DOM結(jié)構(gòu)
• 然后得到其所有的子元素,通過(guò)節(jié)點(diǎn)類型(node.nodeType)來(lái)判斷其是文本節(jié)點(diǎn)還是元素節(jié)點(diǎn)
• 如果是文本節(jié)點(diǎn),則使用正則表達(dá)式來(lái)判斷,文本值中是否有mustache語(yǔ)法.
• 如果有則用data中的數(shù)據(jù)去替換它

知識(shí)點(diǎn)

• 使用正則表達(dá)式來(lái)判斷是否含有{{}}, 若有解析出其中的值.使用data中的值替換

const mustache = /\{\{(.+?)\}\}/g; // 這個(gè)正則規(guī)則匹配`{{}}`,其中(.+?)代表任意的字符 // 獲取文本節(jié)點(diǎn)的值, 假設(shè)是 `<p>{{ name }}</p>` let txt = textNode.nodeValue txt = txt.replace(mustache, function(_, g){return data[g.trim()] // data = {name: '一個(gè)新name'} })

實(shí)現(xiàn)

const mustache = /\{\{(.+?)\}\}/g; let tmpNode = document.quertSelector('#root') let data = {name: '一個(gè)新name',message: '一個(gè)消息',msg: '哈哈哈' } function compiler(template, data) {let childNodes = template.childNodesfor(let i = 0 , len = childNodes.length; i < len ; i++){let nodeType = childNodes[i].nodeTypeif(type == 3 ){// 文本節(jié)點(diǎn)let txt = childNodes[i].nodeValue;// 得到替換后的文本txt = txt.replace(mustache, function(_, g){return data[g.trim()]})// 將替換后的文本放到DOM中childNodes[i].nodeValue = txt} else if(type == 1) {compiler(childNodes[i], data)}} }

深層次的渲染

• 上面的函數(shù)只能替換簡(jiǎn)單對(duì)象,而不能替換引用類型的對(duì)象
• 即: a.name之類的就無(wú)法替換
• 需要使用對(duì)象深層次遍歷的方法
• 根據(jù)路徑得到對(duì)象中的值

function getValueByPath(obj, path){let res = obj,currProp,props = path.split('.')while((currProp = props.shift())){if(!res[currProp]){return undefined} else {res = res[currProp]}}return res } function compiler(template, data){// 其他位置和上述一樣// 僅改寫(xiě)文本節(jié)點(diǎn)中的...if(type == 3){// 文本節(jié)點(diǎn)let txt = childNodes[i].nodeValue// 得到替換后的文本txt = txt.replace(mustache, function(_, g){return getValueByPath(data, g.trim())})childNodes[i].nodeValue = txt}... }

總結(jié)

以上是生活随笔為你收集整理的javascript --- vue中简单的模板渲染的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。