require.js 簡潔入門

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

 

前言

 

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

1.爲何要用require.js

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

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

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

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

2.怎麼用require.js?

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

 

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

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

 

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

定義模塊

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

 

若是咱們定義的東西里面有依賴,好比用到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/

相關文章
相關標籤/搜索