seajs 模塊化編程js代碼

YJNldm 發布于2019-08-19 17:10 / 2917人閱讀

摘要：模塊初始化時，會調用且僅調用一次該工廠函數。用來向外提供模塊的除了給對象增加成員，還可以使用直接向外提供可簡化為函數用來訪問其他模塊提供的異步加載模塊，并在加載完成后執行回調函數使用的內部機制來解析并返回模塊路徑。手冊的模塊化插件

seajs是我剛入門前端就接觸到的一個javaScript模塊加載框架。使用seajs后javaScript代碼的可讀性和清晰度有了很大的提升，插件的使用和組裝變的很方便。更加方便代碼的升級和維護。推薦使用插件比較多的項目使用。或者使用requirejs也比較流行。

ps:如果想知道RequireJS、SeaJS哪個好用的可以自行對比，或者查看

seajs 的簡單上手

首先先去官網下載最新版本。
下載后，假定把它放在js子目錄下面，就可以加載了。

加載seajs后我們還需要加載自己的js配置文件

seajs 的簡單配置

      //.sea-config.js 
      seajs.config({
          base: "../plug-js/",
          alias: {
            "jquery": "jquery/1.10.1/jquery.js"
          }
      })

簡單使用

  // 所有模塊都通過define來定義
  define(function(require,exports,module){
        // 通過require來引入jquery
        var $ = require("jquery");
        
        console.log($);
  })

seajs參數 define

使用全局函數define來定義函數

define(id?,dependencies?,factory);

id: 當前模塊的唯一標識。該參數可選。如果沒有指定，默認為模塊所在文件的訪問路徑。如果指定的話，必須是頂級或絕對標識。
dependencies: 當前模塊所依賴的模塊，是一個由模塊標識組成的數組。
factory: 模塊的工作函數。模塊初始化時，會調用且僅調用一次該工廠函數。

define(function(require,exports,module){
    //The module code goes here
})

**注意：不推薦不要設定id和dependencies參數。

exports

exports 用來向外提供模塊的API

define(function(require,exports){
    // snip 
    exports.foo = "bar";
    exports.doSomething = function(){};
})

除了給exports對象增加成員，還可以使用return直接向外提供API

define(function(require,exports){
    // snip...
    return {
      foo : "bar",
      doSomething : function(){}
    }
})
可簡化為:
define({
   foo : "bar",
   doSomething : function(){} 
})

require

require函數用來訪問其他模塊提供的API

define(function(require){
   var a = require("./a");
   a.doSomething();
})

require.async: 異步加載模塊，并在加載完成后執行回調函數
require.resolv: 使用require()的內部機制來解析并返回模塊路徑。該函數不會加載模塊，只返回解析后的路徑。
require.load: 該方法可用異步加載腳本，并在加載完成后，執行指定的回調函數。
require.constructor: 給所有require參數對象添加一些公用屬性或方法。

module

modeule 參數存儲模塊的元信息

module.id: 當前模塊的唯一標識。
module.dependencies: 表示當前模塊的依賴列表
module.exports: exports是某個類的實例

   define(function(require,exports,module){
         console.log(module.exports === exports); // true
         module.exports = new SomeClass();
         console.log(module.exports === exports); // false
   })

module.constructor: 給module參數對象添加一些公用屬性或方法。

api手冊

seajs的模塊化插件

GPU云服務器云服務器 seajs模塊 linux模塊化編程 javascript模塊化編程 html訂單模塊代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78263.html

再談JavaScript模塊化

摘要：應用日益復雜，模塊化已經成為一個迫切需求。異步模塊加載機制。引用的資源列表太長，懶得回調函數中寫一一對應的相關參數假定這里引用的資源有數十個，回調函數的參數必定非常多這就是傳說中的簡述緣起模塊通常是指編程語言所提供的代碼組織機制，利用此機制可將程序拆解為獨立且通用的代碼單元。模塊化主要是解決代碼分割、作用域隔離、模塊之間的依賴管理以及發布到生產環境時的自動化打包與處理等多個方面...

MorePainMoreGain 2019-08-26 10:14 評論0 收藏0
使用CommonJS，AMD以及CMD編寫模塊化JavaScripts

摘要：模塊化編程首先，我想說說模塊化編程這個概念當我不清楚這個概念的時候，其實說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實也是因為我從開始寫，就一直都在模塊化編程啊我們寫一個文件然后我們在文件中引入然后調用方法哈哈這樣已經是模塊化模塊化編程首先，我想說說模塊化編程這個概念當我不清楚這個概念的時候，其實說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實也是因為我從...

nifhlheimr 2019-08-22 10:34 評論0 收藏0
關于JavaScript模塊規范之CommonJSAMDCMD

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。也采用語句加載模塊，但是不同于，它要求兩個參數第一個參數，是一個數組，里面的成員就是要加載的模塊第二個參數，則是加載成功之后的回調函數。本篇文章來自對文章《js模塊化編程之徹底弄懂CommonJS和AMD/CMD！》的總結，大部分摘自文章原話，本人只是為了學習方便做的筆記，之后有新的體會會及時補充...

binaryTree 2019-08-26 13:22 評論0 收藏0
require.js構建優化

摘要：未構建之前，全部分開加載。的優化，得再看下的示例，然后再寫篇筆記記錄下來。想摸透javascript模塊化編程是怎么一回事，在seajs和requirejs之間兜兜轉轉，看了許多相關資料和文章，算是大致理清它們的異同，撇開requirejs加載方式的另類（其實目前我暫時還沒去感受），于寫法，比較喜歡requirejs的寫法，這個比較主觀，這也得益于阮一峰大大那篇Javascript模...

yacheng 2019-08-21 12:22 評論0 收藏0
commonjs、AMD、CMD規范(相關文章)

摘要：是對的規范的實現，當然和規范還是有點誤差的。，就是遵循他提出的規范。 1：Javascript模塊化編程（三）：require.js的用法 http://www.ruanyifeng.com/blo...2：RequireJS 模塊的定義與加載 http://www.cnblogs.com/bzggoo...(加載的順序不定，但依賴的順序最終是正確的;因為無需創建全局變量，甚至可以做到...

lcodecorex 2019-08-21 11:17 評論0 收藏0