01：
函数：其实就是一个工具，每个函数都封装了特定的功能；拥有自己的名字，参数，就像一个打火机一样，我们只需要知道如何去使用他，而不需要了解他如何制造；
对象：就像一个工具包，将功能类似的函数封装到一起，方便我们维护和使用，管理；一个对象包括其属性和方法；如：图书馆对图书进行分类管理，函数就是对象里面的方法；
面向对象:我们找一个工具（对象）去帮我们工作，实现某种功能，‘借物’的思想；
传统的编辑程序：定义变量----获取元素---绑定元素---绑定事件；
面向对象开发：
a.思考需要哪几个对象/工具包，主要开源与名词的提升，如，一个产品信息，我i们要把产品放到购物车里面，则我们可以提炼出两个对象：一个产品；一个购物车；
b.思考每个对象需要哪些属性和方法，将与产品相关的代码放到产品里，和购物车相关的代码放入购物车对象里面；
面向对象的好处：便于分工合作，解耦和；
架构师的作用：宏观规划需要 哪些对象，ing编写好较难写的对象；
高级工程师：将一个项目分成很多对象，他们负责编写对象细节；
初级工程师：使用对象；
实例化：将抽象的对象只有具体化以后才能使用；new方法实例化；
案例：（1）分析需要哪些对象；定义一个产品对象；
写出：
1 function Product(){ 2 } 3 4 Product.prototype={ 5 }
(2)分析对象的属性与方法：先写汉语注释，再写代码；
（3）定义一个方法bindDom.将绑定的代码都放到里面，用字符串进行拼接（因为数据是从后台传过来自动生成的）；
(4)每一个产品都要进行一个实例：
总体JS代码如下：
1 //产品对象 2 /*对象内如何使用对象的属性和方法：this，对象外如何使用：先实例化，后用点语法*/ 3 function Product() { 4 /*属性 行为*/ 5 this.name =‘‘; 6 this.price=‘‘; 7 this.description = ‘‘; 8 this.youhuijia=‘‘; 9 this.zhekou = ‘‘ 10 this.sales = ‘‘ 11 this.image=‘‘ 12 } 13 Product.prototype={ 14 bindDom:function(){ 15 var str=‘‘ 16 str+=‘<dl>‘ 17 str+=‘<dt><a><img src="‘+this.image+‘" width="384" height="225" /></a></dt>‘ 18 str+=‘<dd>‘ 19 str+=‘<span><a><em>‘+this.zhekou+‘折/</em>‘+this.name+‘</a></span>‘ 20 str+=‘</dd>‘ 21 str+=‘<dd class="price">‘ 22 str+=‘<em>￥‘+this.price+‘</em>‘ 23 str+=‘<del>￥‘+this.youhuijia+‘</del>‘ 24 str+=‘<i>售量：‘+this.sales+‘</i>‘ 25 str+=‘</dd>‘ 26 str+=‘</dl>‘ 27 return str; 28 }, 29 bindEvents:function(){ 30 31 } 32 } 33 34 /*搭积木开发 -- 代码可读性极高*/ 35 window.onload=function() { 36 /*假设这是ajax获取的json数据 -- 假设这是后台给你的数据*/ 37 var products= [ 38 {name:‘手机中的战斗机‘,price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:‘img/boutque10_r2_c2.jpg‘}, 39 {name:‘手机中的战斗机‘,price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:‘img/boutque06_r2_c2.jpg‘}, 40 {name:‘手机中的战斗机‘,price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:‘img/boutque08_r2_c2.jpg‘}, 41 {name:‘手机中的战斗机‘,price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:‘img/boutque09_r2_c2.jpg‘}, 42 {name:‘手机中的战斗机‘,price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:‘img/boutque10_r2_c2.jpg‘}, 43 {name:‘手机中的战斗机‘,price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:‘img/boutque11_r2_c2.jpg‘}, 44 ] 45 46 /*前端代码*/ 47 /*前后台开发不影响，我们不必等待后端人员给我们数据*/ 48 var str=‘‘ 49 for(var i = 0,len=products.length;i<len;i++) { 50 var product = new Product() 51 product.name=products[i].name; 52 product.price=products[i].price; 53 product.youhuijia=products[i].youhuijia; 54 product.zhekou=products[i].zhekou; 55 product.sales=products[i].sales; 56 product.image=products[i].image; 57 58 str+= product.bindDom() 59 } 60 var container = document.getElementById(‘container‘) 61 container.innerHTML=str 62 }
