面向对象思想（第一天）

Posted 2020-10-18 Carina

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 }