快捷導(dǎo)航

淺析Javascript使用include/require

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

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

1. javascript include
Javascript 沒(méi)有 include 語(yǔ)句有時(shí)挺討厭, 特別是腳本和腳本之間存在依存的關(guān)系, 你根本就不能動(dòng)態(tài)的去控制加載腳本, 一般來(lái)說(shuō)最簡(jiǎn)單的 include 基本就是這樣的, 當(dāng)然我們這個(gè)使用了 jQuery 來(lái)進(jìn)行請(qǐng)求腳本.

復(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ù)其實(shí)在發(fā)送GET請(qǐng)求的事情是 jQuery.ajax 的 getScript() 來(lái)處理的, 但是在GET后的處理和 $.getScript() 不同, 因此導(dǎo)致使用方法會(huì)不一樣, getScript() 一般需要把有依賴的函數(shù)寫到它的回調(diào)函數(shù)中去, 如:

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

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

include('some.js');

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

開啟緩存

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

$.ajaxSetup({ cache : true });

這樣就會(huì)關(guān)閉jQuery自動(dòng)在url后面加上時(shí)間戳的特性.

requireJs

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

它的基本用法是:

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

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