[译] 你应相识的4种JS设想形式

  • 2016-10-07

每一个JS开辟者都力图写出可庇护、复用性和可读性高的代码。跟着运用不断扩大,代码组织的合理性也越来越主要。设想形式为特定环境下的罕见题目供应了一个组织组织,关于战胜这些应战起到至关主要的作用。

JavaScript 网页开辟者在建立运用时,频仍地跟设想形式打交道(甚至在不知情的情况下)。

只管特定环境下有林林总总的设想形式,JS 开辟者照样倾向于运用一些习惯性的形式。

在这篇文章中,我将议论这些罕见的设想形式,展出优化代码库的要领,并深切解读JavaScript的内部构件。

本文议论的设想形式包括这几种:

  • 模块设想形式

  • 原型形式

  • 视察者形式

  • 单例形式

只管每种形式都包括许多属性,这里我强调以下几点:

  1. 上下文: 设想形式的运用场景

  2. 题目: 我们尝试处理的题目是什么?

  3. 处理要领: 运用设想形式如何处理我们提出的题目?

  4. 实行: 实行方案看起来如何?

模块设想形式

JS模块化是运用最广泛的设想形式,用于坚持特别的代码块与别的组件之间互相自力。为支撑组织优越的代码供应了松耦合。

关于熟习面向对象的开辟者来讲,模块就是JS的 “类”。封装是“类”的浩瀚长处之一,可以确保它自身的状况和行动不被别的的类接见到。模块设想形式有公有和私有两种接见级别(除此以外,另有比较少为人知的庇护级别、特权级别)。

斟酌到私有的作用域,模块应当是一个马上挪用函数(IIFE) ,也就是说,它是一个庇护其私有变量和要领的闭包。(然则,它返回的却不是一个函数,而是一个对象)。
它的写法就是如许的:

 (function() {

    // declare private variables and/or functions

    return {
      // declare public variables and/or functions
    }

})(); 

我们在返回一个对象之前,先初始化一下私有的变量和要领。由于作用域差别,闭包表面的代码是无法接见到闭包内的私有变量的。一同来看下更详细的完成要领:

 var HTMLChanger = (function() {
  var contents = 'contents'

  var changeHTML = function() {
    var element = document.getElementById('attribute-to-change');
    element.innerHTML = contents;
  }

  return {
    callChangeHTML: function() {
      changeHTML();
      console.log(contents);
    }
  };

})();

HTMLChanger.callChangeHTML();       // Outputs: 'contents'
console.log(HTMLChanger.contents);  // undefined 

请注意 callChangeHTML 是在返回的对象中绑定的,因而可以接见到 HTMLChanger 这个定名空间内的变量。然则,在模块表面,是不能接见到闭包内里的 contents 的。

展现性模块形式

模块形式的另一种变体称为 展现性模块形式,它主如果为了在坚持封装性的同时,展现在对象字面量中返回的特定的变量和要领。直接的完成体式格局相似如许:

 var Exposer = (function() {
  var privateVariable = 10;

  var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
  }

  var methodToExpose = function() {
    console.log('This is a method I want to expose!');
  }

  var otherMethodIWantToExpose = function() {
    privateMethod();
  }

  return {
      first: methodToExpose,
      second: otherMethodIWantToExpose
  };
})();

Exposer.first();        // Output: This is a method I want to expose!
Exposer.second();       // Output: Inside a private method!
Exposer.methodToExpose; // undefined 

只管如许看起来越发简约,但它是有显著不足的 — 不能援用私有变量。这会给单元测试带来肯定的应战。相似地,公有行动也是不可重写的。

原型设想形式

JS开辟者要么把 原型原型继续 互相殽杂,要么在他们的代码内里直接运用原型。原型设想形式依靠于JavaScript原型继续. 原型形式主要用于为高机能环境建立对象。

被建立的对象是从传下来的原对象克隆(浅克隆)出来的。原型形式的一种运用场景,是实行一个扩展性的数据库操纵来建立一个对象,把该对象用于运用的其他层面。假如其他流程须要用到这个对象,我们不须要大量地操纵数据库,只需克隆一下之前建立的对象就可以了。与其本质性地操纵数据库,不如从之前建立的对象克隆一个更具上风。

