快捷導(dǎo)航

淺析Javascript使用include/require

更新時間：2013年11月13日 10:27:03 作者：

它有一個要求就是你的前端js是作為模塊式的開發(fā), 在前端邏輯比較復(fù)雜的話, 使用模塊式來進行前端開發(fā)應(yīng)該是種不錯的選擇。這里只簡單介紹一下

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

復(fù)制代碼代碼如下:

  include: function (jsurl) {
        if (jsurl == null || typeof(jsurl) != 'string') return;
        var js = document.createElement('script');
        js.type = 'text/javascript';
        js.charset = 'utf-8';
        js.src = jsurl;
        $.ajaxSetup({ cache : true });
        $('head').append(js);
        //$.getScript(jsurl);
 }

基本用法

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

$.getScript('some.js', function() {
// 做寫依賴 some.js文件的事情.
});

而我們這里的 include 不需要這么寫, 而是直接:

include('some.js');

// 這里可以直接寫依賴 some.js 文件中定義的函數(shù)

開啟緩存

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

$.ajaxSetup({ cache : true });

這樣就會關(guān)閉jQuery自動在url后面加上時間戳的特性.

requireJs

如果你的腳本大量的存在互相依賴關(guān)系, 而又需要動態(tài)的決定加載哪些腳本, 那么我推薦的是使用requirejs .

它的基本用法是:

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

它有一個要求就是你的前端js是作為模塊式的開發(fā), 在前端邏輯比較復(fù)雜的話, 使用模塊式來進行前端開發(fā)應(yīng)該是種不錯的選擇, 而關(guān)于JS的模塊式開發(fā)在今后文章再專門談, 這里只簡單介紹一下, 如果對這個方面感興趣的可以到requireJs官網(wǎng)去看看.