seajs和requirejs的那些事兒

發佈以後發現存在一個顯示的問題，你們能夠移步到個人簡書參考，謝謝你們！！！
個人簡書《seajs和requirejs技術指導文檔》

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

我們說道說道這兩個模塊兒開發的有趣的地方吧，我會用我們常說的一句「我負責貌美如花，你負責掙錢養家」來
說道說道，其實說白了就是分工明確：
第一步、前端頁面的引入接口，他的做用就是進去接口；（PS:前端頁面直接展現給用戶，至關於你的女友只負責貌美如
花，可是你須要提供，提供一切的物質支持就是money[對於requirejs和seajs來講就是給前端頁面提供一個接口]）；
第二步、這個接口負責全部的依賴文件，還有須要的配置各類參數，支持文件等等。
換句話說就是頁面上最直觀的顯示內容的調用方法，還有各類事件等等
（就至關於你，準備怎樣讓你的女友貌美如花。你要給提供化妝品、衣服之類的，沒事確定少不了）；
第三步、到了這一層，其實就是具體的邏輯的處理了，這一層的邏輯處理也是給第二層提供依賴的文件（
就至關於，你要給你的女友買這買那，你具體的工做是什麼，作多少份兼職能夠知足你的女友的物質需求）

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

first.我們先來講一下requirejs

頁面的引入接口

<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的書寫規範

首先說一下第一步，接口

<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/feluma...
https://github.com/seajs/seaj... http://yslove.net/seajs/
https://github.com/seajs/seaj...
http://blog.csdn.net/wl110231...