《[译] 你应相识的4种JS设想形式》

Wikipedia 原型设想形式图解

UML 形貌了原型交互是如何被用于克隆详细的代码实行方案的。

要克隆一个对象,必需存在一个组织器来实例化第一个对象。接下来,经由过程运用 prototype 的变量和要领来绑定对象的组织。一同来看下基础的示例:

 var TeslaModelS = function() {
  this.numWheels    = 4;
  this.manufacturer = 'Tesla';
  this.make         = 'Model S';
}

TeslaModelS.prototype.go = function() {
  // Rotate wheels
}

TeslaModelS.prototype.stop = function() {
  // Apply brake pads
} 

组织器 TeslaModelS 许可建立一个简朴的 TeslaModelS 对象。关于一个新建立的 TeslaModelS 对象,它将坚持组织器初始化的状况。另外,它也很简朴的持有 gostop 这两个要领,由于这两个要领是在 prototype 声明的。在原型上拓展要领,还可以如许写:

 var TeslaModelS = function() {
  this.numWheels    = 4;
  this.manufacturer = 'Tesla';
  this.make         = 'Model S';
}

TeslaModelS.prototype = {
  go: function() {
    // Rotate wheels
  },
  stop: function() {
    // Apply brake pads
  }
} 

展现性原型形式

相似于模块形式,原型形式也有一个 展现性形式展现性原型形式 经由过程返回一个对象字面量,对公有和私有的成员举行封装。

由于我们返回的是一个对象,我们将在原型对象上增添 function 的前缀。经由过程对以上例子举行改写,我们可以挑选在当前的 prototype 暴露哪些要领或变量,以此来庇护它们的接见层级。

 var TeslaModelS = function() {
  this.numWheels    = 4;
  this.manufacturer = 'Tesla';
  this.make         = 'Model S';
}

TeslaModelS.prototype = function() {

  var go = function() {
    // Rotate wheels
  };

  var stop = function() {
    // Apply brake pads
  };

  return {
    pressBrakePedal: stop,
    pressGasPedal: go
  }

}(); 

请注意 stopgo 两个要领是被离隔的,由于他们在所返回的对象作用域以外。由于 JavaScript 自身支撑原型继续,也就没必要重写基础的功用了。

视察者设想形式

许多时刻,当运用的一部份转变了,另一部份也须要响应更新。在 AngularJs 内里,假如 $scope 被更新,就会触发一个事宜去关照其他组件。连系视察这形式就是:假如一个对象转变了,它只需派发 broadcasts 事宜关照依靠的对象它已转变了则可。

又一个典范的例子就是 model-view-controller (MVC) 架构了;当 model 转变时, 更新响应的 view。如许做有一个优点,就是从 model 上解耦出 view 来削减依靠。

![视察这设想形式](<html>
<head><title>502 Bad Gateway</title></head>
<body bgcolor=”white”>
<center><h1>502 Bad Gateway</h1></center>

<center>nginx/1.9.15</center>

</body>

</html>

)

Wikipedia 视察者设想形式

如 UML 图表所示,subjectobserver, and concrete objects 是必不可少的。 subject 包括对每一个详细视察者的援用,以便通报修改信息。视察者自身是一个笼统的类,使得详细的视察者可以实行通信要领。

一同来看下 AngularJS 的示例,在事宜管理上运用了视察这形式。

 // Controller 1
$scope.$on('nameChanged', function(event, args) {
    $scope.name = args.name;
});

...

// Controller 2
$scope.userNameChanged = function(name) {
    $scope.$emit('nameChanged', {name: name});
}; 

运用视察者形式,主要的一点就是要辨别自力的对象或许 subject(主体)

在看到视察者形式浩瀚长处的同时,我们必需注意到它的一个瑕玷:跟着视察者数目标增添,运用的机能会大大下降。人人都比较熟习的视察者就是 watchers 。 在AngularJS中,我们可以 watch 变量、要领和对象。$digest 轮回更新,当一个作用域内对象被修改时,它就把新的值通知每一个监听者。

