淺析Javascript使用include/require_javascript技巧

1. javascript include
Javascript 沒有include 語句有時挺討厭, 特別是腳本和腳本之間存在依存的關係, 你根本就不能動態的去控制載入腳本, 一般來說最簡單的include 基本就是這樣的, 當然我們這個使用了jQuery 來進行請求腳本.

複製程式碼

複製程式碼

複製程式碼



複製程式碼


程式碼如下:

  include: function (jsurl) {        if (js|| typeof(url) ! document.createElement('script');        js.type = 'text/javascript';           $.ajaxSetup ({ cache : true });        $('head').append(js);        //$.getScript(jsurl);

基本用法

要注意的是該函數其實在發送GET請求的事情是jQuery.ajax 的getScript() 來處理的, 但是在GET後的處理和$.getScript() 不同, 因此導致使用方法會不一樣, getScript() 一般需要把有依賴的函數寫到它的回呼函數中去, 如:

$.getScript('some.js', function() {

    // 做寫依賴 some.js檔案的事情.

});

而我們這裡的 include 不需要這麼寫, 而是直接:

include('some.js'); // 這裡可以直接寫依賴 some.js 檔案中定義的函數

開啟快取

另外就是關於檔案快取, 預設情況下$.getScript 是會在url 後面加上一個時間戳, 使得在第二次請求的時候不讓瀏覽器去讀取快取檔案, 如果我們getScript("some .js") , 最後在請求的時候會變成GET some.js?_23432434534235 之類的, 這是一種強制不緩存的策略, 在開發階段是比較好的, 但到了生產階段, 會導致用戶的瀏覽器每次都不緩存我們的js腳本, 這對效率是很大的影響, 我們應該自己在js腳本後面自己加上版本戳, 比如somesome.js?v=1 , 而不是使用每次都會變的時間戳記, 所以需要使用:

$.ajaxSetup({ cache : true }); 這樣就會關閉jQuery自動在url後面加上時間戳記的特性.

requireJs

如果你的腳本大量的存在互相依賴關係, 而又需要動態的決定加載哪些腳本, 那麼我推薦的是使用requirejs .

它的基本用法是:

require(["some/module", "a.js", "b.js"], function(someModule) {    // do something});

它有一個要求就是你的前端js是作為模組式的開發, 在前端邏輯比較複雜的話, 使用模組式來進行前端開發應該是種不錯的選擇, 而關於JS的模組式開發在今後文章再專門談, 這裡只簡單介紹一下, 如果對這個方面有興趣的可以到requireJs官網去看看.