在js中经常定义一个config对象来保存当前对象里面的一些临时变量;定义这个变量可以被对象中所有的属性访问到,可以避免重复,减少内存占用,统一管理;
如:
1 <script> 2 function dateFormat(date,format){ 3 var o = { 4 "M+" : date.getMonth()+1, //month 5 "d+" : date.getDate(), //day 6 "h+" : date.getHours(), //hour 7 "m+" : date.getMinutes(), //minute 8 "s+" : date.getSeconds(), //second 9 "q+" : Math.floor((date.getMonth()+3)/3), //quarter 10 "S" : date.getMilliseconds() //millisecond 11 } 12 if(/(y+)/.test(format)) format=format.replace(RegExp.$1, 13 (date.getFullYear()+"").substr(4- RegExp.$1.length)); 14 for(var k in o)if(new RegExp("("+ k +")").test(format)) 15 format = format.replace(RegExp.$1, 16 RegExp.$1.length==1? o[k] : 17 ("00"+ o[k]).substr((""+ o[k]).length)); 18 return format; 19 } 20 21 //产品对象 22 /*对象内如何使用对象的属性和方法:this,对象外如何使用:先实例化,后用点语法*/ 23 /*类 -- 抽象对象*/ 24 function Product(name,price) { 25 /*属性 行为 可以为空或者给默认值*/ 26 this.name=name 27 this.price=1000; 28 this.description = ''; 29 this.zhekou = '' 30 this.sales = '' 31 this.produceDate 32 /*我们的需求:自动计算打折后的价格*/ 33 Object.defineProperty(this, "price", { 34 value:5000000, 35 writable: false, 36 }); 37 Object.defineProperty(this, "produceDate", { 38 get: function () { 39 return dateFormat(produceDate,'yyyy年MM月dd日'); 40 }, 41 set: function (value) { 42 produceDate = value; 43 } 44 }); 45 var that = this; 46 //定义一个变量 :这个变量可以被对象中所有的属性访问到。。。。 47 /*避免重复,减少内存*/ 48 /*统一管理*/ 49 this.config = { 50 btnConfirm: document.getElementById('btn'), 51 btnBuy: document.getElementById('btn'), 52 btnAddCart: document.getElementById('btn'), 53 domProductName : document.getElementById('pname'), 54 domProductPrice : document.getElementById('pprice'), 55 sum : 1000, 56 des : document.getElementById('pdes'), 57 youhuijia : document.getElementById('pyouhui'), 58 zhekou : document.getElementById('pzhekou'), 59 sales : document.getElementById('psales'), 60 date : document.getElementById('date') 61 } 62 function bindDOM(){ 63 /*绑定元素*/ 64 /*通过点语法访问对象中的属性或者方法*/ 65 that.config.name.innerHTML=that.name 66 that.config.price.innerHTML=that.price 67 that.config.des.innerHTML=that.description 68 that.config.youhuijia.innerHTML=that.youhuijia 69 that.config.zhekou.innerHTML=that.zhekou 70 that.config.sales.innerHTML=that.sales 71 that.config.date.innerHTML=that.produceDate 72 } 73 function bindEvents(){ 74 /*绑定事件*/ 75 that.config.btn.onclick = function(){ 76 that.addToCart() 77 } 78 } 79 this.init = function(){ 80 bindDOM() 81 bindEvents() 82 } 83 } 84 85 //定义对象的两种方式 86 Product.prototype={ 87 88 getPrice:function() { 89 return this.price 90 }, 91 addToCart:function(){ 92 alert('将物品添加到购物车') 93 } 94 } 95 96 Product.prototype.buy=function(){ 97 } 98 Product.prototype.addToCart=function(){ 99 100 } 101 102 /*搭积木开发 -- 代码可读性极高*/ 103 window.onload=function() { 104 105 /*实例化 -- 实例 -- 具体*/ 106 //如何使用 107 //对象的使用必须先实例化,对象定义好之后,都是抽象的,必须实例化成具体 108 var iphone = new Product() 109 /*给对象的赋值赋值,也可以新增属性*/ 110 iphone.name='iphone7' 111 iphone.price=6000 112 iphone.description='手机中的战斗机' 113 iphone.youhuijia=3000 114 iphone.zhekou=3.0 115 iphone.sales=40000 116 iphone.produceDate=new Date() 117 /*无法使用私有成员*/ 118 // iphone.bindDOM() 119 // iphone.bindEvents() 120 /*只能使用共有成员*/ 121 iphone.init() 122 } 123 124 </script>