javascript设计模式笔记

JavaScript进阶学习:操作对象收编变量以及函数方法

2022-01-03  本文已影响0人  听书先生

在项目的实际开发中,尤其是多人团队的开发中,就必须需要留意的就是全局变量的污染,针对全局变量,很容易想到的是全局定义的var data = 0;这种,但是,更需要注意的是函数也是属于变量。因此,在企业中,就需要对函数方法使用原型对象进行套壳封装一层。
比如,以下场景:

function checkName() {
    // 验证用户名
    console.log('调用了验证用户名的方法');
}
function checkTel() {
   // 验证电话号码
   console.log('调用了验证电话号码的方法');
}

这样写就很容易将别人定义的重复的方法名进行覆盖,因此,我们需要进行一层处理,划分自己单独的区域范围。

    var CheckObject = function() {
      return {
        checkName: function() {
          // 验证用户名
          console.log('调用了验证用户名的方法');
        },
        checkTel: function() {
          // 验证电话号码
          console.log('调用了验证电话号码的方法');
        }
      }
    }

    var c = CheckObject();

    c.checkName();

如上所示,我们使用了真假对象划分了自己的区域范围,但是,这种仍然不够方便,比如,CheckObject中有很多方法,但是我们想调其中的四五个,那么我们要不断的使用实例对象进行调取吗?不需要的,只需要对上述代码进行部分改进.....
只需要考虑到CheckObject下的checkName方法中的this指向的是外面套的那个对象即可,因此,我们在创建方法的时候只需要将this指向return出去即可。

    var CheckObject = function() {
      return {
        checkName: function() {
          // 验证用户名
          console.log('调用了验证用户名的方法');
          return this;
        },
        checkTel: function() {
          // 验证电话号码
          console.log('调用了验证电话号码的方法');
          return this;
        }
      }
    }

    var c = CheckObject();

    c.checkName().checkTel();

这样,我们就可以使用链式调用其中的方法了。

Function.prototype.addMethod = function(name, fn) {
  this[name] = fn;
}

var c = new Function();

c.addMethod('checkName',function() {
  console.log('调用了检验名称的方法')
})
c.addMethod('checkTel',function() {
  console.log('调用了检验电话号码的方法')
})
c.addMethod('checkPsd',function() {
  console.log('调用了检验密码的方法')
})

c.checkName();

Function.prototype.addMethod我们可以通过这钟方式对Funtion的原型对象上进行添加一个公共分享出去的方法。后续需要添加其他的方法时,我们也可以继续在尾部追加方法即可。
这种方式还可以继续进行优化,我们可以链式的去添加方法进Function的构造函数中去。

Function.prototype.addMethod = function(name, fn) {
  this[name] = fn;
  return this;
}

var c = new Function();

c.addMethod('checkName',function() {
  console.log('调用了检验名称的方法');
}).addMethod('checkTel',function() {
  console.log('调用了检验电话号码的方法');
}).addMethod('checkPsd',function() {
  console.log('调用了检验密码的方法');
})

c.checkTel();

这样就提高了灵活性。

上一篇 下一篇

猜你喜欢

热点阅读