config对象

在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>

 

posted @ 2017-12-18 13:41  前端极客  阅读(1721)  评论(0)  编辑  收藏  举报