RequireJs入門1

標籤：style   blog   color   java   使用   io   檔案   art   

RequireJs入門

隨著Javascript在開發中佔得比重越來越大，就需要一個團隊來分工、協作，為了大家的代碼可以更好的相互使用，這個時候模組化編程 就成為一個迫切的需求了。但是Javascript本身不是模組化的語言。它不支援類，更別說模組了。

既然模組如此重要，那團隊開發中就應該去制定一種規範，來約束大家，這樣就便於大家相互使用。如果每個人都按自己的寫法，那肯定是亂了套的， 目前Javascript官方沒有規範，通行的Javascript模組規範只有兩種：CommonJs和AMD

CommonJs概述

CommonJs是伺服器端模組規範，它載入模組順序是同步的，必須等待一個載入完了在載入下一個，node.js就是遵守CommonJs規範

AMD

AMD是瀏覽器端模組，載入是非同步，無需等待。

兩者的區別是：CommonJs是伺服器端模組規範，載入模組順序是同步的；AMD是瀏覽器端模組，載入是非同步。兩者之間可以相互轉化（在這就不做闡述了）。

RequireJs是什麼

RequireJs是個Javascript檔案、模組載入程式，在瀏覽器執行速度很快，它也可以用在其他Javascript環境裡，像node等等

它遵循AMD模組規範

為什麼要使用RequireJs

1.如第一段所講的，Javascript模組化的需要,需求的需要

如下的代碼想必大家都看過：

 <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></script> <script src="4.js"></script>

這樣的寫法有很大的缺點。首先，載入的時候，瀏覽器會停止網頁渲染，負載檔案越多，網頁失去響應的時間就會越長； 其次，由於js檔案之間存在依賴關係，因此必須嚴格保證載入順序（比如上例的1.js要在2.js的前面），依賴性最大的 模組一定要放到最後載入，當依賴關係很複雜的時候，代碼的編寫和維護都會變得困難

2.實現js檔案的非同步載入，避免網頁失去響應;

3.管理模組之間的依賴性，便於代碼的編寫和維護

如何使用RequireJs

1.去官網下一個RequireJs檔案，像js檔案一樣添加

1 <script data-main="script/main" src="script/require.js"></script>

大家發現這段代碼裡多了一個data-main屬性，這個就像C語言中的主函數一樣，main.js會第一個被Require.js載入，由於require.js預設的 檔案名稱尾碼是js，所以可以把main.js簡稱成main

那我們看看main這個主函數是怎麼寫的

定義模組：一個模組名一個檔案

1.假如這個模組沒有任何依賴關係，僅僅是一些name/value的集合，就可以定義成object的形式

define({      color:"black",      size:"unisize" })

2.假如這個模組沒有任何依賴關係，僅僅需要一個方法處理一些簡單的邏輯

1 define(function(){2        var a=1,b=2;3        document.write(a+b);4  })

  3.定義一個有依賴關係的模組，第一個參數是數組，第二個參數是一個方法function，在第一個參數相對應的js檔案全部載入完了，第二個參數的function才會執行

1 define(["./cart","./inventory"],function(cart,inventory){2      return {                      //也可以返回一個function3           cart:cart.add(3,4);4           inventory:inventory.minus(3,4); 5      }6  }) 

4.定義一個模組來轉換CommonJs

1 define(function(require, exports, module) {   //方法中三個參數，需要按照順序寫和相對應的名字，否則會出現混亂，也可以捨棄exports和module，但是你要使用的使用，一定要按照順序寫2         var a = require(‘a‘),3             b = require(‘b‘);4 5         //Return the module value6         return function () {};7     }8 );