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

創(chuàng)新互聯(lián)2013年至今，先為曲靖等服務(wù)建站，曲靖等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為曲靖企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

具體如下：

在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è)非常簡(jiǎn)單，例子如下：

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript模塊模式的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!