舊代碼回顧：YUI-ext 代碼兩側/XML 資料島/WSC 元件化

舊時，寫 yuiext 的代碼的時候便學習過這些代碼，兩側都是制作動畫的代碼。時間大概是兩年前左右（07年初），但心路曆程感覺是過了許久 呵呵，真的有天上十天，地下十年的感覺。那時候，靠自學，瞎渾的什麼的都不懂，往這幾句 script 撞呀撞呀，撞到做出效果為止！這不，一番經曆，好歹也認識不少：JS 的道路并不坦，學 ajax 真的要下苦功！

言畢，醜漢終需見家翁，呵呵。下是那時稚嫩的代碼。

var fade_in_pic = function() {

var pic = Array();

pic[0] = "images//china.gif";

pic[1] = "images//Greece.gif";

pic[2] = "images//Italy.gif";

var img = Array();

for (i in pic) {

img[i] = new Image(); // 這裡有一絲不解，為什麼Image會在這裡成關鍵字？

img[i].src = pic[i];

}

var loop;

var j = 0;

return { ss: function() {

var animator = new YAHOO.ext.Animator();

var cursor = new YAHOO.ext.Actor('holder', animator);

animator.startCapture();

// pause .5 seconds

animator.pause(4);

cursor.fade(1);

cursor.appear();

animator.play();

$("holder").src = img[j].src

j += 1;

if (j > pic.length - 1) j = 0;

loop = setTimeout("fade_in_pic.ss()", 5000)

} ();

YAHOO.util.Event.addListener(window, "load", fade_in_pic.ss);

var side_show = {

init: function() {

// start capturing

var effect = new YAHOO.ext.Actor("img1", animator);

var effect_next = new YAHOO.ext.Actor("img2", animator);

effect_next.hide();

animator.beginSync();

effect.pulsate(5);

effect.fade();

animator.endSync();

animator.pause(2); //中斷

effect_next.show();

animator.addAsyncCall(function() { alert(); }, 1);

animator.play(); //play()一定放最後

effect = null;

YAHOO.util.Event.addListener(window, "load", side_show.init);

純用戶端解決方案，呵呵在當年還是蠻實用的技巧，出來的效果也是“無重新整理”的加載XML，包括可分頁。就是這份小腳本，小弟愚鈍，啃了不少的時間。删掉怪可惜，放這兒算是一份紀念帖吧

function loadxml() {

var xDoc = null; //Browser Version

if (document.implementation && document.implementation.createDocument) {

xDoc = document.implementation.createDocument("", "", null);

//alert("體驗更佳效果,請使用IE浏覽器.版本5.0或以上.");

var req = new XMLHttpRequest(); //make a instance for loading XML files(loacl or Remote

req.open("GET", "web_config.xml", false);

req.send(null);

// print the name of the root element or error message

var dom = req.responseXML;

dump(dom.documentElement.nodeName == "parsererror" ? "error while parsing" : dom.documentElement.nodeName);

new Insertion.Bottom('obj_title', dom.getElementsByTagName('title')[0].firstChild.data);

//alert(dom.getElementsByTagName('title')[0].firstChild.data)

return;

} else if (typeof ActiveXObject != "undefined") {

var msXmlAx = null;

try { msXmlAx = new ActiveXObject("Msxml2.DOMDocument"); }

catch (e) { msXmlAx = new ActiveXObject("Msxml.DOMDocument"); }

xDoc = msXmlAx;

if (xDoc == null || typeof xDoc.load == "undefined") { xDoc = null; }

xDoc.async = false;

xDoc.load("web_config.xml");

root = xDoc.documentElement;

// function loadxml() { //loadxml 1 = it's IE;

// var xDoc=null; //Browser Version

// if (document.implementation && document.implementation.createDocument){

// xDoc=document.implementation.createDocument("","",null);

// alert("體驗更佳效果,請使用IE浏覽器.版本5.0或以上.");

// // for FF reading XML

//

//var req = new XMLHttpRequest(); //make a instance for loading XML files(loacl or Remote

//req.open("GET", "web_config.xml", false);

//req.send(null);

//// print the name of the root element or error message

//var dom = req.responseXML;

//dump(dom.documentElement.nodeName == "parsererror" ? "error while parsing" : dom.documentElement.nodeName);

//var ddd = dom.getElementsByTagName('title')[0].firstChild.data;

////alert(dom.getElementsByTagName('title')[0].firstChild.data)

// return(loadxml = false;);

// }else if (typeof ActiveXObject != "undefined"){

// var msXmlAx=null;

// try{msXmlAx=new ActiveXObject("Msxml2.DOMDocument");}

// catch (e){msXmlAx=new ActiveXObject("Msxml.DOMDocument");}

// xDoc=msXmlAx;

// }

// if (xDoc==null || typeof xDoc.load=="undefined"){xDoc=null;}

// xDoc.async = false;

// xDoc.load("web_config.xml");

// root = xDoc.documentElement;

// return(loadxml = true);

// }

function list(page) {

try {

var loading = $("loading");

loading.style.display = "none";

var bigclass = $("bigclass"); //there's problem :Select alway over the DIV...

bigclass.style.display = "";

var objXML = document.getElementById("Detailsdso");

var rs = objXML.recordset;

rs.pagesize = 4 //new_pagesize(); //擷取每頁顯示條目數量

var dd = objXML.recordset.pagecount;

var rc = rs.RecordCount;

if (page <= dd) {

rs.absolutepage = page;

var str = " ";

while (!(rs.eof)) {

if (j <= (new_pagesize() - 1)) {

str = str + "<div align=/"left/">";

//str=str+ "<tr><Td align=/"left/">"

str = str + "<img src="/" mce_src="/""images/memo.gif/" border=/"0/" /> ";

str = str + "<a href="/" mce_href="/""page_detail.asp?id=" + rs("id") + "/">" + rs("title") + "</a>";

str = str + "<div styele=/"margin:10px;/"> </div>";

//str=str+ "</td></tr>" str=str+ ("</div>");

j = j + 1;

rs.movenext;

pagepage.innerHTML = str;

//輸出分頁導航

var str2 = "";

var onclickk = "<a href="###" mce_href="###" onclick='list('";

for (var i = 1; i <= dd; i++) {

str2 = str2 + "<a href="###" mce_href="###" onclick='list(" + i + ");'>" + i + "</a> ";

s_page.innerHTML = str2;

total_page.innerText = dd;

total_page.title = dd; //插入總頁數

document.getElementById("pageno").value = page;

var obj_curr_page = document.getElementById("curr_page");

obj_curr_page.innerHTML = page;

var obj_total_record = document.getElementById("total_record");

obj_total_record.innerHTML = rc;

loadxml(); //讀取配置檔案

var news_pagesize = root.selectSingleNode("//Page/new_pagesize").firstChild.nodeValue;

var obj_news_pagesize = document.getElementById("news_pagesize");

obj_news_pagesize.innerHTML = news_pagesize;

else {

alert("資料不夠,總共才" + dd + "頁");

catch (e) { list1(1) }

function move_last() {

var obj_total_page = document.getElementById("total_page").title;

list1(obj_total_page);

function list1(page) { //緩沖區設計 避免LOAD頁面時XML資料還沒到來

var sss = $("Detailsdso");

//alert(sss.readyState)

if (sss.src == "") { sss.src = xml_file; } //将LOAD檔案歸入JS控制 以便檢測狀況

if (sss.readyState == "complete") { list(page); }

bigclass.style.display = "none";

loading.style.display = "block";

Effect.Pulsate("loading");

loading.style.left = Math.floor(window.screen.width / 3); //居中

loading.style.top = Math.floor(window.screen.height / 3);

//alert(loading.style)

setTimeout("list(" + page + ")", 1000); //re-loading time 根據網速設定時間不同

function _goto() {

if (checkNum(document.getElementById("pageno").value))

{ list1(Math.floor(document.getElementById("pageno").value)) }

else { document.getElementById("pageno").value = 1 }

function checkNum(str) { return !//D/.test(str) } //檢查是否數字組成

function new_pagesize() {

loadxml();

var new_pagesize = root.selectSingleNode("//Page/new_pagesize").firstChild.nodeValue;

//var obj_new_pagesize = document.getElementById("new_pagesize");

//obj_new_pagesize.innerText = new_pagesize;

return new_pagesize = new_pagesize;

//alert(new_pagesize);

function ContentSize(size)//文章字型調整

{

var obj = $("main_content");

obj.style.fontSize = size + "px";

function ch_dl(selObj, restore) { //reload & RE SQL//alert("s");//出現同步問題 ,可在緩沖區裡解決

var objXML3 = document.getElementById("Detailsdso");

objXML3.src = xml_file + "?s1=" + selObj.options[selObj.selectedIndex].value;

list1(1);

if (restore) { selObj.selectedIndex = 0; }

記得早期把玩 yui-ext 時候，曾經給一個函數折騰得幾度想放棄 yui-ext。所說的那個函數就是就是 onReady

精簡版：

<a target="_blank" href="http://js8.in/682.html#0-tsina-1-29606-397232819ff9a47a7b7e80a40613cfe1">http://js8.in/682.html#0-tsina-1-29606-397232819ff9a47a7b7e80a40613cfe1</a>

<a target="_blank" href="http://dustindiaz.com/smallest-domready-ever">http://dustindiaz.com/smallest-domready-ever</a>

WSC 元件就是微軟平台上腳本的子產品化。在筆者的實踐過程中，研究出一套靈活傳遞對象的方法，其實質就是送入 host.eval 函數的引用。見下面的 WSC 元件例子：

通過GetObject()調用：

// D:/dev/new/news/news.wsc

$$ = GetObject("script:" + Server.mappath('/libs/edk/edk-server/edk.wsc').replace(/\\/g, '/')).getEdk();

附送一個小腳本，有時很有用。