在js中常常定義一個config對象來保存當前對象裏面的一些臨時變量;定義這個變量能夠被對象中全部的屬性訪問到,能夠避免重複,減小內存佔用,統一管理;dom
如:iphone
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>