JavaScript模塊模式的示例分析

這篇文章主要介紹了JavaScript模塊模式的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體如下：

在JS中沒有Class的概念，那么如何體現Object的Public和Private屬性呢，答案就是模塊模式（Module Pattern）。

JS中有一個顯著的特性： 匿名函數（anonymous function），通過匿名函數的建立和執行，匿名函數里的代碼就形成了一個閉包（closure），從而形成，封裝和控制一個對象的Private和Public的特性，避免了全局變量的泛濫和與其他腳本的沖突。

(function () {
  // 所有的變量和函數只在這個范圍內有效
  // 仍然可以使用全局變量
}());

經典的模塊模式模板

var myNamespace = (function () {
 var myPrivateVar, myPrivateMethod;
 // A private counter variable
 myPrivateVar = 0;
 // A private function which logs any arguments
 myPrivateMethod = function( foo ) {
   console.log( foo );
 };
 return {
  // A public variable
  myPublicVar: "foo",
  // A public function utilizing privates
  myPublicFunction: function( bar ) {
   // Increment our private counter
   myPrivateVar++;
   // Call our private method using bar
   myPrivateMethod( bar );
  }
 };
})();

通過閉包，可以看到，當我們使用myNamespace時，我們只能看到myPublic*的屬性和方法，而myPrivate*的屬性和方法是無法直接訪問的。

基本模式擴展

Import mixins

JS有一個重要特性叫隱式全局變量，也就是說無論什么時候，JS解釋器都對一個變量尋找var聲明，如果沒有找到，就視為這個變量時全局變量。這樣看起來在閉包中使用全局變量時很容易的事，但同時很容易造成代碼的混亂。好在匿名函數也可以接收參數，這樣通過參數傳遞，我們可以把想使用的全局變量import到匿名函數中，從而提供一個更清晰干凈的使用方法。

(function ($, YAHOO) {
  // 這樣就可以訪問jQuery (as $) 和 YAHOO 庫
}(jQuery, YAHOO));

Module exports

有時候不僅僅使用全局變量，而且也想聲明一個自己的全局變量，這可以通過匿名函數的return value輕松實現。

var MODULE = (function () {
  var my = {},
    privateVariable = 1;
  function privateMethod() {
    // ...
  }
  my.moduleProperty = 1;
  my.moduleMethod = function () {
    // ...
  };
  return my;
}());

高級擴展

基于上面的基本模式，我們可以繼續擴展。

Augmentation

基本模塊模式的限制是我們必須把整個模塊放在一個file里，那么當需要把一個模塊分散到多個文件時，怎么辦呢？

一個號辦法就是augment modules。我們首先輸入module，然后增加屬性方法，然后再輸出。例子如下

var MODULE = (function (my) {
  my.anotherMethod = function () {
    // added method...
  };
  return my;
}(MODULE));

Loose  Augmentation

上面的例子需要先有一個Module，然后在此基礎上增加新的特性。但有的時候，我們異步加載JS腳本，這樣就需要一個低耦合的模塊建立方法， 通過如下結構便可實現。

var MODULE = (function (my) {
  // add capabilities...
  return my;
}(MODULE || {}));

Sub-modules

可以基于Module建立Sub modules，這個非常簡單，例子如下：

MODULE.sub = (function () {
  var my = {};
  // ...
  return my;
}());

至此，我們簡單的介紹了模塊模式，該模式作為最經典的JS模式，被各種JS框架廣泛使用。它使得你的代碼封裝性更強，結構化更合理，更OOP。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript模塊模式的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!