国产亚洲精品一品区99热,伊人婷婷综合缴情亚洲五月,亚洲精品和日本精品

prototype學習資料(二)

js 代碼

/**? ?
*?如果調用者在傳入的options參數中定義?evalScripts=true，同時xmlhttp返回值的html中包含<script>標簽的話，執行該腳本? ?
*/ ? ??
if ?( this .options.evalScripts?&&?scripts)?{? ??
/**? ?
*?注意前二十行左右還有一個?match?的聲明? ?
*?var?match?=?new?RegExp(Ajax.Updater.ScriptFragment,?'img');? ?
*?和此處的區別就是，正則表達式匹配標記多一個?"g"。? ?
*?多個g,?所以?scripts?是一個數組，數組中每個元素是一段?<script>...</script>?文本。? ?
*?沒有g,?scripts.match(match)[1]?匹配的就是?<script>標記中的?script?代碼。? ?
*?關于正則表達式，請參考javascript的相關資料。? ?
*/ ? ??
match?=? new ?RegExp(Ajax.Updater.ScriptFragment,?'im');? ??
setTimeout(( function ()?{? ??
for ?( var ?i?=?0;?i?<?scripts.length;?i++)? ??
eval(scripts.match(match)[1]);? ??
}).bind( this ),?10);? ??
}? ??
}? ??
});? ??
/**? ?
*?定期更新器? ?
*/ ? ??
Ajax.PeriodicalUpdater?=?Class.create();? ??
Ajax.PeriodicalUpdater.prototype?=?( new ?Ajax.Base()).extend({? ??
initialize:? function (container,?url,?options)?{? ??
this .setOptions(options);? ??
this .onComplete?=? this .options.onComplete;? ??
this .frequency?=?( this .options.frequency?||?2);? ??
//?decay?可能是一個時間調整因素? ??
this .decay?=?1;? ??
this .updater?=?{};? ??
this .container?=?container;? ??
this .url?=?url;? ??
this .start();? ??
},? ??
start:? function ()?{? ??
this .options.onComplete?=? this .updateComplete.bind( this );? ??
this .onTimerEvent();? ??
},? ??
stop:? function ()?{? ??
this .updater.onComplete?=?undefined;? ??
clearTimeout( this .timer);? ??
( this .onComplete?||?Ajax.emptyFunction).apply( this ,?arguments);? ??
},? ??
updateComplete:? function (request)?{? ??
if ?( this .options.decay)?{? ??
this .decay?=?(request.responseText?==? this .lastText??? ??
this .decay?*? this .options.decay?:?1);? ??
this .lastText?=?request.responseText;? ??
}? ??
this .timer?=?setTimeout( this .onTimerEvent.bind( this ),? ??
this .decay?*? this .frequency?*?1000);? ??
},? ??
onTimerEvent:? function ()?{? ??
this .updater?=? new ?Ajax.Updater( this .container,? this .url,? this .options);? ??
}? ??
});? ??
/**? ?
*?根據?class?attribute?的名字得到對象數組，支持?multiple?class? ?
*? ?
*/ ? ??
document.getElementsByClassName?=? function (className)?{? ??
var ?children?=?document.getElementsByTagName('*')?||?document.all;? ??
var ?elements?=? new ?Array();? ??
for ?( var ?i?=?0;?i?<?children.length;?i++)?{? ??
var ?child?=?children;? ??
var ?classNames?=?child.className.split('?');? ??
for ?( var ?j?=?0;?j?<?classNames.length;?j++)?{? ??
if ?(classNames[j]?==?className)?{? ??
elements.push(child);? ??
break ;? ??
}? ??
}? ??
}? ??
return ?elements;? ??
}? ??
/*--------------------------------------------------------------------------*/ ? ??
/**? ?
*?Element?就象一個?java?的工具類，主要用來?隱藏/顯示/銷除?對象，以及獲取對象的簡單屬性。? ?
*? ?
*/ ? ??
if ?(!window.Element)?{? ??
var ?Element?=? new ?Object();? ??
}? ??
Object.extend(Element,?{? ??
/**? ?
*?切換?顯示/隱藏? ?
*/ ? ??
toggle:? function ()?{? ??
for ?( var ?i?=?0;?i?<?arguments.length;?i++)?{? ??
var ?element?=?$(arguments);? ??
element.style.display?=? ??
(element.style.display?==?'none'??? '' ?:?'none');? ??
}? ??
},? ??
hide:? function ()?{? ??
for ?( var ?i?=?0;?i?<?arguments.length;?i++)?{? ??
var ?element?=?$(arguments);? ??
element.style.display?=?'none';? ??
}? ??
},? ??
show:? function ()?{? ??
for ?( var ?i?=?0;?i?<?arguments.length;?i++)?{? ??
var ?element?=?$(arguments);? ??
element.style.display?=? '' ;? ??
}? ??
},? ??
/**? ?
*?從父節點中移除? ?
*/ ? ??
remove:? function (element)?{? ??
element?=?$(element);? ??
element.parentNode.removeChild(element);? ??
},? ??
??
getHeight:? function (element)?{? ??
element?=?$(element);? ??
return ?element.offsetHeight;? ??
},? ??
/**? ?
*?是否擁有?class?屬性值? ?
*/ ? ??
hasClassName:? function (element,?className)?{? ??
element?=?$(element);? ??
if ?(!element)? ??
return ;? ??
var ?a?=?element.className.split('?');? ??
for ?( var ?i?=?0;?i?<?a.length;?i++)?{? ??
if ?(a?==?className)? ??
return ? true ;? ??
}? ??
return ? false ;? ??
},? ??
/**? ?
*?為對象添加?class?屬性值? ?
*/ ? ??
addClassName:? function (element,?className)?{? ??
element?=?$(element);? ??
Element.removeClassName(element,?className);? ??
element.className?+=?'?'?+?className;? ??
},? ??
/**? ?
*?為對象移除?class?屬性值? ?
*/ ? ??
removeClassName:? function (element,?className)?{? ??
element?=?$(element);? ??
if ?(!element)? ??
return ;? ??
var ?newClassName?=? '' ;? ??
var ?a?=?element.className.split('?');? ??
for ?( var ?i?=?0;?i?<?a.length;?i++)?{? ??
if ?(a?!=?className)?{? ??
if ?(i?>?0)? ??
newClassName?+=?'?';? ??
newClassName?+=?a;? ??
}? ??
}? ??
element.className?=?newClassName;? ??
},? ??
//?removes?whitespace-only?text?node?children? ??
cleanWhitespace:? function (element)?{? ??
var ?element?=?$(element);? ??
for ?( var ?i?=?0;?i?<?element.childNodes.length;?i++)?{? ??
var ?node?=?element.childNodes;? ??
if ?(node.nodeType?==?3?&&?!/S/.test(node.nodeValue))? ??
Element.remove(node);? ??
}? ??
}? ??
});? ??
/**? ?
*?為?Element.toggle?做了一個符號連接，大概是兼容性的考慮? ?
*/ ? ??
var ?Toggle?=? new ?Object();? ??
Toggle.display?=?Element.toggle;? ??
/**? ?
*?動態插入內容的實現，MS的Jscript實現中對象有一個?insertAdjacentHTML?方法(http://msdn.microsoft.com/workshop/...djacenthtml.asp)? ?
*?這里算是一個對象形式的封裝。? ?
*/ ? ??
Abstract.Insertion?=? function (adjacency)?{? ??
this .adjacency?=?adjacency;? ??
}? ??
Abstract.Insertion.prototype?=?{? ??
initialize:? function (element,?content)?{? ??
this .element?=?$(element);? ??
this .content?=?content;? ??
??
if ?( this .adjacency?&&? this .element.insertAdjacentHTML)?{? ??
this .element.insertAdjacentHTML( this .adjacency,? this .content);? ??
}? else ?{? ??
/**? ?
*?gecko?不支持?insertAdjacentHTML?方法，但可以用如下代碼代替? ?
*/ ? ??
this .range?=? this .element.ownerDocument.createRange();? ??
/**? ?
*?如果定義了?initializeRange?方法，則實行，這里相當與定義了一個抽象的?initializeRange?方法? ?
*/ ? ??
if ?( this .initializeRange)? this .initializeRange();? ??
this .fragment?=? this .range.createContextualFragment( this .content);? ??
/**? ?
*?insertContent?也是一個抽象方法，子類必須實現? ?
*/ ? ??
this .insertContent();? ??
}? ??
}? ??
}? ??
/**? ?
*?prototype?加深了我的體會，就是寫js?如何去遵循　Don’t?Repeat?Yourself?(DRY)?原則? ?
*?上文中?Abstract.Insertion?算是一個抽象類，定義了名為　initializeRange?的一個抽象方法? ?
*?var?Insertion?=?new?Object()　建立一個命名空間? ?
*?Insertion.Before|Top|Bottom|After?就象是四個java中的四個靜態內部類，而它們分別繼承于Abstract.Insertion，并實現了initializeRange方法。? ?
*/ ? ??
var ?Insertion?=? new ?Object();? ??
/**? ?
*?將內容插入到指定節點的前面,?與指定節點同級? ?
*/ ? ??
Insertion.Before?=?Class.create();? ??
Insertion.Before.prototype?=?( new ?Abstract.Insertion('beforeBegin')).extend({? ??
initializeRange:? function ()?{? ??
this .range.setStartBefore( this .element);? ??
},? ??
insertContent:? function ()?{? ??
this .element.parentNode.insertBefore( this .fragment,? this .element);? ??
}? ??
});? ??
/**? ?
*?將內容插入到指定節點的第一個子節點前，于是內容變為該節點的第一個子節點? ?
*/ ? ??
Insertion.Top?=?Class.create();? ??
Insertion.Top.prototype?=?( new ?Abstract.Insertion('afterBegin')).extend({? ??
initializeRange:? function ()?{? ??
this .range.selectNodeContents( this .element);? ??
this .range.collapse( true );? ??
},? ??
insertContent:? function ()?{? ??
this .element.insertBefore( this .fragment,? this .element.firstChild);? ??
}? ??
});? ??
/**? ?
*?將內容插入到指定節點的最后，于是內容變為該節點的最后一個子節點? ?
*/ ? ??
Insertion.Bottom?=?Class.create();? ??
Insertion.Bottom.prototype?=?( new ?Abstract.Insertion('beforeEnd')).extend({? ??
initializeRange:? function ()?{? ??
this .range.selectNodeContents( this .element);? ??
this .range.collapse( this .element);? ??
},? ??
insertContent:? function ()?{? ??
this .element.appendChild( this .fragment);? ??
}? ??
});? ??
/**? ?
*?將內容插入到指定節點的后面,?與指定節點同級? ?
*/ ? ??
Insertion.After?=?Class.create();? ??
Insertion.After.prototype?=?( new ?Abstract.Insertion('afterEnd')).extend({? ??
initializeRange:? function ()?{? ??
this .range.setStartAfter( this .element);? ??
},? ??
insertContent:? function ()?{? ??
this .element.parentNode.insertBefore( this .fragment,? ??
this .element.nextSibling);? ??
}? ??
});? ??
/**? ?
*?針對?頁面元素對象(一般都是表單控件)的工具類，提供一些簡單靜態方法? ?
*?這些方法顯然常用在表單處理中? ?
*?注意?Field?這種聲明方式類似于?java?聲明一個靜態的?singleton?工具類? ?
*?等同于?:? ?
*?var?Field?=?new?Object();? ?
*?Field.extend({...});? ?
*? ?
*?后文中的?Form,?Event,?Position?對象聲明方式如出一轍? ?
*/ ? ??
var ?Field?=?{? ??
/**? ?
*?清除參數引用的對象的值? ?
*/ ? ??
clear:? function ()?{? ??
for ?( var ?i?=?0;?i?<?arguments.length;?i++)? ??
$(arguments).value?=? '' ;? ??
},? ??
/**? ?
*?使參數引用對象獲取焦點? ?
*/ ? ??
focus:? function (element)?{? ??
$(element).focus();? ??
},? ??
/**? ?
*?判斷參數引用對象是否有非空值，如為空值，返回false,?反之true? ?
*/ ? ??
present:? function ()?{? ??
for ?( var ?i?=?0;?i?<?arguments.length;?i++)? ??
if ?($(arguments).value?==? '' )? return ? false ;? ??
return ? true ;? ??
},? ??
/**? ?
*?使選中參數引用對象? ?
*/ ? ??
select:? function (element)?{? ??
$(element).select();? ??
},? ??
/**? ?
*?使參數引用對象處于可編輯狀態? ?
*/ ? ??
activate:? function (element)?{? ??
$(element).focus();? ??
$(element).select();? ??
}? ??
}? ??
/**? ?
*?表單工具類? ?
*/ ? ??
var ?Form?=?{? ??
/**? ?
*?將表單元素序列化后的值(其實就是?name=value?形式的名值配對)組合成?QueryString?的形式? ?
*/ ? ??
serialize:? function (form)?{? ??
var ?elements?=?Form.getElements($(form));? ??
var ?queryComponents?=? new ?Array();? ??
??
for ?( var ?i?=?0;?i?<?elements.length;?i++)?{? ??
var ?queryComponent?=?Form.Element.serialize(elements);? ??
if ?(queryComponent)? ??
queryComponents.push(queryComponent);? ??
}? ??
??
return ?queryComponents.join('&');? ??
},? ??
/**? ?
*?得到表單的所有元素對象? ?
*/ ? ??
getElements:? function (form)?{? ??
var ?form?=?$(form);? ??
var ?elements?=? new ?Array();? ??
for ?(tagName? in ?Form.Element.Serializers)?{? ??
var ?tagElements?=?form.getElementsByTagName(tagName);? ??
for ?( var ?j?=?0;?j?<?tagElements.length;?j++)? ??
elements.push(tagElements[j]);? ??
}? ??
return ?elements;? ??
},? ??
/**? ?
*?根據?type?和?name?過濾得到表單中符合的??對象? ?
*/ ? ??
getInputs:? function (form,?typeName,?name)?{? ??
var ?form?=?$(form);? ??
var ?inputs?=?form.getElementsByTagName('input');? ??
??
if ?(!typeName?&&?!name)? ??
return ?inputs;? ??
??
var ?matchingInputs?=? new ?Array();? ??
for ?( var ?i?=?0;?i?<?inputs.length;?i++)?{? ??
var ?input?=?inputs;? ??
if ?((typeName?&&?input.type?!=?typeName)?||? ??
(name?&&?input.name?!=?name))? ??
continue ;? ??
matchingInputs.push(input);? ??
}? ??
return ?matchingInputs;? ??
},? ??
/**? ?
*?將指定表單的元素置于不可用狀態? ?
*/ ? ??
disable:? function (form)?{? ??
var ?elements?=?Form.getElements(form);? ??
for ?( var ?i?=?0;?i?<?elements.length;?i++)?{? ??
var ?element?=?elements;? ??
element.blur();? ??
element.disabled?=?' true ';? ??
}? ??
},? ??
/**? ?
*?將指定表單的元素置于可用狀態? ?
*/ ? ??
enable:? function (form)?{? ??
var ?elements?=?Form.getElements(form);? ??
for ?( var ?i?=?0;?i?<?elements.length;?i++)?{? ??
var ?element?=?elements;? ??
element.disabled?=? '' ;? ??
}? ??
},? ??
/**? ?
*?使表單的第一個非?hidden?類型而且處于可用狀態的元素獲得焦點? ?
*/ ? ??
focusFirstElement:? function (form)?{? ??
var ?form?=?$(form);? ??
var ?elements?=?Form.getElements(form);? ??
for ?( var ?i?=?0;?i?<?elements.length;?i++)?{? ??
var ?element?=?elements;? ??
if ?(element.type?!=?'hidden'?&&?!element.disabled)?{? ??
Field.activate(element);? ??
break ;? ??
}? ??
}? ??
},? ??
/*? ?
*?重置表單? ?
*/ ? ??
reset:? function (form)?{? ??
$(form).reset();? ??
}? ??
}? ??
/**? ?
*?表單元素工具類? ?
*/ ? ??
Form.Element?=?{? ??
/**? ?
*?返回表單元素的值先序列化,?其實就是?name=value?形式的名值配對? ?
*/ ? ??
serialize:? function (element)?{? ??
var ?element?=?$(element);? ??
var ?method?=?element.tagName.toLowerCase();? ??
var ?parameter?=?Form.Element.Serializers[method](element);? ??
??
if ?(parameter)? ??
return ?encodeURIComponent(parameter[0])?+?'='?+? ??
encodeURIComponent(parameter[1]);? ??
},? ??
/**? ?
*?返回表單元素的值? ?
*/ ? ??
getValue:? function (element)?{? ??
var ?element?=?$(element);? ??
var ?method?=?element.tagName.toLowerCase();? ??
var ?parameter?=?Form.Element.Serializers[method](element);? ??
??
if ?(parameter)? ??
return ?parameter[1];? ??
}? ??
}? ??
/**? ?
*?prototype?的所謂序列化其實就是將表單的名字和值組合成一個數組? ?
*/ ? ??
Form.Element.Serializers?=?{? ??
input:? function (element)?{? ??
switch ?(element.type.toLowerCase())?{? ??
case ?'submit':? ??
case ?'hidden':? ??
case ?'password':? ??
case ?'text':? ??
return ?Form.Element.Serializers.textarea(element);? ??
case ?'checkbox':? ??
case ?'radio':? ??
return ?Form.Element.Serializers.inputSelector(element);? ??
}? ??
return ? false ;? ??
},? ??
/**? ?
*?單/多選框?由此方法處理序列化? ?
*/ ? ??
inputSelector:? function (element)?{? ??
if ?(element.checked)? ??
return ?[element.name,?element.value];? ??
},? ??
/**? ?
*?textarea?由此方法處理序列化? ?
*/ ? ??
textarea:? function (element)?{? ??
return ?[element.name,?element.value];? ??
},? ??
/**? ?
*?select?下拉列表由此方法處理序列化? ?
*/ ? ??
select:? function (element)?{? ??
var ?value?=? '' ;? ??
if ?(element.type?==?'select-one')?{? ??
var ?index?=?element.selectedIndex;? ??
if ?(index?>=?0)? ??
value?=?element.options[index].value?||?element.options[index].text;? ??
}? else ?{? ??
/**? ?
*?支持?select-mulitple?的下拉列表，返回的數組的第二個元素，是一個值數組? ?
*/ ? ??
value?=? new ?Array();? ??
for ?( var ?i?=?0;?i?<?element.length;?i++)?{? ??
var ?opt?=?element.options;? ??
if ?(opt.selected)? ??
value.push(opt.value?||?opt.text);? ??
}? ??
}? ??
return ?[element.name,?value];? ??
}? ??
}??

posted on 2007-09-20 19:37 李云澤閱讀(241) 評論(0) 編輯收藏所屬分類: Prototype(Ajax)


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: prototype.js開發筆記 (轉) prototype對ajax的支持 prototype學習資料(三) prototype學習資料(二) prototype學習資料(一)

我思故我強

導航

統計

公告

公告

常用鏈接

留言簿(1)

文章分類(196)

文章檔案(164)

相冊

我收藏的網址

搜索

積分與排名

最新評論

prototype學習資料(二)

prototype學習資料(二)