我们可以在JS中建立本身的主体和视察者。一同来看下下面的代码是如何运转的:

 var Subject = function() {
  this.observers = [];

  return {
    subscribeObserver: function(observer) {
      this.observers.push(observer);
    },
    unsubscribeObserver: function(observer) {
      var index = this.observers.indexOf(observer);
      if(index > -1) {
        this.observers.splice(index, 1);
      }
    },
    notifyObserver: function(observer) {
      var index = this.observers.indexOf(observer);
      if(index > -1) {
        this.observers[index].notify(index);
      }
    },
    notifyAllObservers: function() {
      for(var i = 0; i < this.observers.length; i++){
        this.observers[i].notify(i);
      };
    }
  };
};

var Observer = function() {
  return {
    notify: function(index) {
      console.log("Observer " + index + " is notified!");
    }
  }
}

var subject = new Subject();

var observer1 = new Observer();
var observer2 = new Observer();
var observer3 = new Observer();
var observer4 = new Observer();

subject.subscribeObserver(observer1);
subject.subscribeObserver(observer2);
subject.subscribeObserver(observer3);
subject.subscribeObserver(observer4);

subject.notifyObserver(observer2); // Observer 2 is notified!

subject.notifyAllObservers();
// Observer 1 is notified!
// Observer 2 is notified!
// Observer 3 is notified!
// Observer 4 is notified! 

宣布、定阅形式

然则,宣布、定阅形式是采纳一个话题来绑定宣布者和定阅者之间的关联,定阅者吸收事宜关照,宣布者派发事宜。该事宜体系支撑定义特别运用的事宜,可以通报包括定阅者自身须要的自定义参数。如许做主如果为了防止定阅者和宣布者之间的依靠。

这里有别于视察者形式的是,任何定阅者都可以经由过程适当的事宜处理器来注册并接收宣布者播送的关照。

许多开辟者挑选把 宣布定阅形式视察者形式 连系起来用,只管他们终究的目标只要一个。宣布定阅形式中的定阅者是经由过程一些通信序言被示知的,而视察者则是经由过程实行事宜处理器来取得音讯关照。

在 AngularJs, 定阅者运用 $on(event、cbk) 来定阅一个事宜,宣布者则运用$emit(‘event’, args) 或许 $broadcast(‘event’, args) 来宣布一个事宜。

单例形式

单例形式只许可实例化一个对象,然则雷同的对象,会用许多个实例。单例形式限制着客户端建立多个对象。第一个对象建立后,就返回实例自身。

单例形式比较罕用,很难找到现实开辟的例子。运用一个办公室打印机的例子吧。假定办公室有10个人,他们都用到打印机,10台电脑同享一部打印机(一个实例)。经由过程分享一部打印机,他们同享雷同的资本。

 var printer = (function () {

  var printerInstance;

  function create () {

    function print() {
      // underlying printer mechanics
    }

    function turnOn() {
      // warm up
      // check for paper
    }

    return {
      // public + private states and behaviors
      print: print,
      turnOn: turnOn
    };
  }

  return {
    getInstance: function() {
      if(!printerInstance) {
        printerInstance = create();
      }
      return printerInstance;
    }
  };

  function Singleton () {
    if(!printerInstance) {
      printerInstance = intialize();
    }
  };

})(); 

create 这个要领是私有的,由于我们不愿望它被外部职员接见到,然则,getInstance 要领是公有的。每一个办公职员都可以实例化一个 printer,只须要如许挪用一下:

 `var officePrinter = printer.getInstance();` 

单例形式在 AngularJS 相称盛行,最罕见的是作为 servicesfactories、和 providers。它们庇护状况,供应资本接见,建立两个实例挣脱一个同享的service/factory/provider

在多线程的运用中,当多个线程尝试去接见同个资本时,就会涌现 合作状况。单例形式会遭到合作状况的滋扰,比如在没有初始化实例的情况下,两个线程会建立两个对象,而不是返回一个实例。这与单例形式的目标是相悖的。因而,开辟者在多线程运用内里运用单例形式时,必需清晰同步性。

总结

设想形式常常用于比较大型的运用,想知道哪一种形式更具上风,来实践吧。

在构建任何运用之前,都应当周全地斟酌每一个角色,以及它们之间存在的关联。在回忆 模块形式原型形式视察者形式单例形式 以后,你应当可以辨别它们,并且在现实开辟中运用它们了。

    原文作者:grace_xhw
    原文地址: https://segmentfault.com/a/1190000007231454
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