本文實(shí)例講述了JavaScript模塊模式。分享給大家供大家參考，具體如下：

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

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

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

經(jīng)典的模塊模式模板

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 );
  }
 };
})();

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

基本模式擴(kuò)展

Import mixins

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

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

Module exports

有時(shí)候不僅僅使用全局變量，而且也想聲明一個(gè)自己的全局變量，這可以通過匿名函數(shù)的return value輕松實(shí)現(xiàn)。

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

高級(jí)擴(kuò)展

基于上面的基本模式，我們可以繼續(xù)擴(kuò)展。

Augmentation

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

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

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

Loose  Augmentation

上面的例子需要先有一個(gè)Module，然后在此基礎(chǔ)上增加新的特性。但有的時(shí)候，我們異步加載JS腳本，這樣就需要一個(gè)低耦合的模塊建立方法， 通過如下結(jié)構(gòu)便可實(shí)現(xiàn)。

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

Sub-modules

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

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

至此，我們簡單的介紹了模塊模式，該模式作為最經(jīng)典的JS模式，被各種JS框架廣泛使用。它使得你的代碼封裝性更強(qiáng)，結(jié)構(gòu)化更合理，更OOP。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論