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。

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

2.怎么用require.js?

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

 

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

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

 

這里是一個app應用,但是普通頁面開發也可以借鑒的是這個概念,就是把js根據功能和目的分開放,庫文件放到一起,子模塊放到一起,入口js再來選擇性載入。
這里注意一下,模塊化開發的目的是方便開發者理解和提高效率,如果讀者認為沒有必要完全則不需要硬去這么做,為了使用什么概念或者方法反而增加了開發成本的事情不要做。

定義模塊

jquery這類的庫文件先不提,我們說自己怎么定義一個模塊,就是sub.js文件里

 

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

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

調用模塊

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

require.config 配置文件,這里定義了baseUrl等

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

3.舉個栗子

實踐是檢驗真理的唯一標准,光看別人實踐也沒用,自己動手做一遍勝讀十年書。我自己寫了一個簡單的例子,讀者如果感興趣也可以自己寫一個

我有一個中間模塊,我把他叫做sth,這個模塊放在 sth.js 里面,如下

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

 

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

我們假設這里還有另外一個check對象,如果check為真則執行sth.f1
,否則執行sth.f2 想一下,f1,f2其實是在兩個文件里面。

這里只是我虛構一個假的例子,實際應用中要根據自己的實際需求去設計構思自己的項目,再次提醒,不要為了用而用。

最后

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM