JavaScript——前端模塊化開發

時間 2019-11-08

標籤 javascript 前端模塊化開發欄目 JavaScript 简体版

原文原文鏈接

1、前端模塊化規範

2、CommonJS

　　一、CommonJS定義的模塊分爲:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}

　　　　1.一、require()：用來引入外部模塊；　　　

　　　　1.二、exports：對象用於導出當前模塊的方法或變量，惟一的導出口；

　　　　1.三、module：對象就表明模塊自己。

　　二、NodeJS中使用CommonJS模塊管理

　　　　2.一、模塊定義：根據commonJS規範，一個單獨的文件是一個模塊，每個模塊都是一個單獨的做用域，也就是說，在該模塊內部定義的變量，沒法被其餘模塊讀取，除非爲global對象的屬性。

　　　　　　2.1.一、說明：模塊只有一個出口，module.exports對象，咱們須要把模塊但願輸出的內容放入該對象。

　　　　　　2.1.二、common.js模塊定義

let message="Hello CommonJS!";　　
module.exports.message=message;　　
module.exports.add=(m,n)=>console.log(m+n);

　　　　2.二、模塊依賴

　　　　　　2.2.一、說明：加載模塊用require方法，該方法讀取一個文件而且執行，返回文件內部的module.exports對象。

　　　　　　2.2.二、app.js 模塊依賴

var common=require("./common");　　//讀取common.js文件
console.log(common.message); 　　　//調用　
common.add(100,200);

　　　　2.三、測試運行

　　　　　　安裝好node.JS

　　　　　　打開控制檯，能夠使用cmd命令

　　三、在瀏覽器中使用CommonJS 模塊管理

　　　　3.一、因爲瀏覽器不支持 CommonJS 格式。要想讓瀏覽器用上這些模塊，必須轉換格式。

　　　　例：建立index.html直接引用app.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script src="js/app.js"></script>
</body>
</html>

　　　　報錯，提示require沒有被定義

　　　　3.二、方法：使用browserify，能夠把nodejs的模塊編譯成瀏覽器可用的模塊，解決上面提到的問題。本文將詳細介紹Browserify實現Browserify是目前最經常使用的CommonJS格式轉換的工具

　　　　　　3.2.一、安裝browserify

　　　　　　　　　　使用下列命令安裝browserify

npm install -g browserify

　　　　　　3.2.二、轉換

　　　　　　　　　　使用下面的命令，就能將app.js轉爲瀏覽器可用的格式apps.js

browserify app.js > apps.js

生成apps.js文件html

apps.js文件內容：前端

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
var common=require("./common");
console.log(common.message);
common.add(100,200);
},{"./common":2}],2:[function(require,module,exports){

let message="Hello CommonJS!";
module.exports.message=message;
module.exports.add=(m,n)=>console.log(m+n);
},{}]},{},[1]);

轉換的apps.js文件內容

index.html引用apps.jsnode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script src="js/apps.js"></script>
</body>
</html>

運行結果：jquery

3、AMD(Asynchromous Module Definition) 異步模塊定義

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出es6

AMD異步加載模塊。它的模塊支持對象函數構造器字符串 JSON等各類類型的模塊。npm

適用AMD規範適用define方法定義模塊。數組

一、定義模塊：define(id,dependencies,factory)

——id 可選參數，用來定義模塊的標識，若是沒有提供該參數，腳本文件名（去掉拓展名）

——dependencies 是一個當前模塊用來的模塊名稱數組

——factory 工廠方法，模塊初始化要執行的函數或對象，若是爲函數，它應該只被執行一次，若是是對象，此對象應該爲模塊的輸出值。

二、加載模塊：require([dependencies], function(){})；

require()函數接受兩個參數：

——第一個參數是一個數組，表示所依賴的模塊；

——第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就能夠使用這些模塊

三、簡單示例

模塊定義：amd.js

//定義模塊
define(function(){
    return{
        message:"Hello AMD!",
        add:function(n1,n2){
            return n1+n2;
        }
    }
})

模塊依賴：app.js

require(['amd'],function(amd){
    console.log(amd.message);
    console.log(amd.add(100,200))
})

