Angular JS - 8 - SeaJS與前端模塊化

1、前端模塊化

關於前端模塊化，參考如下連接 ：

https://github.com/seajs/seajs/issues/547

http://www.cnblogs.com/huiguo/category/1125329.html

2、SeaJS

SeaJS：SeaJS 是一個適用於 Web 瀏覽器端的模塊加載器,主要爲了實現JS文件的異步加載以及管理模塊之間的依賴性。在 SeaJS 的世界裏，一個文件就是一個模塊。全部模塊都遵循 CMD 規範。

3、CMD規範

參考https://github.com/seajs/seajs/issues/242  連接，簡單瞭解一下CMD規範：CMD規範明確了模塊的基本書寫格式和基本交互規則。在 CMD 規範中，一個模塊就是一個文件。代碼的書寫格式以下：

define(factory);

全局函數 define(factory)用來定義模塊。define接受factory 參數，factory 能夠是一個函數，也能夠是一個對象或字符串。

 

 1. factory 爲對象、字符串時，表示模塊的接口就是該對象、字符串:

1 define({ "foo": "bar" });//
2 define('I am a template. My name is {{name}}.');

2  factory 爲函數時，表示是模塊的構造方法。執行該構造方法，能夠獲得模塊向外提供的接口。factory 方法在執行時，默認會傳入三個參數：require、exports 和 module：

define(function(require, exports, module) {

  // 模塊代碼

});

2.1 require參數
2.1.1 require  方法做爲 函數的第一個參數,接受 模塊標識 做爲惟一參數，用來獲取其餘模塊提供的接口。require(id)factory

define(function(require, exports) {
  // 獲取模塊 a 的接口
  var a = require('./a');
  // 調用模塊 a 的方法
  a.doSomething();
});

 方法用來在模塊內部異步加載模塊，並在加載完成後執行指定回調。 參數可選。

2.1.2 require.async(id, callback?)callback

define(function(require, exports, module) {

  // 異步加載一個模塊，在加載完成時，執行回調
  require.async('./b', function(b) {
    b.doSomething();
  });

  // 異步加載多個模塊，在加載完成時，執行回調
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });

});

 是同步往下執行， 則是異步回調執行。 通常用來加載可延遲異步加載的模塊。

使用模塊系統內部的路徑解析機制來解析並返回模塊路徑。該函數不會加載模塊，只返回解析後的絕對路徑。通常用在插件環境或需動態拼接模塊路徑的場景下requirerequire.asyncrequire.async2.1.3 require.resolve(id) 方法 

define(function(require, exports) {

  console.log(require.resolve('./b'));
  // ==> http://example.com/path/to/b.js

});

2.2 exports參數:  
 是一個對象，用來向外提供模塊接口。2.2.1 exports

define(function(require, exports) {

  // 對外提供 foo 屬性
  exports.foo = 'bar';

  // 對外提供 doSomething 方法
  exports.doSomething = function() {};

});

   2.2.2 除了給 exports 對象增長成員，還能夠使用 return 直接向外提供接口。

define(function(require) {

  // 經過 return 直接提供接口
  return {
    foo: 'bar',
    doSomething: function() {}
  };

});

2.3 module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。

2.3.1  module.id   String  模塊的惟一標識。

define('id', [], function(require, exports, module) {

  // 模塊代碼   
// 的第一個參數就是模塊標識

});define

2.3.2  module.uri  String    據模塊系統的路徑解析規則獲得的模塊絕對路徑。

define(function(require, exports, module) {

  console.log(module.uri); 
  // ==> http://example.com/path/to/this/file.js

});

通常狀況下（沒有在 define 中手寫 id 參數時），module.id 的值就是 module.uri，二者徹底相同。

2.3.3  module.dependencies  Arraydependencies 是一個數組，表示當前模塊的依賴。

2.3.4 module.exports  Object :當前模塊對外提供的接口。

傳給 factory 構造方法的 exports 參數是 module.exports 對象的一個引用。只經過 exports 參數來提供接口，有時沒法知足開發者的全部需求。 好比當模塊的接口是某個類的實例時，須要經過 module.exports來實現：

define(function(require, exports, module) {

  // exports 是 module.exports 的一個引用
  console.log(module.exports === exports); // true

  // 從新給 module.exports 賦值
  module.exports = new SomeClass();

  // exports 再也不等於 module.exports
  console.log(module.exports === exports); // false

});

 4、SeaJS 加載自定義模塊（自定義js文件）例子

新建目錄以下，seajs的目的是爲了管理模塊(js文件),那麼先要引入seajs ，而後再對seajs進行配置，最後 再經過seaja 調用其餘模塊(下面例子中的index.js )

 

4.1.1 自定義一個模塊 index.js

 1 define(function (require,exports,module) {
 2   var $ = require("$"); //這個路徑是相對於base的路徑來解析的
 3   console.log("index.js模塊的路徑module.uri是："+ module.uri);
 4   // module.exports={
 5   //   init :function () {
 6   //     console.log('index.js is loaded!');
 7   //   }
 8   // };
 9   exports.init = function(){
10     console.log('index.js is loaded!');
11   };
12 
13   exports.alert = function (a) {
14     alert(a);
15   };
16 
17   module.exports = exports;//暴露本模塊給其餘模塊使用
18 });

4.1.2 seajs配置編寫：

 1 seajs.config({
 2   //sea.js 的基礎路徑
 3   base:'./js/lib',
 4   alias:{
 5     '$':'jquery/1.12.3/jquery-1.12.3',   //引入jquery能夠不用加js後綴
 6     'jquery':'jquery/1.12.3/jquery-1.12.3',
 7   },
 8 
 9   //路徑配置
10   paths:{
11     'basePath':'.js/lib/'
12   },
13 
14   //變量配置：有些場景下，模塊路徑在運行時才能肯定，這時能夠使用 vars 變量來配置。vars 配置的是模塊標識中的變量值，在模塊標識中用 {key} 來表示變量。
15   vars:{
16     'jquery_version':'jquery-1.12.3'
17   },
18 
19   //映射配置,會把js文件映射成 -debug.js
20   // map:[
21   //   ['.js','-debug.js']
22   // ],
23 
24   //預加載項
25   preload:['$'],
26 
27   //調試模式
28   debug:true,
29 
30   //文件編碼
31   charset:'utf-8'
32 });

4.1.3 編寫html文件，引入seajs 及其配置，並引入自定義模塊index.js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>seajs例子</title>
 6   <script type="text/javascript" src="js/lib/seajs/2.2.1/sea.js"></script>
 7   <script type="text/javascript" src="js/ctr/config.js"></script>
 8   <script type="text/javascript">
 9     seajs.use('./js/ctr/index.js', function (index) {
10       index.init();
11       index.alert("hello");
12     });
13   </script>
14 </head>
15 <body>
16 <h4>seajs管理模塊示例</h4>
17 
18 </body>
19 </html>

從index.html一路往下看，在頁面中經過<script>標籤引入SeaJS，就能夠使用SeaJS裏面的特性了。而後，添加一個seaJS的配置文件config.js。config.js中的用seajs.config()對 Sea.js 進行配置，
可讓模塊編寫、開發調試更方便。最後用seajs.use()把index.js加載進來，如此就建立了一個簡單的sea實例.運行html,結果以下：