今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识，javascript 动态添加数据到 HTML 页面的问题。
【学习目标】有如下的一组数据通过 Ajax 传递过来：
var dataList = [{state: 2, // 0:sharing 1:unJoin 2:sharingEndname: '客户1',phone: 13675896031},{state: 1, // 0:sharing 1:unJoin 2:sharingEndname: '客户2',phone: 13675896032},{state: 2, // 0:sharing 1:unJoin 2:sharingEndname: '客户3',phone: 13675896033},{state: 0, // 0:sharing 1:unJoin 2:sharingEndname: '客户4',phone: 13675896034},{state: 0, // 0:sharing 1:unJoin 2:sharingEndname: '客户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 ) ] } );
【总结】
头脑里要有面向对象编程的概念和习惯，一个函数里面的执行语句如果超过一定数量就要分出来做函数处理。
