今天簡單的學習了一下有關對象字面量的定義和 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 ) ] } );
【總結】
頭腦里要有面向對象編程的概念和習慣，一個函數里面的執行語句如果超過一定數量就要分出來做函數處理。