【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 ) ] } );

【总结】

头脑里要有面向对象编程的概念和习惯，一个函数里面的执行语句如果超过一定数量就要分出来做函数处理。