JavaScript之無題之讓人煩躁的模塊化

  我怎麼記得我好像寫過相關類型的文章,但是我找遍了我的博客沒有~那就再寫一遍吧,其實模塊化的核心內容也算不上是複雜,只不過需要整理一下,規劃一下罷了。嘻嘻。

  開始寫標題的時候我就在糾結一件事情,就是,先喫喜歡喫的,還是後喫喜歡喫的,翻譯過來就是我應該先寫CommonJS和ES6 Module,還是先寫CMD和AMD。嗯,我決定了,誰先做好了我就先喫誰

  其實模塊化的緣由很簡單,就一句話,不對,就一個詞,兩個字,分類。如果一定讓我在加一點,那應該是“隔離”。沒了~~但是這麼少不太好,我舉個可能不那麼恰當的例子吧。

  剛開始這個世界上只有三個人,起名字的時候會“刻意”的避開彼此已經叫過的名字,他們在一起生活,日子欣欣向榮,一片美好,對未來充滿了期待。

  時間飛逝,三個人變成了三十人,他們勉強還是住在一起,起名字的時候雖然費事一點,但是也還能不重複,日子還是欣欣向榮,一片美好,對未來充滿了期待。

  時間又飛逝,三十人變成了三百人,那這不太好管理了,於是三位首領就說,你們有領導能力的幾個人站出來,組成各自的部落,去吧,我相信你們可以的。於是每個部落住在一起,部落與部落之間的人可以重名,叫名字的時候再加上一個部落的名稱唄,嗯~又一片欣欣向榮。

  時間繼續飛逝,三百人變成了三千人,這三千人住在幾個大部落裏也很不方便,你拿我的蘋果,我偷了你得豬,這肯定不行,有礙於社會的穩定發展,於是三個創始者叫上部落的組長說,我們給每個人分一塊地,蓋一個房子,把三五個人分割成一個家庭,家庭之間由部落作爲紐帶,關聯彼此,在形式上又相互獨立,不可以隨便拿別家的蘋果。很完美~

  時間飛飛飛飛逝,三千人變成了三百萬人……我們需要法律了。

  OK,上面的小例子,人,就是函數,部落就是命名空間,房子就是IIFE,法律就是後續發展的模塊化規範。那麼我們依照上面的描述,如何轉換成代碼?

一、社會的起源與法律的雛形

  最開始的時候,瀏覽器只需要簡單的圖文展示就是可以了,沒什麼複雜的交互和邏輯的處理,所以,當我們只有三個人的時候,我們可以很自由,很隨意:

function a(){}

function b(){}

  隨着Web的發展,交互的增多,項目的擴大,很容易有人也聲明瞭同樣名稱的函數,於是紛爭開始了,那咋解決紛爭呢?嗯,命名空間也就是拆分部落,就像這樣:

var zaking1 = {
    a:function(){},
    b:function(){}
}
var zaking2 = {
    a:function(){},
    b:function(){}
}

  但是這樣並不能真正的解決問題,因爲雖然從形式上區分了部落,但是部落之間沒有任何的隔離,部落內部也是混亂的,所以各個首領就制定了一個方案,IIFE,利用閉包的特性,來實現數據的隔離,暴露出對外的入口:

var module = (function () {
    var name = "zaking";
    function getName() {
    console.log(name);
    }
    return { getName };
})();
module.getName();

  我們蓋好了房子,還給房子建好了可以出入的門,但是我怎麼邀請別人進來呢?

var module = (function (neighbor) {
    var name = "zaking";
    function getName() {
    console.log(name + "和鄰居:" + neighbor);
    }
    return { getName };
})("xiaowangba");
module.getName();

  傳個參數唄,這就是依賴注入。在這個階段,最有代表性的就是jQuery了,它的封閉性的核心實現,跟上面的代碼幾乎無異,我們可以看下jQuery的模塊的實現:

(function (global, factory) {
  factory(global);
})(typeof window !== "undefined" ? window : this, function (window, noGlobal) {
  if (typeof noGlobal === "undefined") {
    window.jQuery = window.$ = jQuery;
  }
  return jQuery;
});

  當然我這裏略了很多,你看它,無非就是一個閉包,傳入了window和jQuery本身,然後再綁定到window上,這樣,我們就只能訪問到暴露出來的$以及$上的方法和屬性,我們根本無法修改內部的數據。

  OK,到了這個階段,其實算是一個轉折點,我們有了初步的法律,還需要後續針對法律的完善,

