【javascript 動態添加數據到 HTML 頁面】

今天簡單的學習了一下有關對象字面量的定義和 javascript 如何取出對象字面量的值的知識，javascript 動態添加數據到 HTML 頁面的問題。

【學習目標】有以下的一組數據經過 Ajax 傳遞過來：

var dataList = [
    {
        state: 2,    //  0:sharing  1:unJoin  2:sharingEnd
        name: '客戶1',
        phone: 13675896031
    },
    {
        state: 1,    //  0:sharing  1:unJoin  2:sharingEnd
        name: '客戶2',
        phone: 13675896032
    },
    {
        state: 2,    //  0:sharing  1:unJoin  2:sharingEnd
        name: '客戶3',
        phone: 13675896033
    },
    {
        state: 0,   //  0:sharing  1:unJoin  2:sharingEnd
        name: '客戶4',
        phone: 13675896034
    },
    {
        state: 0,   //  0:sharing  1:unJoin  2:sharingEnd
        name: '客戶5',
        phone: 13675896035
    }
]

須要把這組數據動態的顯示到 HTML 頁面上，實現以下的效果：

【解決思路與方法】

DOM 結構和 CSS 樣式都已經定義好，可是在獲取 data 的值的時候遇到了困難。初學者不知道這個屬於哪一個範圍的知識，因而便開始在網上處處尋找。Json 、數組，都簡單的翻閱了一下，在跑偏以前終於找到了問題所在的關鍵點。現總結以下：

咱們以前看到的例子都是使用點標識符建立對象和成員的，例如：

var temp=document.getElementById('example'); 

使用對象字面量的方法更加簡單、方便、易懂，例如：

var myObj = {
    name:'Tiramisu',
    age:20,
    phoneNum:15265658952,
    myFunction:function(){}
}

以上代碼等價於：

var myObj = {};
myObj.name = 'Tiramisu';
myObj.age = 20;
myObj.phoneNum = 15265658952;
myObj.myFunction = function(){};

對於給出的 data 能夠看做一個數組，那麼當咱們訪問客戶一的屬性值的時候能夠使用以下的語句：

var oName = dataList[0].name;
var oState = dataList[0].state;
var oPhone = dataList[0].phone;
console.log(oName,oState,oPhone);

基本知識點整理完畢後開始解決目標問題。我要構建的 DOM 結構以下：

<div class="shareBox">
    <!-- 分享狀態 -->
    <div class="shareState clearfix">
        <div class="shareSateList" id="shareSateList">
             <div class="item sharing">  <!-- 如需切換角標切換類名便可 sharing：分享中；unJoin：未加入；sharingEnd：已結束 -->
                <div class="itemInfo">
                    <p class="name">李四</p>
                    <p class="phone">15024490626</p><br/>
                    <p class="state"><a class="endShare" href="javascript:;">結束分享</a></p>
                    <p class="state"><a class="reShare" href="javascript:;">從新分享</a></p>
                </div>
                <div class="mark"></div>         
            </div>
        </div>         
    </div>
</div>

CSS 樣式以下：

/*分享狀態樣式*/
.shareBox .shareState{
    width: 900px;
    position: relative;
    overflow: hidden;    
}
.shareBox .shareState .shareSateList{
    width: 910px;
}
.shareBox .shareState .mark{  /*分享狀態角標*/
    width: 57px;
    height: 52px;
    position: absolute;
    right: 0px;
    top: 0px;s
}
.shareBox .shareState .sharing .mark{   /*已分享*/
    background-image:url(../imgs/sharing.png);
    background-repeat: no-repeat;
}
.shareBox .shareState .unJoin .mark{   /*未加入*/
    background-image:url(../imgs/unJoin.png);
    background-repeat: no-repeat;
}
.shareBox .shareState .sharingEnd .mark{  /*已結束*/
    background-image:url(../imgs/sharingEnd.png);
    background-repeat: no-repeat;
}
.shareBox .shareState .item{  /*名片樣式*/
    width: 291px;
    height: 157px;
    float: left;
    border:1px solid #dfdfdf;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
}
.shareBox .shareState .item:hover{
    border:1px solid #F26426;
    cursor: pointer;
    background-image:url(../imgs/delete.png);
    background-repeat: no-repeat;
}
.shareBox .shareState .itemInfo{   
    position: absolute;
    top:33px;
    left: 68px;
}
.shareBox .shareState p.name{   /*名片姓名*/
    font-size: 24px;
}
.shareBox .shareState p.phone{  /*名片聯繫方式*/
    font-size: 18px;
}
.shareBox .shareState p.state{  /*視頻分享狀態顯示*/
    color: #4857e3;
}
.shareBox .shareState p.state a{  /*視頻分享狀態顯示*/
    text-decoration: none;
}
.shareBox .shareState .sharing .itemInfo p.state a.reShare{
    display: none;
}
.shareBox .shareState .unJoin .itemInfo p.state a.reShare{
    display: none;
}
.shareBox .shareState .sharingEnd .itemInfo p.state a.endShare{
    display: none;
}

