JavaScript设计模式阅读更多文章查看本专栏设计模式第一篇:创建型设计模式1、简单工厂模式简单工厂模式:又叫静态工厂方法,有一个工厂对象决定创建某一种产品对象类的实例。主要用于创建同一类对象。根据现有的需求选择不同的东西。// 简单的工厂模式var redBall = function () { console.log(‘redBall’)};var greenBall = function () { console.log(‘greenBall’)};var blackBall = function () { console.log(‘blackBall’)};var blueBall = function () { console.log(‘blueBall’)};//工厂函数var ballFactory = function (type) { switch (type) { case ‘red’: return new redBall(); break; case ‘green’: return new greenBall(); break; case ‘black’: return new blackBall(); break; case ‘blue’: return new blueBall(); break; }}通过一个工厂产生多个同类的,或者有相同属性但是也存在差异的产品。function createBook(name,time,type) { var t = new Object(); t.name = name; t.time = time; t.type = type; return t;}function createBall(type,text) { var t = new Object(); t.content = text; t.show = function () { // do something } switch (type) { case ‘red’: // different Part break; case ‘green’: // different Part break; case ‘black’: // different Part break; case ‘blue’: // different Part break; }}和类的区别:类是将初始的东西给你,然后你自己去对相应的需求进行添加实例方法。而工厂是根据你需要的方法直接生成好给你。好处,如果有大量相同的含有特殊功能的实例存在,可以通过简单工厂增加复用性。核心:根据情况的不同选择不同的情况进行处理,像是一个封装型的’if else’。2、工厂方法模式工厂方法模式:又称为工厂模式,也叫虚拟构造器模式或者多态工厂模式。它属于类创建型模式。通过对产品类的抽象使其创建业务,只要负责用于创建多类的实例。将实际创建对象的工作推迟到了子类当中。// 类的安全模式var Factory = function (type, content) { if(this instanceof Factory){ return new thistype; }else{ return new Factory(type, content); }};// 创建不同类型基类的实现Factory.prototype={ Java:function (content) { this.content = content; }, PHP:function (content) { this.content = content; }, Python:function (content) { this.content = content; }, JavaScript:function (content) { this.content = content; },}3、抽象工厂模式通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例。用于产生类簇。创建一个类,类里面拥有许多抽象的类,抽象的类定义了同类的类的结构。在使用的时候将抽象的类进行继承。/** * 实现subType类对工厂类中的superType类型的抽象类的继承 * @param subType 要继承的类 * @param superType 工厂类中的抽象类type */const VehicleFactory = function(subType, superType) { if (typeof VehicleFactory[superType] === ‘function’) { function F() { this.type = ‘车辆’ } F.prototype = new VehicleFactorysuperType subType.constructor = subType subType.prototype = new F() // 因为子类subType不仅需要继承superType对应的类的原型方法,还要继承其对象属性 } else throw new Error(‘不存在该抽象类’)}VehicleFactory.Car = function() { this.type = ‘car’}VehicleFactory.Car.prototype = { getPrice: function() { return new Error(‘抽象方法不可使用’) }, getSpeed: function() { return new Error(‘抽象方法不可使用’) }}const BMW = function(price, speed) { this.price = price this.speed = speed}VehicleFactory(BMW, ‘Car’) // 继承Car抽象类BMW.prototype.getPrice = function() { // 覆写getPrice方法 console.log(BWM price is ${this.price})}BMW.prototype.getSpeed = function() { console.log(BWM speed is ${this.speed})}const baomai5 = new BMW(30, 99)// baomai5.getPrice() // BWM price is 30// baomai5 instanceof VehicleFactory.Car // true4、建造者模式将一个复杂对象的构建层与其表示层相互分离,同样的构造过程可采用不同的表示。关注产生过程,将对象的创建分为模块化创建,自定义度变高。建造一个电脑:// 构建基本主体const basicComputer = function () {}basicComputer.prototype = { // 自定义的一些原型方法}// 构建CPU模块const cpu = function (type) { this.type = type;}cpu.prototype = { // 自定义的一些原型方法}// 构建显卡模块const graphicsCard = function (type) { this.type = type;}graphicsCard.prototype = { // 自定义的一些原型方法}// 构建屏幕模块const screen = function (type) { this.type = type;}screen.prototype = { // 自定义的一些原型方法}const computer = function () { const t = new basicComputer(); t.cpu = new cpu(); t.graphicsCard = new graphicsCard(); t.screen = new screen(); return t;}5、原型模式用原型实例指向创建对象的类,使用与创建新的对象的类共享原型对象的类型以及方法。基于继承,将复杂的放置在函数中,简单的共同的放置到一个构造函数中。在使用的时候可以对原型进行拓展。代码与继承类似,但是核心就是将简单的共有的放置到构造函数中,与类的思想类似。6、单例模式只允许实例化一次的类。在使用的时候可以用于创建代码库,创建命名空间。单例模式实现代码库,产生命名空间,一次只能实例化一个。// 一个命名空间const A = { fun_1: { fun_1_1:function () { // do something }, }, fun_2: { // do something }, fun_3:function () { // do something }}// 空间类可为一个代码块,也可以为更多一层次的代码库(命名空间)