2008/11/15

網頁也能動態載入 Javascript 嗎--續2

直接貼範例,說明在範例中

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test eval</title>
<script type="application/javascript" src="mtm.js"></script>
<script type="application/javascript" src="net.js"></script>
<script>

var extJS = [
{ name: "smile", file: "smile.js", },
{ name: "dance", file: "dance.js" },
];

var Objs = new Array(); // In my mind, this will not know length now.
var msg;

function Ext(obj) {
this.obname = obj.name;
this.file = obj.file;

// use net.ContentLoader() to load external javascript file
this.load = function() {
msg.innerHTML += "<P>Loading " + this.file;
var ajax = new net.ContentLoader(this.file, this.onload, null, 'GET', this.obname);
}

// when loaded, use mtm.insertJS() to insert into document
// 注意,此時已經離開本物件範例而是回到 net.ContentLoader() 的範圍,所以
// 才會是使用 this.id, 而非 this.obname, 故意取不同名稱以便識別
this.onload = function() {
mtm.insertJS(this.req.responseText);

// use eval to "new" object which defined in ext js
eval('Objs['+Objs.length+'] = new '+this.id +'("wade");');
msg.innerHTML += "<P>"+Objs[Objs.length-1].show();
}
}

function init()
{
msg = document.getElementById('msgbar');
msg.innerHTML = "";
for (var i=0; i<extJS.length; i++) {
(new Ext(extJS[i])).load();
}
}
</script>
</head>
<body onload="init()">
<div id=msgbar>Waiting......</div>
</body>
</html>

// smile.js
function smile(name)
{
this.show = function () {
return name + ' smile :-)';
}
}

// dance.js
function dance(name)
{
this.show = function () {
return name + ' dance happily';
}
}

0 意見: