require.js 簡潔入門

前言

提到require.js大多數人會說提到模塊化開發，AMD等等，其實require.js並無這麼多複雜的概念，這裏我就但願排除這些概念，從實用的角度來簡單說一下require.js是幹什麼的，咱們要怎麼用它。

1.爲何要用require.js

大多數前端開發者都用過jquery，那麼用jquery以前咱們首先要把jquery加載進頁面，而後在以後的js之中才可使用$,這裏面咱們知道了兩個道理，一個是咱們不能把全部js代碼都放到一個文件裏，有些東西能夠單獨提出來成爲一個模塊，好比jquery。另一個道理，一部分js是依賴另外一部分js的，好比$依賴jquery文件的載入。其實require.js主要作的事情就是這兩點。

當你的js項目足夠大，足夠複雜，依賴的庫足夠多，你徹底須要這樣一種工具去作這些js的管理，不然你的項目擴展性不好，結構很糟糕，要找到想修改的地方會很困難。

其實其餘不少編程語言都已經在代碼裏實現了相似的功能，好比這段python

import web

db = web.database(dbn='sqlite', db="todos.db")

很好理解，咱們導入了web對象，而後就能夠在接下來的代碼裏使用web.database

2.怎麼用require.js？

首先頁面要載入require.js，這個沒辦法用它本身依賴

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

既然使用require這種模式的目的是把文件分割成可理解的小塊，那麼咱們的js文件也要分割成一個一個部分，稱之爲模塊，官方api實例中的目錄結構是這樣的：

• www/
  
  
  • index.html
  • js/
    
    
    • app/
      
      
      • sub.js
    • lib/
      
      
      • jquery.js
      • canvas.js
    • app.js

這裏是一個app應用，可是普通頁面開發也能夠借鑑的是這個概念，就是把js根據功能和目的分開放，庫文件放到一塊兒，子模塊放到一塊兒，入口js再來選擇性載入。
這裏注意一下，模塊化開發的目的是方便開發者理解和提升效率，若是讀者認爲沒有必要徹底則不須要硬去這麼作，爲了使用什麼概念或者方法反而增長了開發成本的事情不要作。

定義模塊

jquery這類的庫文件先不提，咱們說本身怎麼定義一個模塊，就是sub.js文件裏

//定義對象
define({
    color: "black",
    size: "unisize"
});

//定義方法
define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});

若是咱們定義的東西里面有依賴，好比用到jquery，咱們能夠這樣

define(["../lib/jquery"], function($) {

        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                $('.cart-color').append(color)
            }
        }
    }
);

思考一下，這裏的概念是這樣的，第一個參數，數組裏的東西是我接下來要依賴的模塊，後面的回調函數的參數，依次就是前面數組裏的對象的傳遞。

調用模塊

還記得上面那個目錄結構嗎，咱們依然摘取官網的實例, app.js是項目的入口，內容以下

require.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        app: '../app'
    }
});

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

require.config 配置文件，這裏定義了baseUrl等

接下來咱們require調用，注意這裏是調用，上面是定義define，不過看到代碼發現和以前相似，一樣是第一個參數是依賴對象的數組，回調裏會執行，參數是以前依賴的對象。

3.舉個栗子

實踐是檢驗真理的惟一標準，光看別人實踐也沒用，本身動手作一遍勝讀十年書。我本身寫了一個簡單的例子，讀者若是感興趣也能夠本身寫一個

我有一箇中間模塊，我把他叫作sth，這個模塊放在 sth.js 裏面，以下

define(function(require){
    var p1 = require('part/part1');
    var p2 = require('part/part2');
    return {
        f1: p1.doSome,
        f2: p2.doOther
    }
})

這裏面require了另外兩個子模塊，part1和part2，並把他們的方法拿出來放到中間塊裏面而且返回
咱們來看下part1，part2長啥樣，首先他們都是part1.js 和part2.js文件，require.js裏認爲你載入的都是js腳本文件，因此統一省略.js

//part1.js
define(function(){
    return {
        doSome: function(){
            console.log('doSome')
        }
    }
})

//part2.js
define(function(){
    return {
        doOther: function(){
            console.log('doOther')
        }
    }
})

而後咱們在主文件裏，好比index.html,main.js...調用 sth

require(['sth','check'],function(sth,check){
    if(check.ok){
        sth.f1()
    }else{
        sth.f2()
    }
})

咱們假設這裏還有另一個check對象，若是check爲真則執行sth.f1
,不然執行sth.f2 想一下，f1，f2實際上是在兩個文件裏面。

這裏只是我虛構一個假的例子，實際應用中要根據本身的實際需求去設計構思本身的項目，再次提醒，不要爲了用而用。

最後

好了騷年們，對require.js感興趣了嗎，那就去這裏瘋狂的看吧
http://requirejs.org/