一、js设计模式-对症下药

SQC 发布于2019-08-26 13:34 / 3035人阅读

摘要：一个邮箱验证的功能函数的写法有几种简单的写法分析这几个函数可以认为是几个全局变量，类似于使用场景适用于功能比较单一独立的逻辑优点写法用法都比较简单缺点此时的函数作为全局变量存在，在这种情况多的时候团队开发时容易被别人的变量覆盖，而且从业务上

1、一个邮箱验证的功能函数的写法有几种？

(1) 简单的写法

function checkName(){};
function checkEmail(){};
function checkPassword(){};

分析：这几个函数可以认为是几个全局变量，类似于

var checkName = function(){};
var checkEmail = function(){};
var checkPassword = function(){};

使用场景：适用于功能比较单一、独立的逻辑

优点：写法、用法都比较简单

缺点：此时的函数作为全局变量存在，在这种情况多的时候团队开发时容易被别人的变量覆盖，而且从业务上讲这几个属于一类函数，所以放在一个对象里的话代码的可读性大大提高

(2) 作为一个对象的一个属性的函数

1、 var CheckoutObject = {
      checkName: function(){},
      checkEmail: function(){},
      checkPassword: function(){},
    };

类似于

 2、var CheckoutObject = function(){};
    CheckoutObject.checkName = function(){};
    CheckoutObject.checkEmail = function(){};
    CheckoutObject.checkPassword = function(){};

使用场景：几个功能有一定的逻辑或者类别上的关系，例如对表单的增删改查都属于对表单的操作

分析以及优点：这两种方式都只有一个全局变量，极大了削弱了命名冲突的隐患，都能直接通过变量名称CheckoutObject直接使用方法，区别是2属于函数，在函数内部可以定义所有实例共有的属性，更加符合类的特点，更加具体的说1是2的一种语法糖、只是2的一种实现方法

缺点：1不太符合类的特点不能去实例化，虽然2可以通过new去创建对象但是创建的对象并不包括那些静态方法，对于函数变量CheckoutObject复用性比较差，而且包含属性并不独立
(3) 函数返回对象，该对象包含邮箱校验的方法

  var CheckoutObject = function(){
    return {
      checkName: function(){},
      checkEmail: function(){},
      checkPassword: function(){},
    };
  };
  // 调用方法
  var test = new CheckoutObject();
  test.checkName();
  test.checkEmail();
  test.checkPassword();

使用场景：可以用来存放一些公共属性，会被多人调用，每次都生成新的实例

分析：构造函数返回一个对象，对象包含所需的属性，每次new都是一个新对象，对象包含校验需要的属性

优点：每个实例对象所包含的属性都是独立的

缺点：test的对象和CheckoutObject没什么关系，通过instanceof检测不出来，

(4) 更具有类特点的对象

var CheckoutObject = function(){
  this.checkName = function(){};
  this.checkEmail = function(){};
  this.checkPassword = function(){};
};
var test = new CheckoutObject();
console.log(test instanceof CheckoutObject); // true

特点：实例对象的类型是构造函数，这样更适用于封装
(5) 对象间共享的方法
分析：上述创建的对象都是独立的拥有自己的属性，但是这些属性是相同的，这样造成了内存的浪费

var CheckoutObject = function(){};
CheckoutObject.prototype.checkName = function(){
  console.log("我叫小将");
};
var test1 = new CheckoutObject();
var test2 = new CheckoutObject();
test1.checkName(); // 我叫小将
test2.checkName(); // 我叫小将
console.log(test1.checkName === test2.checkName); // true

使用场景：各个实例都拥有这个属性，这样就可以提取到原型对象中，减小内存损耗

优点：原型属性被所有属性所共享

缺点：实例的属性缺乏独立性，所以独立属性和共享属性应该对症下药

(6) 更简单的链式调用

分析：好的代码应该精简，能占一行绝不占两行

var CheckoutObject = {
  checkName: function(){ return this },
  checkEmail: function(){ return this }
}
CheckoutObject.checkName().checkEmail()

共享的也可以

var CheckoutObject = function(){};
CheckoutObject.prototype.checkName = function(){
  console.log(this);
  return this;
};
CheckoutObject.checkName()

使用场景：适合一系列操作，例如本博文的校验

优点：调用方式简洁，易懂

缺点：每个函数都必须返回当前this，也就是this必须指向当前执行环境

