sea.js及三種加載方式的異同

  1、前言    

　　瀏覽器自己並不提供模塊管理的機制，過去網頁開發中，爲了使用各類模塊，不得不在加入一大堆script標籤。這樣就使得網頁體積臃腫，難以維護，還產生大量的HTTP請求，拖慢顯示速度，影響用戶體驗。爲了解決這個問題，前端的模塊管理器應運而生。它能夠輕鬆管理各類JavaScript腳本的依賴關係，自動加載各個模塊，使得網頁結構清晰合理。

      最先的模塊管理器是RequireJs,能夠實現異步加載模塊，以後出現了Brower、component、seaJs，還有模塊化組織工具webpack等，各類模塊加載器都有着共同的目標。今天讓咱們講講seaJs，本人工做中，常常會使用到sea.js，發現這個加載器確實有好用之處。

      sea.js是一個前端代碼模塊加載器，經過sea.js能夠吧大量的js代碼封裝成一個一個小模塊，實現模塊的加載和依賴管理。有了sea.js，在前端開發過程當中，開發人員能夠分工書寫各類模塊，這種方法對協做開發、後續維護、性能調優都有很大的幫助。

」Sea.js初衷是幫助前端開發工程師將大文件拆分紅小文件，能保持小顆粒度的模塊化開發，同時不須要過多考慮依賴關係，讓依賴管理輕鬆自如，讓模塊化開發變得更天然，就像瀏覽器原生提供的同樣。Sea.js的本質意義是經過模塊化開發，來提升代碼的可維護性。對工程師而言，是關注度分離，更將更多精力聚焦在代碼自己的邏輯上。」-----玉伯（前端模塊化開發框架SeaJS的創始人）。

sea.js的核心設計思想：

除了保持簡單，Sea.js的設計理念還有職責清晰、性能優先和適度完備。

 

2、開始使用

一、引入sea.js

<script type="text/javascript" src="./sea.min.js"></script>

二、定義模塊

seajs.config({
                alias: {
                    'plIndex' : 'js/poplayer/index.js?v=01190new012?v=19910',
                    'taskAnimate': 'js/poplayer/taskAnimate.js',
                    'a' : 'js/a.js'            
                }
            })

三、編寫對應小模塊,好比編寫taskAnimate.js

define(function(require, exports, module){
     exports.initTaskAnimation = initTaskAnimation;//exports是暴露的接口
     function initTaskAnimation(data){
       /*邏輯代碼*/
     }
});

　　

3、3種載入的方式

一、seajs.use

seajs.use('./a');  
   
//回調模式  
seajs.use('./a', function(a) {  
  a.run();  
});  
   
//多模塊模式  
seajs.use(['./a', './b'], function(a, b) {  
  a.run();  
  b.run();  
});  　

注意這種寫法，預加載a模塊

define(['a'],function(require, exports, module){
    //這個['a']是預加載這個模塊，可是並不會執行裏面的代碼,只是引入
   var _a = require('a'); //這個纔會正在執行a裏面的語句
});

二、require
函數用來訪問其餘模塊提供的 API。
注意：只接受模塊標識(如上面定義的模塊)做爲惟一參數，且參數是字符串。

define( function(require, exports, module) {
    var a = require("./a"); 
    a.dosomething();

    //或者能夠是完整的路徑
    var b = require("//static.XXXXXX");
});　

三、require.async
該方法可用來異步加載模塊，並在加載完成後執行回調函數。

define(function(require, exports, module) {
  // 加載一個模塊
  require.async('./b', function(b) {
    b.doSomething();
  });
  
  // 加載多個模塊
  require.async(['./c', './d'], function(c, d) {
    // do something
  });
});

　　

四、require和require.async區別

　　a、require沒法完成條件加載，
　　以下代碼會同時加載a模塊個b模塊（底層是調用函數的toString()方法）

define(function(require){

    if(false) {

        require("./a);

    } else {

        require("./b");

    }

 });

　　

 　　b、require.async能夠按條件加載,且參數能夠加入一個callback,而require不行！

 

4、最後講講seaJs的特色

  　　seaJs遵循的是CMD（通用模塊定義）規範，而CMD有延遲執行，推崇就近依賴，職責單一等特色。關於AMD和CMD的區別，以及和node所遵循的commonJs規範區別，可看另外一篇博文《commonJs 、AMD、 CMD》。

　以上就是最簡單的sea.js的使用，使用sea.js以後，能夠把大的js文件，拆分爲一個一個小的模塊，大大提升開發效率。