DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 使用RequireJS優化JavaScript引用代碼的方法
使用RequireJS優化JavaScript引用代碼的方法
編輯:關於JavaScript     

 RequireJS是一個提高你的javascript代碼速度和質量的有效方法,同時它還讓你的代碼更容易閱讀和維護。

在本文中,我會為你介紹RequireJS和應該如何使用它。我們討論引入文件和定義模塊,甚至還會接觸優化方面的知識。

簡單的說,require.js是一個腳本載入程序,允許你把你的javascript代碼獨立成文件和模塊,同時管理每個模塊間的依賴關系。

引入文件

在開始使用RequireJS前,我們需要先下載它的庫和Asynchronous Module Definition(AMD)文件。然後在文檔頭部鏈接到require.js文件,就如:

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

你可能會問data-main屬性是什麼,使用RequireJS意味著當你在文檔的頭部調用require的時候,你同時也會鏈接到你的javascript應用的主文件,在這個例子裡面就是main.js(請注意,RequireJS自動添加.js後綴到文件名的後面)

在main.js文件裡面,需要為RequireJS做配置,載入模塊和定義一個base路徑,以便在引入文件時使用。

Require函數

RequireJS使用一個簡單的require函數去導入腳本,在這個例子裡面,RequireJS導入的是JQuery:
 

require(["jquery"], function($) {
 $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

RequireJS的一個優點就是,它非常容易閱讀。在上面的代碼中,我們可以看到,首先require函數抓取名字為jquery.js的文件,然後給一個匿名函數傳入$作為參數,當這個動作完成後,你就可以任意使用JQuery的代碼了。

現在,你的代碼中一般不會包含jquery.js文件的jQuery庫,就如大多數的插件和框架,我們通常選擇從他們的GitHub或者Google CDN中導入進來,這樣我們就需要配置他們的真正路徑:
 

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

這就是說你可以通過Google導入jquery(請注意我在這個例子裡面使用的是"jquery"名稱,你可以使用任何你喜歡的名稱)

定義模塊

使用AMD模式,意味著我們的代碼可以結構化成為模塊;這些模塊實現應用中的某些功能。你可以在一個模塊中只放兩行代碼或者100行代碼,這完全決定於你想通過模塊實現什麼功能。

定義模塊,我們可以這樣寫:
 

define(function () {
 function add (x,y) {
  return x + y;
 }
});

這個裡面裡面,我定義了一個add函數,並且沒有任何依賴,但是如果這個函數需要jquery才能正常工作,定義代碼可能就是這樣:
 

define([‘jquery'], function () {
 function place(mydiv) {
$(mydiv).html(‘My Sample Text');
 }
});

使用這種語法,我們告訴JavaScript首先導入jquery,然後運行代碼,這樣任何時候都能使用jquery。我們也可以使用在Javascript文件中定義的模塊,不僅限於框架或者插件。

優化

就像你看到的一樣,RequireJS是一個強大的工具,去把你的文件組織成模塊,並且在你需要的時候才導入。其中的缺點就是大量的javascript文件的時候,也需要大量的導入時間,所以RequireJS包含了一個optimizer優化器去收集所有文件的數據並把它放到一個壓縮文件裡面。

總的來說,RequireJS是一個很好的工具去組織和優化你web應用中的Javascript。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved