這篇文章主要介紹了使用RequireJS優化JavaScript引用代碼的方法,RequireJS是一款人氣JS庫,需要的朋友可以參考下
RequireJS是一個提高你的javascript代碼速度和質量的有效方法,同時它還讓你的代碼更容易閱讀和維護。
在本文中,我會為你介紹RequireJS和應該如何使用它。我們討論引入文件和定義模塊,甚至還會接觸優化方面的知識。
簡單的說,require.js是一個腳本載入程序,允許你把你的javascript代碼獨立成文件和模塊,同時管理每個模塊間的依賴關系。
引入文件
在開始使用RequireJS前,我們需要先下載它的庫和Asynchronous Module Definition(AMD)文件。然后在文檔頭部鏈接到require.js文件,就如:
?
1 2 <script src="require.js" data-main="main"></script>你可能會問data-
在main.js文件里面,需要為RequireJS做配置,載入模塊和定義一個base路徑,以便在引入文件時使用。
Require函數
RequireJS使用一個簡單的require函數去導入腳本,在這個例子里面,RequireJS導入的是JQuery:
?
1 2 3 require(["jquery"], function($) { $(‘#mydiv”).html(‘Hello this is RequireJS talking”); });RequireJS的一個優點就是,它非常容易閱讀。在上面的代碼中,我們可以看到,首先require函數抓取名字為jquery.js的文件,然后給一個匿名函數傳入$作為參數,當這個動作完成后,你就可以任意使用JQuery的代碼了。
現在,你的代碼中一般不會包含jquery.js文件的jQuery庫,就如大多數的插件和框架,我們通常選擇從他們的GitHub或者Google CDN中導入進來,這樣我們就需要配置他們的真正路徑:
?
1 2 3 4 5 require.config({ paths: { "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" } });這就是說你可以通過Google導入jquery(請注意我在這個例子里面使用的是"jquery"名稱,你可以使用任何你喜歡的名稱)
定義模塊
使用AMD模式,意味著我們的代碼可以結構化成為模塊;這些模塊實現應用中的某些功能。你可以在一個模塊中只放兩行代碼或者100行代碼,這完全決定于你想通過模塊實現什么功能。
定義模塊,我們可以這樣寫:
?
1 2 3 4 5 define(function () { function add (x,y) { return x + y; } });新聞熱點
疑難解答