• 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>
  • 相关阅读:
    Xcode 配置常用变量(SRCROOT, PROJECT_DIR, PROJECT_NAME)
    Git submodule实战
    Charles抓Https的包
    Vue-Quill-Editor 富文本编辑器的使用
    vue计算属性无法监听到数组内部变化
    移动端键盘弹起导致底部按钮上浮解决方案
    js中数组删除 splice和delete的区别,以及delete的使用
    js实现复制input的value到剪切板
    treetable
    vue中状态管理vuex的使用分享
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8057149.html
Copyright © 2020-2023  润新知