seajs和requirejs的那些事兒

zorpan 發(fā)布于2019-08-22 10:44 / 3325人閱讀

摘要：遵循的是異步模塊定義規(guī)范，遵循的是通用模塊定義規(guī)范。規(guī)范的不同，導(dǎo)致了兩者的不同。在嘗試讓第三方類庫(kù)修改自身來(lái)支持，目前只有少數(shù)社區(qū)采納。是沒(méi)有明顯的，是明顯沒(méi)有。無(wú)這方面的支持。

發(fā)布之后發(fā)現(xiàn)存在一個(gè)顯示的問(wèn)題，大家可以移步到我的簡(jiǎn)書參考，謝謝大家！！！
我的簡(jiǎn)書《seajs和requirejs技術(shù)指導(dǎo)文檔》

昨天到今天，老衲翻閱數(shù)十篇技術(shù)文檔，為了搞明白seajs（CMD）和 requireJS（AMD）到底是個(gè)什么鬼，
當(dāng)然也包括官網(wǎng)了，只是都不太盡如人意，理解起來(lái)感覺(jué)好費(fèi)解，然后跟我的小伙伴交流了一晚上之后發(fā)現(xiàn)
了一個(gè)很形象的比喻，對(duì)于AMD和CMD的模式，其實(shí)理解的時(shí)候我借助了MVC這個(gè)結(jié)構(gòu)來(lái)理解，感覺(jué)理解起來(lái)
相對(duì)容易一點(diǎn)兒，對(duì)于MVC這個(gè)結(jié)構(gòu)我不做過(guò)多介紹，有興趣的可以去看看
http://www.cnblogs.com/aaronj...
下面進(jìn)入我們正題，說(shuō)的不好的地方歡迎指正，一塊學(xué)習(xí)進(jìn)步.

咱們說(shuō)道說(shuō)道這兩個(gè)模塊兒開(kāi)發(fā)的有趣的地方吧，我會(huì)用咱們常說(shuō)的一句“我負(fù)責(zé)貌美如花，你負(fù)責(zé)掙錢養(yǎng)家”來(lái)
說(shuō)道說(shuō)道，其實(shí)說(shuō)白了就是分工明確：
第一步、前端頁(yè)面的引入接口，他的作用就是進(jìn)去接口；（PS:前端頁(yè)面直接展示給用戶，相當(dāng)于你的女朋友只負(fù)責(zé)貌美如
花，但是你需要提供，提供一切的物質(zhì)支持就是money[對(duì)于requirejs和seajs來(lái)說(shuō)就是給前端頁(yè)面提供一個(gè)接口]）；
第二步、這個(gè)接口負(fù)責(zé)所有的依賴文件，還有需要的配置各種參數(shù)，支持文件等等。
換句話說(shuō)就是頁(yè)面上最直觀的顯示內(nèi)容的調(diào)用方法，還有各種事件等等
（就相當(dāng)于你，準(zhǔn)備怎樣讓你的女朋友貌美如花。你要給提供化妝品、衣服之類的，沒(méi)事肯定少不了）；
第三步、到了這一層，其實(shí)就是具體的邏輯的處理了，這一層的邏輯處理也是給第二層提供依賴的文件（
就相當(dāng)于，你要給你的女朋友買這買那，你具體的工作是什么，做多少份兼職可以滿足你的女朋友的物質(zhì)需求）

上邊兒說(shuō)了這么多，其實(shí)就是為了想讓大家理解一下requirejs和seajs這兩種模塊化開(kāi)發(fā)的形式是什么，怎樣分工的，
是不是多少有點(diǎn)兒進(jìn)入狀態(tài)了

first.咱們先來(lái)說(shuō)一下requirejs

頁(yè)面的引入接口

其中 r-index.js 就是相當(dāng)于分工的第二步所在的位置，在這里邊兒，我們進(jìn)行依賴文件的配置，
和對(duì)第一步前端頁(yè)面的顯示的支持
我們來(lái)看一下r-index.js是怎樣寫的

requirejs.config({
baseUrl: "js/",
paths: {
    hammer: "lib/hammer.min",
    jquery:"lib/jquery.min",
    cookie:"lib/jquery.cookie",
    template:"lib/template"
} });

