码迷,mamicode.com
首页 > 其他好文 > 详细

面向对象思想(第一天)

时间:2017-12-17 15:53:45      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:bsp   如何   post   width   产品   src   on()   合作   开源   

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 }

 

面向对象思想(第一天)

标签:bsp   如何   post   width   产品   src   on()   合作   开源   

原文地址:http://www.cnblogs.com/yangguoe/p/8052167.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!