AMD-CMD-RequireJS

題目1: 為什么要使用模塊化?

  1. 解決命令沖突
  2. 依賴管理
  3. 代碼解耦,提高代碼的重用性
  4. 提高代碼的可讀性
    參考

題目2: CMD、AMD、CommonJS 規范分別指什么?有哪些應用

這是針對如果不在服務器的環境下去加載模塊,而是在瀏覽器中去向服務器去要模塊去加載,就要采用異步加載的方式,所以就有AMD ,CMD解決方案。

  1. CMD規范:

(Common Module definition)通用模塊定義。這個是在SeaJs在推廣過程中對于模塊定義的規范化產出,意思就是SeaJs在推廣過程中,重新對模塊化進行了定義。
語法:
define(id?dependencies?factory);//id,dependenicies可以省略,不然就跟AMD一樣了。
通常在factory中是傳入function,且function的參數固定:
格式:function(require,exports,module){
//require是請求的模塊名,用來獲取其他模塊提供的模塊名。
//exports是對外輸出的模塊接口
//module是存儲當前模塊相關的屬性和方法
}
注意點:記得要加載requireJS文件。不然不行的。

   demo:
    //定義模塊index.js  
   define(function(require,exports,module){
      var $=require('jquery.js');
      $('div').remove();  
      a={ name: 'clc', sayName:function(){
          console.log(this.name);}
        } 
            //錯誤的寫法   //exports.a=a;//index.js這個模塊的輸出口                      
      exports.a=a.sayName();       //index.js這個模塊的輸出口
    )

    //加載在clc.js,就是在clc.js模塊中加載index.js模塊
     //錯誤的寫法   // defind(funciton(require,exports,module){
    //var komo=require('index.js').a   //請求index.js這個模塊。
    //komo.sayName(); //結果:clc
      //}
    
    defind(funciton(require,exports,module){
    var komo=require('index.js')   //請求index.js這個模塊,并調用index.js中的a.sayName(),輸出 clc;      
      }

或是直接加載: 下面的方法沒有驗證過,懷疑。先注釋,等實驗過在去注釋
// seajs.use(['index.js'],function(my){
//在這里my是等于index.js模塊中的a。故可以直接調用下面的方法
// my.sayName() //結果: clc
//})

  1. AMD規范:

(Asynchronous Module Definiton)異步模塊定義。這個是在RequireJs在推廣過程中所形成的模塊化的定義方法,簡稱規范。

    demo: 
    //定義模塊mymodule.js
    define([dependencies],function () {
        var name = 'komo';
        function sayName() {
            console.log('my name', name);
        }
        return {
        sayName: sayName
          }
        })
    //加載模塊
    require(['./mymodule.js'], function (my) {
    my.sayName();
    })

AMD、CMD區別:
1 . AMD是推崇依賴前置,在定義模塊的時候就要聲明其依賴的模塊。就是你在定義一個新的模塊的時候,會使用到什么模塊,你都要提前依賴好。
2 . CMD是推崇就近依賴,只有在用到某個模塊的時候再去依賴,通過require來進行依賴。就是要你要什么模塊,你就require你要的模塊就好了。

  1. CommonJS規范:是運行在服務器端的規范,Nodejs采用這個規范。其加載模塊是同步的,只有加載完成之后才能執行下一個操作。而由于所有的文件是在服務器上的,所以加載起來比較快,不用考慮異步加載的方式。

其具體指的是:

  1. 定義模塊:一個單獨的文件就是一個模塊。每一個模塊就是一個單獨的作用域,換一句話說:在該模塊定義的變量是無法被別的模塊所讀取的,除非將這個變量定義為全局變量,也就是定義為global對象的屬性。

  2. 模塊輸出:模塊就是一個出口,module.exports對象,我們將需要模塊輸出的內容放入到該對象中去。就是module.exports=模塊的內容

  3. 加載模塊:加載模塊使用require方法,require方法讀取一個文件并執行,返回文件內部的module.exports對象,就是require(xxx),是調用require()去調用xxx文件并執行,同時因為xxx文件中有module.exports對象,則在返回。

    demo:index.js文件
    var komo={ name: 'clc', sayName:funciton(){ console.log("this name is:",this. name}
    module.exports=komo;
    調用文件:x.js
    var a=require(index.js) ;//require(index.js)
    //var a;
    a.sayName() ------>輸出this name is clc;
    題目3: 使用 requirejs 完善入門任務15,包括如下功能:

  4. 首屏大圖為全屏輪播

  5. 有回到頂部功能

  6. 圖片區使用瀑布流布局(圖片高度不一),下部有加載更多按鈕,點擊加載更多會加載更多數據(數據在后端 mock)

  7. 使用 r.js 打包應用

    預覽 額,要在mock中使用才行。
    后端mock的demo
    r.js
    ps: 看見有人用新浪的接口。。等等去試試看。在鏈接。0 .0
    小demo,新浪的

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 為什么要使用模塊化? 最主要的目的:解決命名沖突依賴管理 其他價值提高代碼可讀性代碼解耦,提高復用性 CMD、AM...
    Eazer閱讀 685評論 3 1
  • 1. 為什么要使用模塊化? 背景:如今CPU、瀏覽器性能得到了極大的提升,很多頁面邏輯遷移到了客戶端(表單驗證等)...
    _李祺閱讀 422評論 0 0
  • 為什么要使用模塊化? 1.解決命名沖突2.依賴管理3.提高代碼可讀性4.代碼解耦,提高復用性 CMD、AMD、Co...
    小囧兔閱讀 268評論 0 0
  • 題目1: 為什么要使用模塊化? 最主要的目的:1.解決命名沖突2.依賴管理其他價值:1.提高代碼可讀性2.代碼解耦...
    saintkl閱讀 320評論 0 0
  • 題目1: 為什么要使用模塊化?答:解決命名沖突依賴管理提高代碼可讀性代碼解耦,提高復用性 題目2: CMD、AMD...
    饑人谷_桶飯閱讀 273評論 0 1