seajs和requirejs技術指導文件

eternalshallow發表於2017-12-14
JSUI

昨天到今天，老衲翻閱數十篇技術文件，為了搞明白seajs（CMD）和 requireJS（AMD）到底是個什麼鬼， 當然也包括官網了，只是都不太盡如人意，理解起來感覺好費解，然後跟我的小夥伴交流了一晚上之後發現 了一個很形象的比喻，對於AMD和CMD的模式，其實理解的時候我藉助了MVC這個結構來理解，感覺理解起來 相對容易一點兒，對於MVC這個結構我不做過多介紹，有興趣的可以去看看 http://www.cnblogs.com/aaronjs/p/3581904.html 下面進入我們正題，說的不好的地方歡迎指正，一塊學習進步.

我們們說道說道這兩個模組兒開發的有趣的地方吧，我會用我們們常說的一句“我負責貌美如花，你負責掙錢養家”來 說道說道，其實說白了就是分工明確： 第一步、前端頁面的引入介面，他的作用就是進去介面；（PS:前端頁面直接展示給使用者，相當於你的女朋友只負責貌美如 花，但是你需要提供，提供一切的物質支援就是money[對於requirejs和seajs來說就是給前端頁面提供一個介面]）； 第二步、這個介面負責所有的依賴檔案，還有需要的配置各種引數，支援檔案等等。 換句話說就是頁面上最直觀的顯示內容的呼叫方法，還有各種事件等等 （就相當於你，準備怎樣讓你的女朋友貌美如花。你要給提供化妝品、衣服之類的，沒事肯定少不了）； 第三步、到了這一層，其實就是具體的邏輯的處理了，這一層的邏輯處理也是給第二層提供依賴的檔案（ 就相當於，你要給你的女朋友買這買那，你具體的工作是什麼，做多少份兼職可以滿足你的女朋友的物質需求）

上邊兒說了這麼多，其實就是為了想讓大家理解一下requirejs和seajs這兩種模組化開發的形式是什麼，怎樣分工的， 是不是多少有點兒進入狀態了

first.我們們先來說一下requirejs

requirejs.png
頁面的引入介面

<script data-main="js/app/r-index.js" src="js/lib/require.js"></script>
複製程式碼

其中 r-index.js 就是相當於分工的第二步所在的位置，在這裡邊兒，我們進行依賴檔案的配置， 和對第一步前端頁面的顯示的支援 我們來看一下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();
} 
複製程式碼

對這個就是進行基礎的業務的處理，

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

下面我們來看一下 data.js data.js 所有第二步用到的邏輯都放在這裡邊進行處理

define(['jquery','cookie'],function () {
 return {
        /*所有資料*/
        getAll:function (){
          return alldata;
        },
        /*指定id的資料*/
        getOne:function (id){
            
        }
    }
})
複製程式碼

有了上邊兒requirejs 的案例基礎我們來理解seajs的時候就方便的多了。 second.下面我們來看一下seajs的書寫規範

seajs.png
首先說一下第一步，介面

<script>
    seajs.use('js/app/s-index.js');
</script>
複製程式碼

然後看一下第二步的書寫方式

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 =  {
        /*所有資料*/
        getAll:function (){
          return alldata;
        },
        /*指定id的資料*/
        getOne:function (id){
            
        }
    }
//需要注意的以下的寫法是錯誤的
export =  {
        /*所有資料*/
        getAll:function (){
          return alldata;
        },
        /*指定id的資料*/
        getOne:function (id){
            
        }
    }
複製程式碼

最後我們說一下requirejs和seajs的相同點和不同點 相同之處

RequireJS 和 SeaJS 都是模組載入器，倡導的是一種模組化開發理念，
核心價值是讓 JavaScript 的模組化開發變得更簡單自然。
複製程式碼

不同之處，兩者的區別如下：

定位有差異。RequireJS 想成為瀏覽器端的模組載入器，同時也想成為 Rhino / Node 等環境的模組載入器。
SeaJS 則專注於 Web 瀏覽器端，同時通過 Node 擴充套件的方式可以很方便跑在 Node 伺服器端。

遵循的規範不同。RequireJS 遵循的是 AMD（非同步模組定義）規範，SeaJS 遵循的是 CMD （通用模組定義）規範。
規範的不同，導致了兩者 API 的不同。SeaJS 更簡潔優雅，更貼近 CommonJS Modules/1.1 和 Node Modules 規範。

社群理念有差異。RequireJS 在嘗試讓第三方類庫修改自身來支援 RequireJS，目前只有少數社群採納。
SeaJS 不強推，採用自主封裝的方式來“海納百川”，目前已有較成熟的封裝策略。

程式碼質量有差異。RequireJS 是沒有明顯的 bug，SeaJS 是明顯沒有 bug。

對除錯等的支援有差異。SeaJS 通過外掛，可以實現 Fiddler 中自動對映的功能，
還可以實現自動 combo 等功能，非常方便。RequireJS 無這方面的支援。

外掛機制不同。RequireJS 採取的是在原始碼中預留介面的形式，原始碼中留有為外掛而寫的程式碼。SeaJS 採取的外掛機制則與 JavaScript 語言
以及Node 的方式一致：開放自身，讓外掛開發者可直接訪問或修改，從而非常靈活，可以實現各種型別的外掛。
複製程式碼

還有不少細節差異就不多說了。

總之，SeaJS 從 API 到實現，都比 RequireJS 更簡潔優雅。如果說 RequireJS 是 Prototype 類庫的話，則 SeaJS 是 jQuery 類庫。

謝謝一下文件的參考 https://my.oschina.net/felumanman/blog/263330?p=1 https://github.com/seajs/seajs/issues/277 http://yslove.net/seajs/ https://github.com/seajs/seajs/issues/242 http://blog.csdn.net/wl110231/article/details/8283512

相關文章