下載：require.js

官網：http://www.requirejs.cn

瀏覽器調用：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script src="AMD/require.js" data-main="AMD/app.js"></script>
</body>
</html>

結果：

四、依賴第三方的庫（AMD依賴jQuery）

導入jQuery

app.js代碼

require(['amd','jquery'],function(amd){
    console.log(amd.message);
    console.log(amd.add(100,200));
    $("body").text("引用了第三方插件")
})

結果：

3、CMD（Common Module Definition）通用模塊定義

實例：瀏覽器

導入Seajs庫app

去官網下載最新的seajs文件，http://seajs.org/docs/#downloads異步

目錄結構：

定義模塊：

cmd.js

define(function(require,exports,module){
    var obj={
        msg:"Hello SeaJS！",
        show:()=>console.log(obj.msg)
    }
    exports.cmd=obj;
})

導入模塊：

app.js

seajs.config({
    //Sea.js 的基礎路徑（修改這個就不是路徑就不是相對於seajs文件了）
    base: './js/',
    //別名配置（用變量表示文件，解決路徑層級過深和實現路徑映射）
    alias: {
        'jquery': 'CMD/jquery'
    },
    //路徑配置（用變量表示路徑，解決路徑層級過深的問題）
    paths: {
        'm': 'CMD/'
    }
})

seajs.use(["m/cmd.js",'jquery'],function(cmd,$){
    cmd.cmd.show();
    $("body").text("Hello CMD!");
})

瀏覽器調用：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script src="js/sea.js"></script>
    <script src="js/CMD/app.js"></script>
</body>
</html>

結果：

4、原生模塊化（ECMAScript模塊化）

實例：

目錄結構：

定義模塊：

es6.js

//定義模塊
export let msg="Hello Es6（原生模塊）";
export function add(n,m){
    return n+m;
}

導入模塊：

es6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <script type="module">
        //導入
        import {msg,add} from './es6/es6.js';
        console.log(add(100,200));
        console.log(msg);
    </script>
</body>
</html>

結果：

5、UMD（通用的模塊定義）

UMD（Universal Module Definition）通用的模塊定義、UMD等於CommonJS加上AMD。UMD的工做其實就是作了一個判斷：

- 先判斷當前環境對NodeJs支持的模塊是否存在，存在就用Node.js模塊模式（exports）。
- 若是不支持，就判斷是否支持AMD（define），存在就使用AMD方式加載。

CommonJs和AMD風格同樣流行，彷佛缺乏一個統一的規範。因此人們產生了這樣的需求，但願有支持兩種風格的「通用」模式，因而通用模塊規範（UMD）誕生了。

UMD示例

一、定義模塊Utils.js

(function (global, factory) {
    if (typeof define === 'function' && (define.amd || define.cmd)) {
        // AMD規範. 註冊一個匿名模塊，兼容AMD與CMD
        define([], factory);
    } else if (typeof module === 'object' && module.exports) {
        //CommonJS規範，NodeJS運行環境
        module.exports = factory();
    } else {
        //瀏覽器全局對象註冊
        global.UMD = factory();
    }
}(this, function () {
    var msg = "UMD!";
    //返回要導出的對象
    return {
        show: function () {
            console.log("Hello " + msg);
        }
    };
}));

二、在CommonJS規範下運行

useUtils.js

var utils=require('./Utils.js');
utils.show();

運行結果：

在AMD規範下運行

app.js

require(['amd','jquery','../Utils.js'],function(amd,$,u){
    console.log(amd.message);
    console.log(amd.add(100,200));
    $("body").text("引用了第三方插件");
    u.show();
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="require.js" data-main="app.js"></script>
</body>
</html>

運行結果：

三、在CMD規範下運行

app.js

seajs.use(["cmd.js",'jquery','../Utils.js'],function(cmd,$,u){
    cmd.cmd.show();
    $("body").text("Hello CMD!");
    u.show();
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="sea.js"></script>
    <script src="app.js"></script>
</body>
</html>

運行結果：

四、原生瀏覽器環境運行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <script src="../Utils.js"></script>
    <script>
        UMD.show();
    </script>
</body>
</html>