模塊化之seaJs學習和使用

時間 2019-12-10

標籤模塊化 seajs 學習使用简体版

原文原文鏈接

使用seaJs也有一陣子了，一直也想抽個時間寫個這方面的博客，直到今天才寫……也許寫的不是很完善，但跟大夥分享也是一種樂趣，不對之處歡迎指出。[抱拳]css

時間有限，我這裏不過多介紹前端模塊化，有興趣能夠去了解。html

1、寫在前面前端

seaJs出自前端工程師玉伯之手，一個文件就是一個模塊，實現JavaScript的模塊化及按模塊加載。使用SeaJS能夠提升JavaScript代碼的可讀性和清晰度，確保各個JS文件前後加載的順序，解決目前JavaScript編程中廣泛存在的依賴關係混亂和代碼糾纏等問題，方便代碼的編寫和維護。seaJs遵循的是CMD規範，因此引用一些遵循AMD規範的JS代碼，須要進行一些封裝處理。譬如經常使用的JQ就遵循的AMD規範，引用時須要作一些封裝：jquery

define(function(){
    //jquery源代碼
    return $.noConflict();
});

seaJs瀏覽器兼容上理論兼容全部的瀏覽器，包括移動端，因此兼容性很好。同時，API少加上配置簡潔清晰，學習成本較低。編程

2、seaJs的使用瀏覽器

一、模塊定義。前端工程師

define(function(require,exports, module){模塊化

});

require是能夠把其餘模塊導入進來的一個參數，而 exports是能夠把模塊內的一些屬性和方法導出的， module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。

二、暴露及引入變量

一個模塊想要對外暴露變量（函數也是變量），能夠用 module.exports = variable;，一個模塊要引用其餘模塊暴露的變量，用 var ref = require('module_name');就拿到了引用模塊的變量。

三、加載模塊，seajs.use 用來在頁面中加載模塊。經過 use 方法，能夠在頁面中加載任意模塊。

語法： seajs.use(a,function(a){...});，也能夠加載多個模塊：seajs.use(['a','b'],function(a,b){...});回調函數可選，當沒有回調函數的時候，seajs.use(a);便可

來一個最簡單的例子。建立學習項目，相關文件及路勁以下：函數

index.html以下：學習

<!DOCTYPE html>
<html>
<head>
    <title>seaJs學習 --by WZQ</title>
</head>
<body>
<script src="js/sea.js"></script>
<script>
    seajs.use('./js/index.js');
</script>
</body>
</html>

index.js以下：

define(function(require,exports, module){
    alert(1);
});

打開index.html，能執行彈出alert框，就說明引用seajs成功

接着說一下sea.config相關方面的配置。

新建一個seajs.config.js

seajs.config({  
    // 指定base目錄  
    base: './js',  
    // 目錄長的能夠聲明別名, 這點十分人性化  
    alias: {  
        index: index.js // 左邊index是別名，能夠直接使用，右邊是路徑，因爲base的存在，只須要雪名稱便可，同時.js是能夠去掉的
    },  
    // 其餘配置自行百度，重點是路徑的配置  
    charset: 'utf-8',  
    timeout: 20000,  
    debug: 0 ,
    preload: ["jquery"]
});

有了配置文件，就方便管理所有的js文件，使用別名，還能夠不用擔憂路勁問題，之後搬運js文件的時候也只須要改配置文件就行了。因此引用的時候使用別名，能夠這樣寫：

seajs.use('index');（注意引入配置js）

接着練習一個複雜點的例子：
目錄結構：

配置文件seajs.config.js給他們的別名以下：

seajs.config({  
    // 指定base目錄  
    base: './js',  
    // 目錄長的能夠聲明別名, 這點十分人性化  
    alias: {  
        'index': 'index.js', // 左邊index是別名，能夠直接使用，右邊是路徑，因爲base的存在，只須要雪名稱便可，同時.js是能夠去掉的
        'otherJs': 'a',
        'bJs':'b',
        'jquery': 'jquery.js'
    },  
    // 其餘配置自行百度，重點是路徑的配置  
    charset: 'utf-8',  
    timeout: 20000,  
    debug: 0 ,
    preload: ["jquery"]
});

各個JS文件以下：

index.js

define(function(require,exports, module){
    function Example(){
        this.people = 'WZQ';
        this.address = '廣州';
    }
    Example.prototype.initFn = function(){
        console.log(this.people + '在' + this.address);
    }
    module.exports = Example;
});

a.js

define(function(require,exports, module){
    function Other(){
        this.nowTime = '2018年10月10日'
    }
    
    module.exports = Other;
});

b.js

define(function(require,exports, module){
    var $ = require('jquery'),
        AObj = require('otherJs');

    var aObj = new AObj();
    function TestObj(){
        this.time = aObj.nowTime;
    }
    TestObj.prototype.getTime = function(){
        return this.time;
    }
    var testObj = new TestObj();

    var indexFn = {
        init: function(){
            var time = testObj.getTime();
            console.log('這是b.js打印出來的時間：'+ time);
            $('body').css('background', 'red');
        }
    }
    indexFn.init();
});

index.html

<!DOCTYPE html>
<html>
<head>
    <title>seaJs學習 --by WZQ</title>
</head>
<body>
<script src="js/sea.js"></script>
<script src="js/seajs.config.js"></script>
<script>
    seajs.use(['index', 'otherJs', 'jquery', 'bJs'], function(Example, Other, $){
        var example = new Example();
        example.initFn();

        var other = new Other();

        console.log('今天是' + other.nowTime);
        console.log($('body').length); //引入jquery以後能直接用$是由於對JQ作了CMD封裝，最後一行代碼return $.noConflict();的緣故
    });
</script>
</body>
</html>