js模塊化和使用

時間 2019-11-16

原文原文鏈接

好久之前就知道js模塊化開發可使用require.js和sea.js，就一直沒去看看。最近在瞭解查看的，度一下require.js相關的博客和文章，寫得真是操蛋的疼，都是互相抄來抄去，博主應該都沒有本身實際去敲過，哪怕給我寫一個完整的簡單應用示例我均可以上手，結果把本身折騰得......後面也看來sea.js，簡單明瞭，上手容易多（主要是別人寫的博客文檔好）。

什麼是模塊化

關於這個概念仍是推薦閱讀阮一峯老師的博文javascript模塊化編程javascript

如下是則是從網上收集來概念：html

模塊化是指在解決某一個複雜問題或者一系列的雜糅問題時，依照一種分類的思惟把問題進行系統性的分解以之處理。模塊化是一種處理複雜系統分解爲代碼結構更合理，可維護性更高的可管理的模塊的方式。能夠想象一個巨大的系統代碼，被整合優化分割成邏輯性很強的模塊時，對於軟件是一種何等意義的存在。

（用本身的話來理解就是將js代碼規範管理起來以便更好的維護和使用）前端

CommonJS

CommonJS API定義不少普通應用程序（主要指非瀏覽器的應用）使用的API，從而填補了這個空白。它的終極目標是提供一個相似Python，Ruby和Java標準庫。這樣的話，開發者可使用CommonJS API編寫應用程序，而後這些應用能夠運行在不一樣的JavaScript解釋器和不一樣的主機環境中。

在兼容CommonJS的系統中，你可使用JavaScript開發如下程序：
(1).服務器端JavaScript應用程序
(2).命令行工具
(3).圖形界面應用程序
(4).混合應用程序（如，Titanium或Adobe AIR）java
【NodeJS是CommonJS規範的實現，webpack 也是以CommonJS的形式來書寫】

模塊的規範:AMD&CMD

目前，通行的Javascript模塊規範共有兩種：CMD和AMD。
AMD（Asynchronous Module Definition:異步模塊定義）是 RequireJS 在推廣過程當中對模塊定義的規範化產出。
CMD（Common Module Definition:公共模塊定義）是 SeaJS 在推廣過程當中對模塊定義的規範化產出。node

這些規範的目的都是爲了 JavaScript 的模塊化開發，特別是在瀏覽器端的。目前這些規範的實現都能達成瀏覽器端模塊化開發的目的。webpack

RequireJS 和 Sea.js 都是模塊加載器，倡導模塊化開發理念，核心價值是讓 JavaScript 的模塊化開發變得簡單天然。

requirejs的使用代碼示例

這裏仍是推薦能夠看看阮一峯老師寫的require.js的用法以及前端模塊化和AMD、CMD規範中require定義模塊的示例

博文開頭也說了，網上太多require互相抄的，沒有完整演示案例，初上手看得蛋疼。我這裏就直接貼代碼演示本身親測成功簡單例子web

我在使用requirejs的時候踩最多坑的引入文件的地址，因此請讀者注意define中引入其餘模塊所寫的地址

演示代碼目錄結構，html和js編碼對應
編程

示例一

1_math.js瀏覽器

/*
    語法結構：
    1. define({函數方法})
*/
// 一個沒有依賴性的模塊能夠直接定義對象
define({
    name : "測試名字",
    // 加法
    add : function(num1, num2){
        return num1 + num2;
    }
});

1_require.html服務器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript">
/*
引入模塊使用
require([模塊地址],回調函數)
1. [模塊地址]能夠忽略文件後綴.js
2. 回調函數的參數(math)對應的是引入模塊(js/1_math.js)的別名(別名能夠隨意命名)
*/
require(['js/1_math'],function(math){
    console.log(math.name);
    console.log(math.add(111,222));
});
</script>
</html>

結果

示例二

2_math.js
注意define中引入其餘模塊地址，並非以當前文件做爲參照，而是2_require.html。

/*
    語法結構：
    2. define([引入其餘模塊地址],回調函數(引入模塊別名));
    別名能夠在函數裏面去調用其餘模塊提供的方法
*/
// 一個返回對象的匿名模塊
define(['js/1_math.js'],function(math){
    // 減法
    var subtraction = function (num1, num2){
        return num1 - num2;
    }
    // 把方法返回出去
    return {
        add : math.add,//加法
        sub : subtraction//減法
    }
});

2_require.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript">
require(['js/2_math'], function(math){
    console.log(math.sub(222,111));
});
</script>
</html>

結果

示例三

3_math.js

3_require.html

效果

示例四

4_math.js（相似nodejs的用法）

// 一個使用了簡單CommonJS轉換的模塊定義
define(function(require,exports,module){
    // 引入其餘模塊
    var math = require('js/1_math');
    console.log(math);

    // 導出（暴露方法：2種方式）
    // 第一種
    // exports.a = math.add;
    // 第二種
    module.exports = {
        a : math.add
    }
});

4_require.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript">
require(['js/4_math'],function(mytool){
    console.log(mytool.a(11,22));//33
});
</script>
</html>

效果

seajs的使用代碼示例

我的仍是推薦使用seajs，簡單易懂，國人開發。推薦看張鑫旭老師寫的seajs中文文檔,很容易上手學習。

寫法跟request.js相似

演示目錄結構

代碼示例1

1_math.js

define({
    add : function(a,b){
        return a + b;
    }
});

1_sea.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="text/javascript" src="js/sea.js"></script>
<script type="text/javascript">
// 引用模塊方法seajs.use("地址"，回調函數)
// 注意：須要從當前目錄(./)開始找，.js後綴能夠省略
seajs.use("./js/1_math",function(math){
    console.log(math.add(111,222));
})
</script>
</html>

效果

代碼示例2

2_math.js

define(function(require,exports,module){
    // require的路徑是從當前文件所在路徑開始找
    var m = require('1_math');

    // 1. 第一種寫法
    // exports.add = m.add;
    // exports.sub = function(a,b){
    //     return a - b;
    // }

    // 2.第二種寫法
    module.exports = {
        add : m.add,
        sub : function(a,b){
            return a - b;
        }
    }
});

2_sea.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="text/javascript" src="js/sea.js"></script>
<script type="text/javascript">
seajs.use('./js/2_math',function(math){
    console.log(math.sub(222,111));
})
</script>
</html>

效果