比较传统和对象的编程方式
如何使用对象
定义两个工具包
/*产品工具包 - 保存和产品有关的工具*/ var product={ name:‘iphone8‘, description:‘各地区货源已陆续到库,我们将在十月十号左右发货,对于此次延迟发货给您带来的不便表示致歉,望您谅解。‘, price:6660, /*绑定元素*/ bindDom:function(){}, /*绑定事件*/ bindEvents:function(){}, /*立即购买,暂时不考虑里面的代码是如何写的*/ buy:function(){}, /*加入到购物车*/ addCart:function(){} }
/*购物车工具包 - 保存和购物车有关的工具*/ var cart={ name:‘购物车‘, products:[], price:5000, sum:0, /*绑定元素*/ bindDom:function(){}, /*绑定事件*/ bindEvents:function(){}, /*结算*/ cartSum:function(){ } }
绑定产品模块元素
window.onload=function(){ /*绑定产品模块元素*/ product.bindDom() /*绑定购物车模块元素*/ cart.bindDom() /*绑定产品模块事件*/ product.bindEvents() /*绑定购物车模块事件*/ cart.bindEvents() }
提炼对象的属性和方法
产品对象
js使用函数+this的形式实现对象 - 这个时候的函数称之为构造函数
js中我们一般将属性放在上面的构造函数中,一般将方法放在下面的原型中
本质:其实是两个对象 上面叫构造对象,下面叫原型对象 --- 简称双对象定义对象法则 或者 双函数定义对象法则
代码实现
写法
function 构造函数(){ this.属性 } 构造函数.原型.方法 = function(){}; var 对象1 = new 构造函数(); 对象1.方法();
产品对象
//产品对象 /*对象内如何使用对象的属性和方法:this,对象外如何使用:先实例化,后用点语法*/ function Product(name,price,description,youhuijia,zhekou,sales) { /*属性 行为*/ this.name =name; this.price=price; this.description = description; this.youhuijia=youhuijia; /*和产品对象相关的dom,统一管理,以后使用*/ this.doms={ btn:document.getElementById(‘btn‘), name:document.getElementById(‘pname‘), price: document.getElementById(‘pprice‘), sum:document.getElementById(‘sum‘) } } 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 }, bindEvents:function(){ /*this that之争*/ var that = this; this.doms.btn.onclick = function(){ that.addToCart() } } }
逗逗加加法则和代码拼接
Product.prototype={ bindDom:function(dom){ var str = ‘‘ str+=‘<h1 id="pname">‘+this.name+‘</h1>‘ str+=‘<div id="pdes">‘+this.description+‘</div>‘ str+=‘<div >已售:<strong id="psales">‘+this.sales+‘</strong></div>‘ str+=‘ <div>原价:<strong id="pprice">‘+this.price+‘</strong>元</div>‘ str+=‘<div>优惠价:<strong id="pyouhui">‘+this.youhuijia+‘</strong>元</div> str+=‘<div>折扣:<strong id="pzhekou">‘+this.zhekou+‘</strong>折</div>‘ dom.innerHTML = str; } }
面向对象和列表
var product1 = new Product() product1.name = ‘SKII‘ product1.price = 1111 product1.zhekou = 3.5 product1.image = ‘img/boutque10_r2_c2.jpg‘ var product2 = new Product() product2.name = ‘??????‘ product2.price = 1111 product2.zhekou = 3.5 product2.image = ‘img/boutque10_r2_c2.jpg‘ var product3 = new Product() product3.name = ‘???‘ product3.price = 1111 product3.zhekou = 3.5 product3.image = ‘img/boutque10_r2_c2.jpg‘ var products = [product1,product2,product3] var str=‘‘ for(var i = 0,len=products.length;i<len;i++) { str+= products[i].bindDom() } var container = document.getElementById(‘container‘) container.innerHTML=str
面向对象的字面量形式
json字面量其实字面量的一种简化写法
// 这是JSON字符串 var foo = ‘{ "prop": "val" }‘; // 这是对象字面量 var bar = { "prop": "val" }; // 这是JSON字符串,比如从AJAX获取字符串信息 var my_json_string = ‘{ "prop": "val" }‘; // 将字符串反序列化成对象 var my_obj = JSON.parse( my_json_string ); alert( my_obj.prop == ‘val‘ ); // 提示 true, 和想象的一样! // 将对象序列化成JSON字符串 var my_other_json_string = JSON.stringify( my_obj );
根据某个元素中class为 clasName的所有元素
function getByClass(obj,classname){ var elements = obj.getElementsByTagName(‘*‘); var result = []; // 匹配字符串开头或者空格 var pattern = new RegExp( ‘^|\\s‘+ classname + ‘\\s|$‘); for(var i = 0; i < elements.length; i++){ if(pattern.test(elements[i].className)){ result.push(elements[i]); } } return result } var div = document.getElementById(‘div‘) var length = getByClass(div,‘red‘).length console.log(length)
时间: 2024-10-22 03:31:35