模塊化前端開發入門指南（二）

時間 2019-11-11

標籤模塊化前端開發入門指南简体版

原文原文鏈接

概覽

使用seajs模塊化加載器進行模塊化開發，以及它的一些弊端。javascript

使用seajs進行模塊化開發

項目目錄

新建新項目
引入sea.js，文件路徑modules/sea.js
引入公共庫jquery。
新建index.html，index.js

項目目錄以下：
html

關於sea.js的公共模塊路徑
sea.js加載時，會自動獲取sea.js所在的路徑，將sea.js文件存放的路徑作爲公共模塊的根目錄。
以modules/sea.js爲例，require('a')加載的是modules/a.js模塊，require('a/b')加載的是modules/a/b.js模塊。java

index.html內容以下：jquery

<!--index.html-->


<!doctype html>
<html>
    <head>
        <title>使用seajs進行模塊化開發</title>
        <!--引入公共庫-->
        <script src="libs/jquery.js"></script>
    </head>
    <body>
        <div id="container"></div>
        
        <!--引入seajs-->
        <script src="modules/sea.js"></script>      

        <!--引入index.html業務腳本-->
        <script>
            seajs.use('./scripts/index')
        </script>   
    </body>
</html>

建立模塊

建立文件modules/moduleA.js。接上篇三種封裝形式，使用CMD規範後，分別是這樣：git

// 建立jquery插件形式，不須要返回值
// 使用方法require('moduleA')，返回爲null
define(function(require, exports, module) {
    
    //$爲公共模塊
    $.fn.moduleA = function(options) {

    };
});


//Object字面量方式
define(function(require, exports, module) {

    module.exports = {
        fn1: function() {},
        fun2: functdion() {}
    };
});


//prototype繼承，new Function方式
define(function(require, exports, module) {
    function moduleA() {
        //constructor
    }

    moduleA.prototype.fn1 = function() {};
    moduleA.prototype.fn2 = function() {};

    module.exports = moduleA;
});

模塊的使用

/*
    jquery插件形式的模塊加載方式
    */
define(function(require, exports, module) {

    //加載模塊
    require('moduleA'); 

    //使用
    $('body').moduleA();
});


/*
Object形式
*/
define(function(require, exports, module) {

    //加載模塊
    var moduleA = require('moduleA');

    //使用
    moduleA.fn1();
    moduleA.fn2();

});


/*
原型鏈繼承, new Function形式
*/
define(function(require, exports, module) {

    //加載模塊
    var ModuleA = require('moduleA');

    //使用
    var moduleA = new ModuleA();
    moduleA.fn1();
    moduleA.fn2();

});

總結

seajs做爲一款國人創造的一個工具庫，一直是被放在與requirejs齊平的地位上探討，我的以爲很是不易。使用方式也簡單易懂。並且有配套的打包和構建工具，作工程化也不是問題。不足之處是文檔不足，提供的工程化產品在國外的grunt、gulp、bower、browserify、components等工程化產品的生態和完整使用文檔衝擊下，受衆很少。github