require.js 簡潔入門

原文地址：http://blog.sae.sina.com.cn/archives/4382

 

前言

 

提到require.js大多數人會說提到模塊化開發，AMD等等，其實require.js並沒有這么多復雜的概念，這里我就希望排除這些概念，從實用的角度來簡單說一下require.js是干什么的，我們要怎么用它。

1.為什么要用require.js

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

當你的js項目足夠大，足夠復雜，依賴的庫足夠多，你完全需要這樣一種工具去做這些js的管理，否則你的項目擴展性很差，結構很糟糕，要找到想修改的地方會很困難。

其實其他很多編程語言都已經在代碼里實現了類似的功能，比如這段python。

 

 

1 2 3

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

很好理解，我們導入了web對象，然后就可以在接下來的代碼里使用web.database

2.怎么用require.js？

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

 

 

1	<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文件里

 

 

1 2 3 4 5

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

 

 

 

1 2 3 4 5 6 7 8 9

//定義方法 define(function () {     //Do setup work here       return {         color: "black",         size: "unisize"     } });

如果我們定義的東西里面有依賴，比如用到jquery，我們可以這樣

 

 

1 2 3 4 5 6 7 8 9 10 11

define(["../lib/jquery"], function($) {           return {             color: "blue",             size: "large",             addToCart: function() {                 $('.cart-color').append(color)             }         }     } );

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

調用模塊

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

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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 里面，如下

 

 

1 2 3 4 5 6 7 8

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

 

 

1 2 3 4 5 6 7 8

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

 

 

 

1 2 3 4 5 6 7 8

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

然后我們在主文件里，比如index.html,main.js…調用 sth

 

 

1 2 3 4 5 6 7

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/