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

乐视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()

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,109评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • 2016.9.9 第6章 原型与面向对象 原型虽然是定义对象的一种很方便的方式,但它的本质依然是函数特性。 使用原...
    如201608阅读 710评论 0 0
  • 该写点什么了吧 昨天是儿子两周岁生日 真的很无奈不能陪他一起过
    余小白日常阅读 122评论 0 0
  • iOS蓝牙的开发专题 最近做一个iOS蓝牙设备的项目,需要用iOS连接外部蓝牙设备,就对iOS蓝牙相关技术做了一些...
    wh_mouse阅读 1,939评论 3 21