首頁 > web前端 > js教程 > Javascript中關於模組化理解的實例

Javascript中關於模組化理解的實例

黄舟
發布: 2017-10-31 09:42:34
原創
1550 人瀏覽過

原始時代: script標籤引入javascript檔案

-------- html -------
<p id="result"></p>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" src="sum.js"></script>
<script type="text/javascript" src="main.js"></script>
-------add.js------
function add(a, b){ return a + b ;}
------ sum.js -----
function sum(n){
   return n + add(1, 2);
}
----- main.js ----
document.getElementById(&#39;result&#39;).innerHTML = sum(3);
登入後複製

 這種方式缺乏依賴解析,全域變數空間污染,而且要保證檔案引入的順序,管理比較混亂

原始時代: 模組物件和IIFE模式

#透過使用模組物件和立即呼叫的函數表達式(IIFE) ,我們可以減少對全域作用域的污染。在這種方法中,我們只向全域作用域公開一個物件。該物件包含了我們在應用程式中需要的所有方法和值。

例如只向全局作用域公开了 App 对象
-------- html -------
<p id="result"></p>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" src="sum.js"></script>
<script type="text/javascript" src="main.js"></script>
------- app.js -------
var App = {};
------- add.js -------
(function(){
    App.add = function(a, b){
       return a + b;
   }
})();
------- sum.js -------
(function(){
    App.sum= function(n){
       return App.add(1, 2) + n;
   }
})();
------- main.js -------
(function(app){
   document.getElementById(&#39;result&#39;).innerHTML = app.sum(3);
})(App);
登入後複製

 可以看到,除了app.js 以外,其他每個檔案都被封裝成了IIFE 格式

 依舊存在缺乏依賴解析的問題,還是有1個全域變量,而不是要幹掉全部的全域變數

過渡時代:CommonJS

CommonJS 不是一個JavaScript 函式庫。它是一個標準化組織。它就像 ECMA 或 W3C 一樣。 ECMA 定義了 JavaScript 的語言規範。 W3C定義了 JavaScript web API ,例如 DOM 或 DOM 事件。 CommonJS 的目標是為 web 伺服器、桌面和命令列應用程式定義一套通用的 API 。

CommonJS 也定義了模組 API 。因為在伺服器應用程式中沒有 HTML 頁面和 </script><script> 標籤,所以為模組提供一些清晰的 API 是很有意義的。模組需要被公開(**export**)以供其它模組使用,並且可以存取(**import**)。它的導出模組語法如下:

---------------- add.js  --------------------
module.exports = function add(a, b){
  return a+b;
}
---------------- sum.js  --------------------
var add = require(&#39;./add&#39;);
module.exports  = function sum(n){
     return add(1, 2) + n;
}
---------------- main.js  --------------------
var sum = require(&#39;./sum&#39;);
document.getElementById(&#39;result&#39;).innerHTML = sum(3);
登入後複製

CommonJs雖然解決的依賴問題,但是CommonJs的問題在於它是同步的,var sum = require('./sum'); 時 

 sum = require(&#39;./sum&#39;);时,系统将暂停,直到模块准备(ready)完成,这意味着当所有的模块都加载时,这一行代码将阻塞浏览器进程,
因此,这可能不是为浏览器端应用程序定义模块的最佳方式
登入後複製

非同步模組時代: AMD

define([‘add’, ‘sum’], function(add, sum){
  document.getElementById.innerHTML = sum(3);
});
登入後複製

define 函數(或關鍵字)將依賴項清單和回呼函數作為參數。回調函數的參數與陣列中的依賴是相同的順序。這相當於導入模組。並且回呼函數傳回一個值,也就是你導出的值。

CommonJS 和 AMD 解決了模組模式中剩下的兩個問題:依賴解析 和 全域作用域污染 。我們只需要處理每個模組或每個檔案的依賴關係就可以了,兵器不再有全域作用域污染。

AMD的良好實作: RequireJS #依賴注入

##RequireJS 是JavaScript 模組載入器(module loader) 。它可以根據需要非同步載入模組,儘管 RequireJS 的名字中含有 require,但是它的目標卻並非要去支援 CommonJS 的 require 語法。使用 RequireJS,可以寫出 AMD 風格的模組。

-------------------- html ----------------------
<p id="result"></p>
<!-- 入口文件 -->
<script data-main="main" src="require.js"></script>
-------------------- main.js ----------------------
define([&#39;sum&#39;], function(sum){
  document.getElementById(&#39;result&#39;).innerHTML = sum(3);
})
-------------------- sum.js ----------------------
define([&#39;add&#39;], function(add)){
   var sum = function(n){
       return add(1,2) + n;
   }
   return sum;
})
-------------------- add.js ----------------------
// add.js
define([], function(){
   var add = function(a, b){
      return a + b;
   };
   return add;
});
登入後複製

瀏覽器載入 

index.html

,而 index.html 又載入 require.js 。剩下的檔案及其相依性都是由

require.js

 負責載入。 RequireJS 和 AMD 解決了我們以前遇到的所有問題。然而,它也帶來了一些不那麼嚴重的問題:1.AMD 的語法過於冗餘。因為所有東西都封裝在 

define

 函數中

2.陣列中的依賴列表必須與函數的參數列表相符。如果存在許多依賴項,則很難維護依賴項的順序3.在目前瀏覽器下(HTTP 1.1),載入許多小檔案會降低效能

模組打包器: 

Browserify

可以在瀏覽器中使用CommonJS 模組,透過 Browserify 遍歷程式碼的依賴樹,並將依賴樹中的所有模組打包成一個檔案。

有別於RequireJS ,Browserify 是命令列工具,需要依賴NPM 環境,

npm install -g browserify
登入後複製
---------------- html.js  --------------------

---------------- add.js -------------------- module.exports = function add(a, b){ return a+b; } ---------------- sum.js -------------------- var add = require(&#39;./add&#39;); module.exports = function sum(n){ return add(1, 2) + n; } ---------------- main.js -------------------- var sum = require(&#39;./sum&#39;); document.getElementById(&#39;result&#39;).innerHTML = sum(3); 命令: browserify main.js -o bundle.js
登入後複製
 困惑的時代: UMD

# UMD 是一套用來辨識目前環境支援的模組風格的if/else 語句

// UMD 风格编写的 sum 模块
//sum.umd.js
(function (root, factory) {
    if (typeof define === &#39;function&#39; && define.amd) {
        // AMD
        define([&#39;add&#39;], factory);
    } else if (typeof exports === &#39;object&#39;) {
        // Node, CommonJS-like
        module.exports = factory(require(&#39;add&#39;));
    } else {
        // Browser globals (root is window)
        root.sum = factory(root.add);
    }
}(this, function (add) {
    //  private methods
    //  exposed public methods
    return function(n) {
      return add(1,2) + n;
    }
}));
登入後複製
無論是JavaScript 全域模組對象,還是CommonJS 或是AMD 更是UMD,都太麻煩了,額外增加了很多工作量,不容易維護。

### 光明的時代:ES6模組語法############ES6 用 ###import### 和 ###export### 關鍵字來導入和導出模組###
---------------- main.js ---------------
import sum from &#39;./sum&#39;;
document.getElementById(&#39;result&#39;).innerHTML = sum(3);
---------------- sum.js ---------------
import add from &#39;./add&#39;;
export default function sum(n){
   return  add(1, 2) + n;
};
---------------- add.js ---------------
export default function add(a, b){
   return a + b;
};
登入後複製
###ES6 模組語法是簡潔的,雖然目前瀏覽器並未全部支持,但可以使用一些工具(babel)來轉化它########### #工程化的時代: Webpack##########

虽然gulp、grunt都号称是工程化开发工具,,但个人感觉他们处理的东西还是比较基础,对于模块依赖打包来说,支持不是非常好,反正我是不喜欢gulp.

Webpack 是一个 模块打包器,就像 Browserify 一样,它会遍历依赖树,然后将其打包到一到多个文件。

它与Browserify 不同之处就是 可以处理 CommonJS 、 AMD 和 ES6 模块,并且 Webpack 还有更多实用的东西,比如 代码分离、加载器、插件

简洁的时代:Rollup

rollup 只会将需要的函数包含到打包文件中,从而显著减少打包文件大小

--------------- add.js -----------------
let add = (a,b) => a + b;
let sub = (a,b) => a - b;
export { add, sub };
--------------- sum.js -----------------
import { add } from &#39;./add&#39;;
export default (n) => {return add(1, 2) + n};
--------------- main.js ----------------
import sum from &#39;./sum&#39;;
document.getElementById(&#39;result&#39;).innerHTML = sum(3);

命令: rollup main.js -o bundle.js
--------------- boundle.js ----------------
// bundle.js
let add = (a,b) => a + b;
var sum = (n) => {return add(1, 2) + n};
document.getElementById("answer").innerHTML = sum(3);
登入後複製

发现 add.js的 sub() 函数并没有包含在这个打包文件中,因为没有引用它。

以上是Javascript中關於模組化理解的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板