面向对象思想（第一天）

01：

函数：其实就是一个工具，每个函数都封装了特定的功能；拥有自己的名字，参数，就像一个打火机一样，我们只需要知道如何去使用他，而不需要了解他如何制造；

对象：就像一个工具包，将功能类似的函数封装到一起，方便我们维护和使用，管理；一个对象包括其属性和方法；如：图书馆对图书进行分类管理，函数就是对象里面的方法；

面向对象:我们找一个工具（对象）去帮我们工作，实现某种功能，‘借物’的思想；

传统的编辑程序：定义变量----获取元素---绑定元素---绑定事件；

面向对象开发：

  a.思考需要哪几个对象/工具包，主要开源与名词的提升，如，一个产品信息，我i们要把产品放到购物车里面，则我们可以提炼出两个对象：一个产品；一个购物车；

  b.思考每个对象需要哪些属性和方法，将与产品相关的代码放到产品里，和购物车相关的代码放入购物车对象里面；

面向对象的好处：便于分工合作，解耦和；

架构师的作用：宏观规划需要 哪些对象，ing编写好较难写的对象；

高级工程师：将一个项目分成很多对象，他们负责编写对象细节；

初级工程师：使用对象；

实例化：将抽象的对象只有具体化以后才能使用；new方法实例化；

案例：（1）分析需要哪些对象；定义一个产品对象；

　　　　写出：

function Product(){
}

Product.prototype={
}

(2)分析对象的属性与方法：先写汉语注释，再写代码；

（3）定义一个方法bindDom.将绑定的代码都放到里面，用字符串进行拼接（因为数据是从后台传过来自动生成的）；

(4)每一个产品都要进行一个实例：

总体JS代码如下：

//产品对象
/*对象内如何使用对象的属性和方法：this，对象外如何使用：先实例化，后用点语法*/
function Product() {
    /*属性 行为*/
    this.name ='';
    this.price='';
    this.description = '';
    this.youhuijia='';
    this.zhekou = ''
    this.sales = ''
    this.image=''
}
Product.prototype={
    bindDom:function(){
        var str=''
        str+='<dl>'
            str+='<dt><a><img src="'+this.image+'" width="384" height="225" /></a></dt>'
            str+='<dd>'
                str+='<span><a><em>'+this.zhekou+'折/</em>'+this.name+'</a></span>'
            str+='</dd>'
            str+='<dd class="price">'
                str+='<em>￥'+this.price+'</em>'
                str+='<del>￥'+this.youhuijia+'</del>'
                str+='<i>售量：'+this.sales+'</i>'
            str+='</dd>'
        str+='</dl>'
        return str;
    },
    bindEvents:function(){

    }
}

/*搭积木开发 -- 代码可读性极高*/
window.onload=function() {
  /*假设这是ajax获取的json数据 -- 假设这是后台给你的数据*/
    var products= [
        {name:'手机中的战斗机',price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:'img/boutque10_r2_c2.jpg'},
        {name:'手机中的战斗机',price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:'img/boutque06_r2_c2.jpg'},
        {name:'手机中的战斗机',price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:'img/boutque08_r2_c2.jpg'},
        {name:'手机中的战斗机',price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:'img/boutque09_r2_c2.jpg'},
        {name:'手机中的战斗机',price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:'img/boutque10_r2_c2.jpg'},
        {name:'手机中的战斗机',price:1111,youhuijia:1000,sales:300,zhekou:3.5,image:'img/boutque11_r2_c2.jpg'},
    ]

    /*前端代码*/
    /*前后台开发不影响，我们不必等待后端人员给我们数据*/
    var str=''
    for(var i = 0,len=products.length;i<len;i++) {
        var product = new Product()
        product.name=products[i].name;
        product.price=products[i].price;
        product.youhuijia=products[i].youhuijia;
        product.zhekou=products[i].zhekou;
        product.sales=products[i].sales;
        product.image=products[i].image;

        str+= product.bindDom()
    }
    var container = document.getElementById('container')
    container.innerHTML=str
}