二、法律的初現與CommonJs

  隨着社會的發展,出現一種規則已成必然,於是commonJs統領舉起模塊化的大旗,讓JavaScript邁向了另一個階段。commonJs最初由 JavaScript 社區中的 Mozilla 的工程師Kevin Dangoor在Google Groups中創建了一個ServerJs小組。該組織的目標是爲web服務器、桌面和命令行應用程序以及瀏覽器構建JavaScript生態系統。嗯,它的野心很大~,後來,他就就把ServerJs改成了commonJs,畢竟ServerJs的範圍有點小,commonJs更符合他們的初衷。

  而後,在同一年的年底,NodeJs出現了,Javascript不僅僅可以用於瀏覽器,在服務器端也開始攻城略地。NodeJs的初衷是基於commonJs社區的模塊化規範,但是NodeJs並沒有完全遵循於社區的一些腐朽過時的約束,它實現了自己的想法。

  commonJs規範的寫法,如果大家寫過NodeJs一定都有所瞭解,大概是這樣的:

// a.js
module.exports = 'zaking'
// b.js
const a = require("./a");
console.log(a); // zaking

  看起來挺簡單的,但是這裏隱藏了一些不那麼容易被理解的特性。

  在NodeJs中,一個文件就是一個模塊,有自己的作用域,在一個文件裏面定義的函數、對象都是私有的,對其他文件不可見。並且,當第一次加載某個模塊的時候,NodeJ會緩存該模塊,待再次加載的時候,會直接從模塊中取出module.exports屬性返回。比如:

// a.js
var name = "zaking";
exports.name = name;

// b.js
var a = require("./a.js");
console.log(a.name); // zaking
a.name = "xiaoba";
var b = require("./a.js");
console.log(b.name); // xiaoba

  誒?爲啥你寫的是“exports.”,不是module.exports?NodeJs在實現CommonJs規範的時候爲了方便,給每個模塊都提供了一個exports私有變量,指向module.exports。有一點要尤其注意,exports 是模塊內的私有局部變量,它只是指向了 module.exports,所以直接對 exports 賦值是無效的,這樣只是讓 exports 不再指向 module.exports了而已。

  我們回到上面的代碼,按理來說,我第二次引入的b的name應該是“zaking”啊。但是實際上,在第一次引入之後的引入,並不會再次執行模塊的內容,只是返回了緩存的結果。

  另外一個核心的點是,我們導入的是導出值的拷貝,也就是說一旦引入之後,模塊內部關於該值的變化並不會被影響。

// a.js
var name = "zaking";
function changeName() {
  name = "xiaowangba";
}
exports.name = name;
exports.changeName = changeName;

// b.js
var a = require("./a.js");
console.log(a.name); // zaking
a.changeName();
console.log(a.name); // zaking

  嗯,一切看起來都很不錯。

三、爭奇鬥豔,百家爭鳴

  在上一小節,我們簡單介紹了模塊化的始祖也就是CommonJs以及實現了該規範的NodeJs的一些核心內容。但是NodeJs的實現的一個關鍵的點是,它在讀取或者說加載模塊的時候是同步的,這在服務器沒什麼問題,但是對於瀏覽器來說,這個問題就很嚴重,因爲大量的同步模塊加載意味着大量的白屏等待時間。

  基於這樣的問題,從CommonJs中獨立出了AMD規範。

1、AMD規範與RequireJs

  AMD,即Asynchronous Module Definition,翻譯過來就是異步模塊化規範,它的主要目的就是解決CommonJs不能在瀏覽器中使用的問題。但是RequireJs在實現上,希望可以通喫,也就是可以在任何宿主環境下使用。

  我們先來看個例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
  <body></body>
  <script>
    require(["./a"]);
  </script>
</html>

  然後,我們的a.js是這樣的:

define(function () {
  function fun1() {
    alert("it works");
  }

  fun1();
});

  define用來聲明一個模塊,require導入。我們還可以這樣:

