美文网首页
面向对象封装dom节点和封装方法绑定

面向对象封装dom节点和封装方法绑定

作者: RockChen | 来源:发表于2016-08-22 11:37 被阅读195次

    乐视TV( Letv) S50 Air 全配版 50英寸2D智能LED液晶 超级电视

    各地区货源已陆续到库,我们将在十月十号左右发货,对于此次延迟发货给您带来的不便表示致歉,望您谅解。

    已售:6000

    原价:6000

    优惠价:5000

    折扣:6.0

    加入购物车//产品对象

    /*对象内如何使用对象的属性和方法:this,对象外如何使用:先实例化,后用点语法*/

    function Product(name,price,description,youhuijia,zhekou,sales) {

    /*属性 行为*/

    this.name =name;

    this.price=price;

    this.description = description;

    this.youhuijia=youhuijia;

    this.zhekou = zhekou

    this.sales = sales

    /*和产品对象相关的dom,统一管理,以后使用*/

    this.doms={

    btn:document.getElementById('btn'),

    name:document.getElementById('pname'),

    price: document.getElementById('pprice'),

    sum:document.getElementById('sum'),

    des:document.getElementById('pdes'),

    youhuijia : document.getElementById('pyouhui'),

    zhekou: document.getElementById('pzhekou'),

    sales :document.getElementById('psales')

    }

    }

    Product.prototype={

    getPrice:function() {

    return this.price

    },

    addToCart:function(){

    alert('将物品添加到购物车')

    },

    bindDom:function(){

    this.doms.name.innerHTML=this.name

    this.doms.price.innerHTML=this.price

    this.doms.des.innerHTML=this.description

    this.doms.youhuijia.innerHTML=this.youhuijia

    this.doms.zhekou.innerHTML=this.zhekou

    this.doms.sales.innerHTML=this.sales

    },

    bindEvents:function(){

    /*this that之争*/

    var that = this;

    this.doms.btn.onclick = function(){

    that.addToCart()

    }

    }

    }

    /*搭积木开发 -- 代码可读性极高*/

    window.onload=function() {

    //如何使用

    //对象的使用必须先实例化,对象定义好之后,都是抽象的,必须实例化成具体

    var iphone = new Product('iphone7',5000,'手机中的战斗机',2000,3.3,20000)

    iphone.bindDom()

    iphone.bindEvents()

    }

    相关文章

      网友评论

          本文标题:面向对象封装dom节点和封装方法绑定

          本文链接:https://www.haomeiwen.com/subject/skawsttx.html