config對象

在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>
相關文章
相關標籤/搜索