js学习记录（六） 对象的运用

今天继续美团网的模仿。主要内容是中间的分类部分：

这里的介绍，总共分成5个类别：全部、约会聚餐、丽人SPA、电影演出、品质出游。每个类别里面有不同种类的6张卡片。如果是用html来一个个写的话，明显太麻烦了。所以想尝试一下用js让这个过程更简单。

因为是第一次尝试js对象编程，没有完整的印象，需要一步步尝试：
1.第一步是用html+css写出了一个卡片的内容

<a href="#" class="quality-card">
    		<div class="imgarea" ></div>
    		<div class="txtarea">
    			<h3>博尔主题酒店</h3>
    			<h2>元气工作日套餐</h2>
    			<p class="price">¥<span>204</span>/起</p><p class="location">国大城市广场</p>
    		</div>
    	</a> 

2.然后把html代码复制到js里面，照着一步步创建所有的节点。

function addCard(addcard){
    //获取卡片容器
    var cardcontainer=document.getElementsByClassName('card-container');

    //创建所有节点
    var creatCard = document.createElement('a');
    var imgarea = document.createElement('div');
    var txtarea = document.createElement('div');
    var shopName = document.createElement('h3');
    var intro = document.createElement('h2');
    var price = document.createElement('p');
    var locatio = document.createElement('p');
    var price_nm=document.createElement('span');

3.给节点添加内容

   //节点添加内容
    creatCard.setAttribute("href",addcard.lin);
    imgarea.style.backgroundImage="url("+addcard.bgImgUrl+")";
    shopName.innerHTML=addcard.shopsName;
    intro.innerHTML=addcard.inroTxt;
    price_nm.innerHTML=addcard.priceNm;
    price.innerHTML='¥'+price_nm.innerHTML+'/起';
    locatio.innerHTML=addcard.place;

4.给节点添加样式

//节点添加样式
creatCard.className='quality-card';
txtarea.className='txtarea';
price_nm.className='nm';
price.className='price';
locatio.className='location';
imgarea.className='imgarea';

5.然后把节点组织起来

//文字部分的添加
txtarea.appendChild(shopName);
txtarea.appendChild(intro);
txtarea.appendChild(price);
txtarea.appendChild(locatio);

// 卡片分为图片和文字两部分
creatCard.appendChild(imgarea);
creatCard.appendChild(txtarea);

// 把构建完成的div加入到卡片容器中
cardcontainer[0].appendChild(creatCard);

6.添加卡片的函数完成了，接下来就是构造卡片对象。卡片对象有以下属性

var card1={
    "lin":"#",  	//链接
    "bgImgUrl":"仿-美团-素材/img/hotel_interior_1.jpg",  //背景图
    "shopsName":"博尔主题酒店", //店明
    "inroTxt":"元气工作日套餐", //简要说明
    "priceNm":"204", //价格
    "place":"国大城市广场" //定位
};

7.最后调用函数，传入card对象

addCard(card1);

8.要加入其他卡片只要在创建新的card对象就可以了，方便很多。

总结
1.以现在的认知，js创建元素分以下步骤：1.创建所有节点；2.为节点添加属性内容；3.为节点添加样式；4.用appendChild方法把节点组织起来。
2.在写html的时候，一般是先写大的，再写小的。在用JS写的时候，先从最小的节点开始。最后组织的时候，也是从小到大一步步组织起来。
3.在写html的时候，有的节点是起了class名，有的没有。在写css的时候，直接用标签名来定位。导致在用JS重写的时候有些混乱，是不是如果用js，大部分标签都要起个名字方便定位？
4.越来越觉得现在做的内容是偏“技艺”的内容，像木匠，像设计师。对思维的逻辑性要求不高，要求有足够的熟练度。