require(["./a"], function () {
  alert("load finished");
});

  導入前置依賴的模塊,在第二個參數也就是回調中執行。RequireJs會在所有的模塊解析完成後執行回調函數。就算你倒入了一個沒有使用的模塊,RequireJs也一樣會加載:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://requirejs.org/docs/release/2.3.6/comments/require.js"></script>
  <body></body>
  <script>
    require(["./a", "./b"], function (a, b) {
      a.fun1();
    });
  </script>
</html>

  然後分別是a.js和b.js:

// a.js
define(function () {
  function fun1() {
    alert("it works fun1");
  }

  return {
    fun1: fun1,
  };
});

// b.js
define(function () {
  function fun2() {
    alert("it works fun2");
  }

  return {
    fun2: fun2,
  };
});

  結果大家可以試一試~

  以上就是RequireJs的簡單用法,我們據此知道了兩個核心內容,RequireJs基於AMD規範,RequireJs會加載你引入的所有模塊,哪怕你並不會真的用到它。

2、CMD規範與SeaJs

  由於RequireJs的一些問題,又出現了基於CMD規範的SeaJs,SeaJs和RequireJs有一個最大的不同就是RequireJs希望可以通喫,但是SeaJs則更專注於瀏覽器,哦對了,CMD的全稱叫做:Common Module Definition,即通用模塊規範。

  SeaJs的簡單用法如下:

// 所有模塊都通過 define 來定義
define(function(require, exports, module) {

  // 通過 require 引入依賴
  var a = require('xxx')
  var b = require('yyy')

  // 通過 exports 對外提供接口
  exports.doSomething = ...

  // 或者通過 module.exports 提供整個接口
  module.exports = ...

})
// a.js
define(function(require, exports, module){
    var name = 'morrain'
    var age = 18

    exports.name = name
    exports.getAge = () => age
})
// b.js
define(function(require, exports, module){
    var name = 'lilei'
    var age = 15
    var a = require('a.js')

    console.log(a.name) // 'morrain'
    console.log(a.getAge()) //18

    exports.name = name
    exports.getAge = () => age
})

  上面的代碼是從網上抄的,大概說明白了基本的使用方法。我們可以看到,SeaJs的導入和導出的方式,跟NodeJs好像~~而SeaJs從書寫形式上,更像是CommonJs和AMD的結合。當然,我只是說書寫形式上。

  而AMD和CMD,RequireJs和SeaJs,都是由社區發起的,並沒有語言層面的規範,包括CommonJs以及NodeJs,所以,這個時代還是一個百花爭豔,沒有統一的時代,不過在現在,這些都不重要了。如果非要我說些什麼,那就是,忘記這兩個東西,去學下面的重點。

四、大一統

  百花爭豔的時代確實有些煩人,這個那個那個這個,又都不被官方認可,還好,官方終於還是出手了,ES6的出現,在語言層面上就提出了對於模塊化的規範,也就是ES6 Module。它太重要了,具體語法我就不多說了,文末的鏈接附上了阮一峯大神的《ES6入門指南》關於ES6 Module的地址。

  所以到了ES6的時候,你要學習的就是ES6 Module,NodeJs也在逐步實現對ES6 Module的支持。最終,秦始皇會一統天下,這是必然的結果。

  這篇文章到這裏就結束了,說實話,模塊化的問題和歷史由來已久,從萌芽到統一,至少十幾年的過程,而市面上也已有大量的文章介紹彼此的區別和各自的特點,我寫來寫去,也不過是複製一遍,毫無意義。

  但是我又想學一下模塊化,以及模塊化的歷史,額……,請原諒我的無知,所以纔有了這篇文章,但是寫着寫着,發現我能表達出來的東西並不多,因爲都是故事,都是歷史,並且對於未來的開發好像也沒什麼實際的意義和價值。

  所以,在如此糾結的心態下有了這篇文章,原諒我無知又想逼逼的心情吧。

  最後的最後,如果你想學習模塊化,在現階段,只需要去深入學習ES6 Module,和學習一下NodeJs的CommonJs,以及瞭解一下各模塊化的區別即可,因爲現在是即將統一,還未完全統一的時候。

 

參考資料:

  https://wiki.commonjs.org/wiki/CommonJS

  https://github.com/seajs/seajs/issues/242

  https://es6.ruanyifeng.com/#docs/module

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章