品一品編程 --- 2

問題描述:

實(shí)現(xiàn)目前一些主流框架的循環(huán)渲染

// ali-for  
var items = [  
    {name:'item1'},  
    {name:'item2'}  
];  
var str = '<div ali-for="item in items">{{item.name}}<div>';  
  
var ParseDom = function(str){  
    // your code here  
}  
// 對(duì)應(yīng)生成的dom  
// <div>item1</div>  
// <div>item2</div>  

程序如下:

var ParseDom = function(str){
    // your code here
    var reg1 = /\sali-for=\"[a-zA-Z\s]+\"/gi, //獲得 ali-for="item in items"
        reg2 = /\{{2}[a-zA-Z\.]+\}{2}/gi, //獲得{{item.name}}
        reg3 = /\.[a-zA-Z]+/gi, //獲得.name
        len = items.length

    var temp = str.replace(reg1,''), //tmp = '<div>{{item.name}}</div>'
        fill = str.match(reg2)[0], //fill = "{{item.name}}"
        key = str.match(reg2)[0].match(reg3)[0].slice(1), //key = "name"
        clone_temp = '',
        str = ''

    for(var i=0;i<len;i++){
        clone_temp = temp
        st r+= clone_temp.replace(fill,items[i][key])
    }
    console.log(str)
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,001評(píng)論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,221評(píng)論 4 61
  • 最近優(yōu)化項(xiàng)目代碼時(shí),發(fā)現(xiàn)一個(gè)比較詭異的現(xiàn)象:每當(dāng)界面進(jìn)入ActivityA時(shí),cpu在不斷的消耗,內(nèi)存在不斷的緩慢...
    laogui閱讀 10,698評(píng)論 11 63
  • 今天下午有三點(diǎn)體驗(yàn)。 第一,關(guān)于錢。玲琴問我,怎么拼房一直沒人接龍,是不是嫌貴。她已經(jīng)第二次提出了。我說不會(huì)吧,3...
    顧鳴芬閱讀 142評(píng)論 0 0
  • 又有好長(zhǎng)一段時(shí)間沒有練習(xí)調(diào)色了,感覺再不撿起來就廢了。 廢話不多說,先來看看目標(biāo)圖吧: 這種歐美復(fù)古膠片的感覺很舒...
    野鹿志閱讀 1,782評(píng)論 0 25

友情鏈接更多精彩內(nèi)容