接下來的任務即是動態的建立 DOM 並添加樣式。在這裏我前後講兩種方法，第一種方法是本身寫的，比較低級，並且繁瑣，代碼易讀性不高。介因而本身辛辛苦苦寫出來的，就貼在這裏了。代碼以下：

window.onload = function(){
    for(var i = 0;i < data.length;i ++){   
        var oShareStateList =  document.getElementById('shareSateList');

        //爲 shareSateList 新增子節點，即新添加一個名片
        var oAddItem = document.createElement('div'); 
        if(data[i].state == 0){
            oAddItem.className = 'item sharing'; 
        }
        if(data[i].state == 1){
            oAddItem.className = 'item unJoin'; 
        }
        if(data[i].state == 2){
            oAddItem.className = 'item sharingEnd'; 
        }  
        oShareStateList.appendChild(oAddItem);

        //添加新增添的名片裏的內容
        var oAddItemInfo = document.createElement('div');
        oAddItemInfo.className = 'itemInfo';
        oAddItem.appendChild(oAddItemInfo);
        //添加名字
        var oName = document.createElement('p');
        oName.className = 'name';
        oName.innerHTML = data[i].name;
        oAddItemInfo.appendChild(oName);
        //添加電話號碼
        var oPhone = document.createElement('p');
        oPhone.className = 'phone';
        oPhone.innerHTML = data[i].phone;
        oAddItemInfo.appendChild(oPhone);
        //添加換行
        var oBr = document.createElement('br');
        oAddItemInfo.appendChild(oBr);
        //添加狀態分享狀態
        var oState = document.createElement('p');
        oState.className = 'state';
        oAddItemInfo.appendChild(oState);
        var oA = document.createElement('a');
        oA.className = 'endShare';
        oA.innerHTML = '結束分享';
        oA.href = 'javascript:;';
        oState.appendChild(oA);
        var oState = document.createElement('p');
        oState.className = 'state';
        oAddItemInfo.appendChild(oState);
        var oA = document.createElement('a');
        oA.className = 'reShare';
        oA.innerHTML = '從新分享';
        oA.href = 'javascript:;';
        oState.appendChild(oA);

        //添分享狀態角標
        var oMark = document.createElement('div');
        oMark.className = 'mark';
        oAddItem.appendChild(oMark);
    }
}

第二種方法是同事建議的代碼，不只簡潔美觀，並且代碼易讀性高，值得很好的學習借鑑。代碼以下：

var oShareStateList =  document.getElementById('shareSateList'),
    tmp = ['<div class="itemInfo">',
            '<p class="name">{name}</p>',
            '<p class="phone">{phone}</p><br/>',
            '<p class="state"><a class="endShare" href="javascript:;">結束分享</a></p>',
            '<p class="state"><a class="reShare" href="javascript:;">從新分享</a></p>',
            '</div>',
            '<div class="mark"></div>'].join(''),
    state = ['sharing', 'unJoin', 'sharingEnd'];

function fetchData(){

    //異步獲取數據
    //if( succes ){}
    renderAll( dataList );

}

function renderAll( datas ){

    var data;

    while( data = datas.shift() ){
        render( data );
    }

}    

function render( data ){

    var _dom = document.createElement( 'div' );
    _dom.setAttribute( 'class', 'item ' + state[ data.state ] );
    _dom.innerHTML = tmp.replace( /(\{.+?\})/g, function($1){ return data[ $1.slice( 1, $1.length-1 ) ] } );
    document.getElementById('shareSateList').appendChild( _dom );

}

setTimeout( fetchData, 100 );

【相關知識點】

這些代碼涉及到以下的幾個知識點：

1.JavaScript shift() 方法 ：shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。

2.JavaScript slice() 方法 ：slice() 方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。語法以下：

stringObject.slice(start,end)

    start 參數 ：要抽取的片段的起始下標。

    end 參數 ：緊接着要抽取的片斷的結尾的下標。

3.很重要也很適用的一條語句：

tmp.replace( /(\{.+?\})/g, function($1){ return data[ $1.slice( 1, $1.length-1 ) ] } );

【總結】

頭腦裏要有面向對象編程的概念和習慣，一個函數裏面的執行語句若是超過必定數量就要分出來作函數處理。