2、原生对象（例如Array）添加独立的方法

为原生对象添加属性通常是通过原型对象

Array.prototype.remove = function(){};

缺点：所有Array都具有了这个remove属性造成了污染
优点：如果大部分实例都需要这个方法这就成了优点了

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

这样所有的Array都具有addMethod这个属性，但是具体添加的方法是每个实例所共有，具体用那种看实际使用场景，而且可以在addMethod函数内加一些其它的共享属性

链式添加和使用

Function.prototype.addMethod = function(name, fn){
  console.log(this === Method);
  this.prototype[name] = fn;
  return this;
};
var Method = new Function();
Method.addMethod("checkName", function(){
  console.log("姓名检查");
  return this;
}).addMethod("checkEmail", function(){
  console.log("邮箱检查");
  return this;
})

var method = new Method();
method.checkName().checkEmail();

使用场景：为原型对象添加共享方法，但是具体执行每个原型实例可以自己定义

优点：提供共享的添加函数，具体添加的函数每个Method独立，method再次共享

总结：综上可以看到每种方式都有其使用场景，要对症下药选择最合适的模式

idc机房托管混合云 JS设计模式 js继承模式 js设计素材 js 创建对象安全模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109087.html

对症下药，快速下载github单个文件夹

摘要：如何从上下载单个文件夹然后再看了看插件这个插件能显示树状目录，还提供了单个文件的下载。单个文件本身就提供这个功能。瞎扯淡的前言前几日遇到一个比较麻烦的事情，刚好周末有时间，不知道大家是否和我一样，在github阅读源码的时候，只想看他的src目录，当然在github上面阅读非常的麻烦，各种快捷都用不了，函数跳转，全局搜索….等等。但是。。。关键来了，很有源码整个项目都非常的大，介...

RichardXG 2019-08-22 18:43 评论0 收藏0
看完离编写高性能的JavaScript又近了一步

摘要：加上内部函数被返回，被其他对象引用，形成了闭包，因此对应的变量对象存在于闭包函数的作用域链中。因此访问次数越多，费用越高，页面性能就会受到很大影响。尽管还主动执行了一次操作，曲线也没有下降。副标题：常见的JavaScript内存泄露这是关于JavaScript内存泄露相关的序列文章中一篇。由于时间有限更新进度会有点慢，但会持续更新的。自己也在学习中，难免对某些知识点的理解不是很正确...

Nekron 2019-08-21 17:54 评论0 收藏0
JAVA团队开发手册 - 3. 开发流程

摘要：开发流程对于一个项目，最大的问题就是如何拆解为任务，分配到合适的人手里，并在有限的时间内完成它。但是我们把整个项目进行拆解的话，每个星期进行统计分析，就可以对症下药，提高开发效率。开发流程对于一个项目，最大的问题就是如何拆解为任务，分配到合适的人手里，并在有限的时间内完成它。就像做建筑工程一样，其实做IT也是可以量化的，可能有的人砌砖砌得慢一些，有的人快一些。但是我们把整个项目...

luqiuwen 2019-07-31 14:43 评论0 收藏0
JAVA团队开发手册 - 3. 开发流程

摘要：开发流程对于一个项目，最大的问题就是如何拆解为任务，分配到合适的人手里，并在有限的时间内完成它。但是我们把整个项目进行拆解的话，每个星期进行统计分析，就可以对症下药，提高开发效率。开发流程对于一个项目，最大的问题就是如何拆解为任务，分配到合适的人手里，并在有限的时间内完成它。就像做建筑工程一样，其实做IT也是可以量化的，可能有的人砌砖砌得慢一些，有的人快一些。但是我们把整个项目...

魏宪会 2019-08-15 13:32 评论0 收藏0
CSS Sticky 其实很简单

摘要：大致步骤如下监听滚动事件，计算目标元素距离视口的距离。距离满足条件时，创建占位元素，修改目标元素定位方式为。仅仅为了实现这个效果页面上没有其他内容大动干戈性价比很低。对症下药，让滚动发生在被误匹配上的祖先元素内即可恢复。为什么要写这篇文章 Sticky 也不是新知识点了，写这篇文章的原因是由于最近在实现效果的过程中，发现我对 Sticky 的理解有偏差，代码执行结果不如预期。决定写篇文章重新...

番茄西红柿 2019-05-23 15:55 评论0 收藏0