requirejs(["hammer", "jquery", "cookie","template","app/data"],
function(a,b,c,template,service) {     service.getAll();
service.getOne(); }

對(duì)這個(gè)就是進(jìn)行基礎(chǔ)的業(yè)務(wù)的處理，

"app/data"就是具體的邏輯的處理，這些給第二步提供了所有的邏輯支持

下面我們來(lái)看一下 data.js data.js 所有第二步用到的邏輯都放在這里邊進(jìn)行處理

define(["jquery","cookie"],function () {
  return {
         /*所有數(shù)據(jù)*/
         getAll:function (){
           return alldata;
         },
         /*指定id的數(shù)據(jù)*/
         getOne:function (id){
             
         }
     }
 })

有了上邊兒requirejs 的案例基礎(chǔ)我們來(lái)理解seajs的時(shí)候就方便的多了。
second.下面我們來(lái)看一下seajs的書寫規(guī)范

首先說(shuō)一下第一步，接口


然后看一下第二步的書寫方式
define(function (requie, exports, module) {
//依賴可以就近書寫
var hammer = require("js/lib/hammer.min");     ...     var app = requie("app/data");       
app.getAll();
app.getOne();
...
//軟依賴
if (status) {

    var b = requie("./b");
    b.test();
} });

然后看一下第三步的書寫方式
 module.export =  {
            /*所有數(shù)據(jù)*/
            getAll:function (){
              return alldata;
            },
            /*指定id的數(shù)據(jù)*/
            getOne:function (id){
                
            }
        }
    //需要注意的以下的寫法是錯(cuò)誤的
    export =  {
            /*所有數(shù)據(jù)*/
            getAll:function (){
              return alldata;
            },
            /*指定id的數(shù)據(jù)*/
            getOne:function (id){
                
            }
        }
最后我們說(shuō)一下requirejs和seajs的相同點(diǎn)和不同點(diǎn)
相同之處
RequireJS 和 SeaJS 都是模塊加載器，倡導(dǎo)的是一種模塊化開(kāi)發(fā)理念， 核心價(jià)值是讓 JavaScript
的模塊化開(kāi)發(fā)變得更簡(jiǎn)單自然。
不同之處，兩者的區(qū)別如下：
定位有差異。RequireJS 想成為瀏覽器端的模塊加載器，同時(shí)也想成為 Rhino / Node 等環(huán)境的模塊加載器。 SeaJS
則專注于 Web 瀏覽器端，同時(shí)通過(guò) Node 擴(kuò)展的方式可以很方便跑在 Node 服務(wù)器端。
遵循的規(guī)范不同。RequireJS 遵循的是 AMD（異步模塊定義）規(guī)范，SeaJS 遵循的是 CMD （通用模塊定義）規(guī)范。
規(guī)范的不同，導(dǎo)致了兩者 API 的不同。SeaJS 更簡(jiǎn)潔優(yōu)雅，更貼近 CommonJS Modules/1.1 和 Node
Modules 規(guī)范。
社區(qū)理念有差異。RequireJS 在嘗試讓第三方類庫(kù)修改自身來(lái)支持 RequireJS，目前只有少數(shù)社區(qū)采納。 SeaJS
不強(qiáng)推，采用自主封裝的方式來(lái)“海納百川”，目前已有較成熟的封裝策略。
代碼質(zhì)量有差異。RequireJS 是沒(méi)有明顯的 bug，SeaJS 是明顯沒(méi)有 bug。
對(duì)調(diào)試等的支持有差異。SeaJS 通過(guò)插件，可以實(shí)現(xiàn) Fiddler 中自動(dòng)映射的功能， 還可以實(shí)現(xiàn)自動(dòng) combo
等功能，非常方便。RequireJS 無(wú)這方面的支持。
插件機(jī)制不同。RequireJS 采取的是在源碼中預(yù)留接口的形式，源碼中留有為插件而寫的代碼。SeaJS 采取的插件機(jī)制則與
JavaScript 語(yǔ)言 以及Node 的方式一致：開(kāi)放自身，讓插件開(kāi)發(fā)者可直接訪問(wèn)或修改，從而非常靈活，可以實(shí)現(xiàn)各種類型的插件。

還有不少細(xì)節(jié)差異就不多說(shuō)了。
總之，SeaJS 從 API 到實(shí)現(xiàn)，都比 RequireJS 更簡(jiǎn)潔優(yōu)雅。如果說(shuō) RequireJS 是 Prototype 類庫(kù)的話，則 SeaJS 是 jQuery 類庫(kù)。
謝謝一下文檔的參考
https://my.oschina.net/feluma...
https://github.com/seajs/seaj... http://yslove.net/seajs/
https://github.com/seajs/seaj...
http://blog.csdn.net/wl110231...