JavaScript-创建性设计模式

imccl 发布于2019-08-23 18:36 / 1261人阅读

摘要：即把构造函数的原型指向某个实例，所有构造函数的实例对象都共享原型中属性和方法。

工厂方法模式

定义：通过对产品类的抽象使其创建业务主要用于创建多类实例
即：再构造函数中创建指定类型的实例，原型属性方法中定义创建过程
算法骨架：

  var Factory = function(type, content) {
    if (this instanceof Factory) {
      return this[type](cotent)
    } else {
      return (new Factory([type](content)))
    }
  }
  Factory.prototype.type1 = function(content) {
  }

使用场景：需要创建大量对象，对象间可以分类合并（相似度高）

建造者模式

定义：将一个复杂对象的构建与表示分离，同样的构建过程可以创建不同的表示。
即：把存在变化的部分从大对象里抽出来，在构建过程中传入参数控制变化。
算法骨架：

  var Builder = function(arg1, args2...) {
    var entity = {};
    entity.part1 = new Part1(arg1);
    entity.part2 = new Part2(args2);
    return entity
  }
  var Part1 = function(arg1) {
    switch (arg1) {
      case ...
    }
  }

使用场景：一个对象的某一部分易变就可通过建造者模式抽象出来，这样多带带维护易变部分。

原型模式

定义：用原型实例指向创建对象的类，使用于创建新的对象的类共享原型实例的属性和方法。
即：把构造函数的原型指向某个实例，所有构造函数的实例对象都共享原型中属性和方法。
模式骨架1：

var ProConstructor = function(name) { // 原型对象对应的构造函数
  this.name = name
}
ProConstructor.prototype.walk = function() { // 原型对象中的方法

}
var InsContructor = function(name) { // 对象实例对应的构造函数
  ProConstructor.call(this, name) // 构造函数继承， 复制一些属性，这些属性值每个对象不一样
}
InsContructor.prototype = new ProConstructor(); // 原型继承， 将耗时长、每个对象都又这个值的属性和方法通过原型继承

模式骨架2：

var ExtendPrototype = function(){
  var F = function(){},
  args = auguments,
  len = args.length;
  for (var i = 0; i
使用场景：首先时一个对象需要被多次创建（创建一次的化原型模式没有优越感），然后就是每次创建的对象有差异（没有差异的话用单例模式多好），从上面可以看出原型模式的比普通的创建的好处在于将可复用的、耗时的的逻辑放在构造函数的原型里，而将简单差异化的放在构造函数里，这样不仅省去了创建的步骤而且原型对象在内存中还被共享也就是省内存，这样就能创建很多相同或者相似的对象，而模式骨架2的特点在于对普通对象的继承，比较常见
单例模式
定义：是只允许实例化一次的对象类。  
即：无论实例化多少次，都只产生唯一对象
模式骨架1：
var jquery = {
  getDom: function(){}
}
// 通过引用类型赋值只是存储引用的特点
var jquery1 = jquery;
var jquery2 = jquery; // jquery1 === jquery === jquery2
模式骨架2：
var singleInstance = (function(){
  var instance = null;
  // 单例对象对应的构造函数
  var SingleInstance = function() {};
  return function(){
    // instance通过特权方法访问
    if (!instance) {
      instance = new SingleInstance()
    }
    return instance
  }
})()
var instanceA = singleInstance();
var instanceB = singleInstance();
使用场景：需要在多个环境、多次使用某个对象，模式1比较简单，可以作为声明命名空间的方法，骨架2稍微复杂利用了闭包但是更符合面向对象的特点

服务器托管混合云 javascript创建类 javascript创建数组 javascript创建cookie javascript创建dom

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

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

JavaScript面向对象OOM 2（JavaScript 创建对象的工厂模式和构造函数模式）

摘要：都是构造函数模式创建的原生构造函数。使用构造函数创建对象经历了以下四个过程创建一个新对象构造函数的作用域交给新对象。在创建对象的时候，使用对象字面量和 new Object() 构造函数的方式创建一个对象是最简单最方便的方式。但是凡是处于初级阶段的事物都会不可避免的存在一个问题，没有普适性，意思就是说我要为世界上（程序中）的所有使用到的对象都使用一遍 var xxx = {} ，...

you_De 2019-08-02 11:55 评论0 收藏0
JavaScript面向对象OOM 2（JavaScript 创建对象的工厂模式和构造函数模式）

摘要：都是构造函数模式创建的原生构造函数。使用构造函数创建对象经历了以下四个过程创建一个新对象构造函数的作用域交给新对象。在创建对象的时候，使用对象字面量和 new Object() 构造函数的方式创建一个对象是最简单最方便的方式。但是凡是处于初级阶段的事物都会不可避免的存在一个问题，没有普适性，意思就是说我要为世界上（程序中）的所有使用到的对象都使用一遍 var xxx = {} ，...

liuchengxu 2019-08-23 12:47 评论0 收藏0
JavaScript设计模式-第一部分：单例模式、组合模式和外观模式

摘要：但是，这并不是采用单例的唯一原因。使用命名空间单例模式也被称为模块设计模式。函数内部声明了一些局部函数和或变量。紧随函数声明放置即可立即执行外部函数，并将所得的对象文字费赔给变量。 JavaScript设计模式-第一部分：单例模式、组合模式和外观模式设计模式是一些可靠的编程方式，有助于保证代码更加易于维护、扩展及分离，所有设计模式在创建大型JavaScript应用程序时均不可或缺单...

betacat 2019-08-20 13:38 评论0 收藏0
【JavaScript设计模式】单例模式

摘要：此时我们创建的对象内保存静态变量通过取值器访问，最后将这个对象作为一个单例放在全局空间里面作为静态变量单例对象供他人使用。单例模式又被称为单体模式，是只允许实例化一次的对象类。有时我们也用一个对象来规划一个命名空间，井井有条的管理对象上面的属性和方法。传统的面向对象语言中单例模式的实现，均是单例对象从类中创建而来，在以类为中心的语言中，这是很常见的做法。如果需要某个对象，就必须先...

zhaot 2019-08-21 18:36 评论0 收藏0
JavaScript面试系列：JavaScript设计模式之桥接模式和懒加载

摘要：桥接模式的核心在于将抽象部分和它的实现部分分离，使它们都可以独立的变化。看起来这个版本已经很完美了不，它仍然有可以优化的空间，即题目提到的桥接模式。使用桥接模式的实现版本这个实现包含了三个函数。这个例子体现了桥接模式的作用。我写的程序员面试系列文章 Java面试系列-webapp文件夹和WebContent文件夹的区别？程序员面试系列：Spring MVC能响应HTTP请求的原因？...

tracymac7 2019-08-23 12:29 评论0 收藏0
JavaScript 设计模式（一）：单例模式

摘要：停更许久，近期计划更新设计模式系列。单例模式是创建型设计模式的一种。虽然它不是正规的单例模式，但不可否认确实具备类单例模式的特点。适用场景单例模式的特点，意图解决维护一个全局实例对象。停更许久，近期计划更新：设计模式系列。 showImg(https://segmentfault.com/img/bVbt7uw?w=800&h=600); 单例模式：限制类实例化次数只能一次，一个类只...

xialong 2019-08-23 18:13 评论0 收藏0