javascript模塊化編程庫require.js

     隨着javascript的興起，愈來愈多的公司開始將JS模塊化，以增長開發的效率和減小重複編寫代碼的。更是爲了能更加容易的維護往後的代碼，由於如今 的隨着人們對交互效果的愈來愈強烈的需求，咱們的JS代碼也從之前的幾十行代碼，慢慢的發展到瞭如今的幾百甚至上千過萬，可是要怎麼才能把這些代碼很好的整合起來呢？

    

    面向對象的編程方法應該是目前最爲流行的編程方式，將全部代碼都模塊化，不只有利於增長咱們開發效率，並且還使咱們代碼更容易維護。今天就推薦一個目前比較流行的require.js庫，用來編寫javascript模塊化卻是不錯的一個選擇，如下是個人一些學習總結，但願對你們學習這個庫有點幫助

導入require.js文件方法

    首先你們能夠到require.js的官網去下載最新的文件包。下載完之後咱們把require.js放到咱們的JS文件目錄下，而後把它加載到頁面上：

<script src="js/require.js" defer async="true" ></script>

    咱們上面給這個JS加了兩個額外的屬性：defer和async，這兩個屬性主要是爲了讓瀏覽器能在頁面元素所有加載完之後再加載JS，我稱這個爲異步加載JS，這種方法能夠避免由於加載JS時頁面卡住，出現假死的狀態，因此咱們讓先讓頁面呈現出來，而後在加載JS，至關於日常咱們把JS放到頁面底部原理差很少。上面defer屬性是由於IE不支持async，因此加上的。

    加載require.js之後，下一步就要加載咱們本身的JS文件了。假如咱們本身的代碼文件是main.js，也放在JS目錄下面。那麼，只須要寫成下面這樣就好了：

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

    data-main屬性的做用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。因爲require.js默認的文件後綴名是js，因此能夠把main.js簡寫成main。

require.js配置文件方法

    咱們的JS文件不僅僅是隻要main.js這個文件，咱們還須要加載其餘文件，這時候咱們只須要在main.js這個文件裏面編寫好你須要另外加載的JS文 件，這時咱們要用他的require()函數，這個函數有兩個參數：第一個參數是一個數組，表示所依賴的模塊；第二個參數是一個回調函數，當前面指定的模 塊都加載成功後，咱們將調用它；

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　//回調成功後的操做
});

  上面模塊會按照你填寫的前後順序異步加載到頁面中：A,B,C。加載成功後纔會執行操做代碼。這樣就能夠防止頁面出現假死的情況了。

  可能有不少的人JS都是依賴一些框架來寫的，這時候咱們就須要加載例如jquery等庫進來的時候，咱們就能夠這樣寫：

requirejs(['jquery', 'canvas', 'app/sub'],
function   ($,canvas,sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});

   看上面的代碼，jquery他會自動去尋找jquery.js文件，因此你想加載成功你的jquery你就須要將他命名爲jquery.js這樣才行。可是 若是但願你的jquery文件能夠帶版本號，require.js也能夠知足你的需求，它提供了require.config()的函數，可讓咱們自定 義一些路徑，文件名稱。咱們能夠這樣寫代碼：

require.config({
　　paths: {
　　　　"jquery": "jquery-1.8.3.min",
　　}
});

   請記住一點，咱們的文件名不須要加.js後綴，不然require.js會找不到文件的。

   看到上面的代碼，有些人可能還會問，若是個人JS文件不是跟main.js在同一個目錄的時候怎麼辦？方法和上面的差很少，直接改目錄，假設咱們jquery放在JS文件夾下面的libs目錄下面時，咱們能夠這樣寫：

require.config({
    paths: {
        jquery: 'libs/jquery-1.8.3.min'
    }
});

 還能夠用另一種寫法，直接改變基目錄：

requirejs.config({ 
    baseUrl: 'js/lib',
    paths: {
        jquery: 'jquery-1.8.3.min'
    }
});

require.js模塊化編程方法    

    require.js的全部模塊必須採用特定的define()函數的來定義。若是一個模塊不依賴其餘模塊，那麼就能夠直接定義在define()函數中。例如：

//main.js
define({
    color: "black",
    size: "unisize"
});

   調用上面方法：

//main.js
require(['main'], function (main){
        console.log(main.color); //black
        console.log(main.size);  //unisize 
　　});

   若是咱們要編寫函數，咱們能夠這樣寫：

define(function (){
　　var Total = function (x,y){
　　　　return x+y;
　　};
　　return {
        total: Total
　　};
});

  調用上面的代碼：

//main.js
require(['main'], function (main){
         console.log(wnf.total(5,10));
　　});

   require.js加載的模塊，採用AMD規範。也就是說，模塊必須按照AMD的規定來寫。具體來講，就是模塊必須採用特定的define()函數來定義。若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中

   若是這個模塊還依賴其餘模塊，那麼define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。

define(['jquery'], function(){
　　var foo = function(){
　　    $("body").click(function(){
            alert("jquery");
        });
　　}
　　return {
　　    foo : foo
　　};
});

    而後咱們調用上面的方法：

//main.js
require(['main'], function (main){
         main.foo();//jquery
　　});

   上面是個人學習筆記，看完你應該能對require.js有些瞭解，若是想更詳細的瞭解這個庫的功能，建議你們能夠到require.js官網去進行深刻了解學習。