動態 load javascript file

by thinker

關鍵字:

$javascript$ 愈寫愈多，就會想要將之分割成一個個獨立的檔案，當作 module，以方便 reuse。但是，$javascript$ 並沒有提供 module 或 package 的機制。使用者必需透過 HTML 的 <script> tag，將 $javascript$ 檔案加入 document。當檔案一多時，module 之間的 dependence，讓使用者必需加入大量的 <script> tag，增加許多的困擾。況且，使用者也不清楚 dependence 的關係。

== 使用 XMLHttpRequest 和 eval() ==
使用 XMLHttpRequest，$javascript$ 可以動態讀取遠端的檔案。我們使用 XMLHttpReqest 讀取 server 上的 $javascript$ file，然後再使用 eval() function，執行檔案的內容。
{{{
function _jsloader_get_req() {
        return new XMLHttpRequest();
}

function loadjs(url) {
        var req = _jsloader_get_req();
        var js;

req.open('GET', url, false);
        req.send(null);
        if(req.status == 200) {
                js = req.responseText;
                this.eval(js);
        } else
                return false;
        return true;
}
}}}
透過 this.eval() 將執行過程所產生的變數，存放成為 this 的 properties。當 loadjs() 不是任何 object 的 method 時，預定的 this 就是 global 的 name-space。因此，產生的變數將進入 global 的 name-space。

== 使用 ==
{{{
tools.js:
  function hello() {
    alert("hello");
  }

app.js:
  loadjs("tools.js");
  hello();
}}}
app.js 動態載入 tools.js，並使用 hello() 這個 function。透過 $javascript$ 的程式，自動載入其它的 $javascript$ file，可以解決 module 之間的 dependence。

== REFERENCE ==
 * linkname:eval() http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/ref_d-e.htm#573
 * http://kb.mozillazine.org/XMLHttpRequest

最後更新時間: 2006-08-12 13:42:25 CST | 引用

查詢:

COMMENTS:

on 2007-02-03 03:32:09 CST

pan said ..

Excellent idea. I've been trying to find a good way to load js for a long time. Isn't it true that ActiveXObject should be included for a better browser coverage ?

on 2007-02-03 03:50:05 CST

pan said ..

This is what I use to import a js. Unfortunately, it only works in IE. In Firefox, it has to wait until the document is fully loaded. function importjs(x){ var <br> s=document.body.appendChild( <br> document.createElement('script')); <br> s.language='javascript';void(s.src=x);}

on 2007-02-03 03:51:45 CST

pan said ..

mmmhhh... trying to share my code for how I did this load js thingy but the comment didn't show up after I hit [Submit Comment] ...

on 2007-02-03 03:55:18 CST

pan said ..

Oh, I have to refresh the page for it to show up ... this doesn't feel right. Hitting [Submit Comment] should have made it refresh automatically. Also, as you can see, your commenting system doesn't allow good code display. This becomes a big problem in a heavily programming oriented site ... i should stop here otherwise my comments getting to look like spam ...

on 2007-02-03 11:03:43 CST

Thinker said ..

to pan, thanks for your comments. I am a lazy boy that only test my system under firefox. In original, I don't want to provide comment system. But, one day, I have a idea of anti-spam for blog comments with crytograph theogry and make a demo system. This comment sys is the demo, I don't make it elegant. But, you are right, I should not give people a unfinished function. I will fix these problems.