文字列テンプレートの実装
22691 ワード
文字列テンプレートの実装文字列テンプレートは、データに基づいて複数のネストされた要素を動的に作成し、ページに挿入するなど、dom要素を通常作成する方法で挿入すると、コード量が極めて大きくなります.次に、従来の方法で実現される機能 です.以上の方法では、大量の創造domが見られ、その後、ネストされて追加され続け、コード量が大きく、効率が低下する が見られる.ですので、ここではテンプレート文字列の関数を提供して、このテンプレートを生成し、最後にページに挿入します.まず、データをページに置き換えるための文字列置換関数を提供します. その後、データ構造に基づいてテンプレート文字列とテンプレート文字列を生成する関数 を作成する.これにより、テンプレート文字列関数が実現され、domの作成と追加を1回操作するだけで機能が完了し、実行効率が大幅に向上します. 上のコードは、作成されたテンプレート文字列が同じ名前のラベルと同じ名前の変数であることを示しており、 のさらなる処理を行うことができます.生産ラベル変数の関数 を構築するこの関数があれば、上記のコードをさらに最適化することができます. 以上は、頻繁なdom操作をテンプレート文字列で置き換える最終版であり、実行効率を大幅に向上させています.
//
let data = {
data: {
li: [
{
span: ' span',
strong: ' strong'
},
{
span: ' span',
strong: ' strong'
},
{
span: ' span',
strong: ' strong'
}
],
h2: ' ',
p: ' p '
},
id: 'containter',
}
function createDom(data){
let div = document.createElement('div')
div.id = data.id
let ul = document.createElement('ul')
let p = document.createElement('p')
let pt = document.createTextNode(data.data.p)
let h2 = document.createElement('h2')
let ph = document.createTextNode(data.data.h2)
p.appendChild(pt)
h2.appendChild(ph)
let liData = data.data.li
for(let i = 0, len = liData.length; i < len; i++) {
let li = document.createElement('li')
let span = document.createElement('span')
let strong = document.createElement('strong')
let t = document.createTextNode(liData[i].strong)
let p = document.createTextNode(liData[i].span)
span.appendChild(p)
strong.appendChild(t)
li.appendChild(span)
li.appendChild(strong)
ul.appendChild(li)
}
div.appendChild(ul)
div.appendChild(p)
div.appendChild(h2)
document.body.appendChild(div)
}
//
function formatString(str, data){
return str.replace(/\{\{(\w+)\}\}/g, function(all, key){
return data[key]
})
}
//
function createStrTemplate(data){
let div = document.createElement('div')
div.id = data.id
// li
let liData = data.data.li
let ulStr = ''
// div
let divStr = [
'{{p}}
',
'{{h2}}
',
'{{ul}}
'
].join('')
// li
let liStr = [
'' ,
'{{span}}',
'{{strong}}',
''
].join('')
for(let i = 0, len = liData.length; i < len; i++) {
// li li
ulStr += formatString(liStr, liData[i])
}
// ul
data.data.ul = ulStr
// div ， html
let divStrTemplate = formatString(divStr, data.data)
div.innerHTML = divStrTemplate
document.body.appendChild(div)
}
createStrTemplate(data)
//
function view(name){
if(Object.prototype.toString.call(name) === '[object Array]') {
let str = ''
for(let i = 0, len = name.length; i < len; i++) {
str += view(name[i])
}
return str
} else {
return `<${name}>{{${name}}}${name}>`
}
}
function createStringTemplate(data){
let div = document.createElement('div')
div.id = data.id
// div
let divStr = view(['p', 'h2', 'ul'])
let ulStr = ''
let liData = data.data.li
// li ， li ， li li
let liTpl = formatString(view('li'), {li: view(['span', 'strong'])})
for(let i = 0, len = liData.length; i < len; i++) {
// li li
ulStr += formatString(liTpl, liData[i])
}
data.data.ul = ulStr
// div ， html
let divStrTemplate = formatString(divStr, data.data)
div.innerHTML = divStrTemplate
document.body.appendChild(div)
}
createStringTemplate(data)