我思故我強

          prototype學習資料(二)

          prototype學習資料(二)

          js 代碼
          1. /**? ?
          2. *?如果調用者在傳入的options參數中定義?evalScripts=true,同時xmlhttp返回值的html中包含<script>標簽的話,執(zhí)行該腳本? ?
          3. */ ? ??
          4. if ?( this .options.evalScripts?&&?scripts)?{? ??
          5. /**? ?
          6. *?注意前二十行左右還有一個?match?的聲明? ?
          7. *?var?match?=?new?RegExp(Ajax.Updater.ScriptFragment,?'img');? ?
          8. *?和此處的區(qū)別就是,正則表達式匹配標記多一個?"g"。? ?
          9. *?多個g,?所以?scripts?是一個數組,數組中每個元素是一段?<script>...</script>?文本。? ?
          10. *?沒有g,?scripts.match(match)[1]?匹配的就是?<script>標記中的?script?代碼。? ?
          11. *?關于正則表達式,請參考javascript的相關資料。? ?
          12. */ ? ??
          13. match?=? new ?RegExp(Ajax.Updater.ScriptFragment,?'im');? ??
          14. setTimeout(( function ()?{? ??
          15. for ?( var ?i?=?0;?i?<?scripts.length;?i++)? ??
          16. eval(scripts.match(match)[1]);? ??
          17. }).bind( this ),?10);? ??
          18. }? ??
          19. }? ??
          20. });? ??
          21. /**? ?
          22. *?定期更新器? ?
          23. */ ? ??
          24. Ajax.PeriodicalUpdater?=?Class.create();? ??
          25. Ajax.PeriodicalUpdater.prototype?=?( new ?Ajax.Base()).extend({? ??
          26. initialize:? function (container,?url,?options)?{? ??
          27. this .setOptions(options);? ??
          28. this .onComplete?=? this .options.onComplete;? ??
          29. this .frequency?=?( this .options.frequency?||?2);? ??
          30. //?decay?可能是一個時間調整因素? ??
          31. this .decay?=?1;? ??
          32. this .updater?=?{};? ??
          33. this .container?=?container;? ??
          34. this .url?=?url;? ??
          35. this .start();? ??
          36. },? ??
          37. start:? function ()?{? ??
          38. this .options.onComplete?=? this .updateComplete.bind( this );? ??
          39. this .onTimerEvent();? ??
          40. },? ??
          41. stop:? function ()?{? ??
          42. this .updater.onComplete?=?undefined;? ??
          43. clearTimeout( this .timer);? ??
          44. ( this .onComplete?||?Ajax.emptyFunction).apply( this ,?arguments);? ??
          45. },? ??
          46. updateComplete:? function (request)?{? ??
          47. if ?( this .options.decay)?{? ??
          48. this .decay?=?(request.responseText?==? this .lastText??? ??
          49. this .decay?*? this .options.decay?:?1);? ??
          50. this .lastText?=?request.responseText;? ??
          51. }? ??
          52. this .timer?=?setTimeout( this .onTimerEvent.bind( this ),? ??
          53. this .decay?*? this .frequency?*?1000);? ??
          54. },? ??
          55. onTimerEvent:? function ()?{? ??
          56. this .updater?=? new ?Ajax.Updater( this .container,? this .url,? this .options);? ??
          57. }? ??
          58. });? ??
          59. /**? ?
          60. *?根據?class?attribute?的名字得到對象數組,支持?multiple?class? ?
          61. *? ?
          62. */ ? ??
          63. document.getElementsByClassName?=? function (className)?{? ??
          64. var ?children?=?document.getElementsByTagName('*')?||?document.all;? ??
          65. var ?elements?=? new ?Array();? ??
          66. for ?( var ?i?=?0;?i?<?children.length;?i++)?{? ??
          67. var ?child?=?children;? ??
          68. var ?classNames?=?child.className.split('?');? ??
          69. for ?( var ?j?=?0;?j?<?classNames.length;?j++)?{? ??
          70. if ?(classNames[j]?==?className)?{? ??
          71. elements.push(child);? ??
          72. break ;? ??
          73. }? ??
          74. }? ??
          75. }? ??
          76. return ?elements;? ??
          77. }? ??
          78. /*--------------------------------------------------------------------------*/ ? ??
          79. /**? ?
          80. *?Element?就象一個?java?的工具類,主要用來?隱藏/顯示/銷除?對象,以及獲取對象的簡單屬性。? ?
          81. *? ?
          82. */ ? ??
          83. if ?(!window.Element)?{? ??
          84. var ?Element?=? new ?Object();? ??
          85. }? ??
          86. Object.extend(Element,?{? ??
          87. /**? ?
          88. *?切換?顯示/隱藏? ?
          89. */ ? ??
          90. toggle:? function ()?{? ??
          91. for ?( var ?i?=?0;?i?<?arguments.length;?i++)?{? ??
          92. var ?element?=?$(arguments);? ??
          93. element.style.display?=? ??
          94. (element.style.display?==?'none'??? '' ?:?'none');? ??
          95. }? ??
          96. },? ??
          97. hide:? function ()?{? ??
          98. for ?( var ?i?=?0;?i?<?arguments.length;?i++)?{? ??
          99. var ?element?=?$(arguments);? ??
          100. element.style.display?=?'none';? ??
          101. }? ??
          102. },? ??
          103. show:? function ()?{? ??
          104. for ?( var ?i?=?0;?i?<?arguments.length;?i++)?{? ??
          105. var ?element?=?$(arguments);? ??
          106. element.style.display?=? '' ;? ??
          107. }? ??
          108. },? ??
          109. /**? ?
          110. *?從父節(jié)點中移除? ?
          111. */ ? ??
          112. remove:? function (element)?{? ??
          113. element?=?$(element);? ??
          114. element.parentNode.removeChild(element);? ??
          115. },? ??
          116. ??
          117. getHeight:? function (element)?{? ??
          118. element?=?$(element);? ??
          119. return ?element.offsetHeight;? ??
          120. },? ??
          121. /**? ?
          122. *?是否擁有?class?屬性值? ?
          123. */ ? ??
          124. hasClassName:? function (element,?className)?{? ??
          125. element?=?$(element);? ??
          126. if ?(!element)? ??
          127. return ;? ??
          128. var ?a?=?element.className.split('?');? ??
          129. for ?( var ?i?=?0;?i?<?a.length;?i++)?{? ??
          130. if ?(a?==?className)? ??
          131. return ? true ;? ??
          132. }? ??
          133. return ? false ;? ??
          134. },? ??
          135. /**? ?
          136. *?為對象添加?class?屬性值? ?
          137. */ ? ??
          138. addClassName:? function (element,?className)?{? ??
          139. element?=?$(element);? ??
          140. Element.removeClassName(element,?className);? ??
          141. element.className?+=?'?'?+?className;? ??
          142. },? ??
          143. /**? ?
          144. *?為對象移除?class?屬性值? ?
          145. */ ? ??
          146. removeClassName:? function (element,?className)?{? ??
          147. element?=?$(element);? ??
          148. if ?(!element)? ??
          149. return ;? ??
          150. var ?newClassName?=? '' ;? ??
          151. var ?a?=?element.className.split('?');? ??
          152. for ?( var ?i?=?0;?i?<?a.length;?i++)?{? ??
          153. if ?(a?!=?className)?{? ??
          154. if ?(i?>?0)? ??
          155. newClassName?+=?'?';? ??
          156. newClassName?+=?a;? ??
          157. }? ??
          158. }? ??
          159. element.className?=?newClassName;? ??
          160. },? ??
          161. //?removes?whitespace-only?text?node?children? ??
          162. cleanWhitespace:? function (element)?{? ??
          163. var ?element?=?$(element);? ??
          164. for ?( var ?i?=?0;?i?<?element.childNodes.length;?i++)?{? ??
          165. var ?node?=?element.childNodes;? ??
          166. if ?(node.nodeType?==?3?&&?!/S/.test(node.nodeValue))? ??
          167. Element.remove(node);? ??
          168. }? ??
          169. }? ??
          170. });? ??
          171. /**? ?
          172. *?為?Element.toggle?做了一個符號連接,大概是兼容性的考慮? ?
          173. */ ? ??
          174. var ?Toggle?=? new ?Object();? ??
          175. Toggle.display?=?Element.toggle;? ??
          176. /**? ?
          177. *?動態(tài)插入內容的實現,MS的Jscript實現中對象有一個?insertAdjacentHTML?方法(http://msdn.microsoft.com/workshop/...djacenthtml.asp)? ?
          178. *?這里算是一個對象形式的封裝。? ?
          179. */ ? ??
          180. Abstract.Insertion?=? function (adjacency)?{? ??
          181. this .adjacency?=?adjacency;? ??
          182. }? ??
          183. Abstract.Insertion.prototype?=?{? ??
          184. initialize:? function (element,?content)?{? ??
          185. this .element?=?$(element);? ??
          186. this .content?=?content;? ??
          187. ??
          188. if ?( this .adjacency?&&? this .element.insertAdjacentHTML)?{? ??
          189. this .element.insertAdjacentHTML( this .adjacency,? this .content);? ??
          190. }? else ?{? ??
          191. /**? ?
          192. *?gecko?不支持?insertAdjacentHTML?方法,但可以用如下代碼代替? ?
          193. */ ? ??
          194. this .range?=? this .element.ownerDocument.createRange();? ??
          195. /**? ?
          196. *?如果定義了?initializeRange?方法,則實行,這里相當與定義了一個抽象的?initializeRange?方法? ?
          197. */ ? ??
          198. if ?( this .initializeRange)? this .initializeRange();? ??
          199. this .fragment?=? this .range.createContextualFragment( this .content);? ??
          200. /**? ?
          201. *?insertContent?也是一個抽象方法,子類必須實現? ?
          202. */ ? ??
          203. this .insertContent();? ??
          204. }? ??
          205. }? ??
          206. }? ??
          207. /**? ?
          208. *?prototype?加深了我的體會,就是寫js?如何去遵循 Don’t?Repeat?Yourself?(DRY)?原則? ?
          209. *?上文中?Abstract.Insertion?算是一個抽象類,定義了名為 initializeRange?的一個抽象方法? ?
          210. *?var?Insertion?=?new?Object() 建立一個命名空間? ?
          211. *?Insertion.Before|Top|Bottom|After?就象是四個java中的四個靜態(tài)內部類,而它們分別繼承于Abstract.Insertion,并實現了initializeRange方法。? ?
          212. */ ? ??
          213. var ?Insertion?=? new ?Object();? ??
          214. /**? ?
          215. *?將內容插入到指定節(jié)點的前面,?與指定節(jié)點同級? ?
          216. */ ? ??
          217. Insertion.Before?=?Class.create();? ??
          218. Insertion.Before.prototype?=?( new ?Abstract.Insertion('beforeBegin')).extend({? ??
          219. initializeRange:? function ()?{? ??
          220. this .range.setStartBefore( this .element);? ??
          221. },? ??
          222. insertContent:? function ()?{? ??
          223. this .element.parentNode.insertBefore( this .fragment,? this .element);? ??
          224. }? ??
          225. });? ??
          226. /**? ?
          227. *?將內容插入到指定節(jié)點的第一個子節(jié)點前,于是內容變?yōu)樵摴?jié)點的第一個子節(jié)點? ?
          228. */ ? ??
          229. Insertion.Top?=?Class.create();? ??
          230. Insertion.Top.prototype?=?( new ?Abstract.Insertion('afterBegin')).extend({? ??
          231. initializeRange:? function ()?{? ??
          232. this .range.selectNodeContents( this .element);? ??
          233. this .range.collapse( true );? ??
          234. },? ??
          235. insertContent:? function ()?{? ??
          236. this .element.insertBefore( this .fragment,? this .element.firstChild);? ??
          237. }? ??
          238. });? ??
          239. /**? ?
          240. *?將內容插入到指定節(jié)點的最后,于是內容變?yōu)樵摴?jié)點的最后一個子節(jié)點? ?
          241. */ ? ??
          242. Insertion.Bottom?=?Class.create();? ??
          243. Insertion.Bottom.prototype?=?( new ?Abstract.Insertion('beforeEnd')).extend({? ??
          244. initializeRange:? function ()?{? ??
          245. this .range.selectNodeContents( this .element);? ??
          246. this .range.collapse( this .element);? ??
          247. },? ??
          248. insertContent:? function ()?{? ??
          249. this .element.appendChild( this .fragment);? ??
          250. }? ??
          251. });? ??
          252. /**? ?
          253. *?將內容插入到指定節(jié)點的后面,?與指定節(jié)點同級? ?
          254. */ ? ??
          255. Insertion.After?=?Class.create();? ??
          256. Insertion.After.prototype?=?( new ?Abstract.Insertion('afterEnd')).extend({? ??
          257. initializeRange:? function ()?{? ??
          258. this .range.setStartAfter( this .element);? ??
          259. },? ??
          260. insertContent:? function ()?{? ??
          261. this .element.parentNode.insertBefore( this .fragment,? ??
          262. this .element.nextSibling);? ??
          263. }? ??
          264. });? ??
          265. /**? ?
          266. *?針對?頁面元素對象(一般都是表單控件)的工具類,提供一些簡單靜態(tài)方法? ?
          267. *?這些方法顯然常用在表單處理中? ?
          268. *?注意?Field?這種聲明方式類似于?java?聲明一個靜態(tài)的?singleton?工具類? ?
          269. *?等同于?:? ?
          270. *?var?Field?=?new?Object();? ?
          271. *?Field.extend({...});? ?
          272. *? ?
          273. *?后文中的?Form,?Event,?Position?對象聲明方式如出一轍? ?
          274. */ ? ??
          275. var ?Field?=?{? ??
          276. /**? ?
          277. *?清除參數引用的對象的值? ?
          278. */ ? ??
          279. clear:? function ()?{? ??
          280. for ?( var ?i?=?0;?i?<?arguments.length;?i++)? ??
          281. $(arguments).value?=? '' ;? ??
          282. },? ??
          283. /**? ?
          284. *?使參數引用對象獲取焦點? ?
          285. */ ? ??
          286. focus:? function (element)?{? ??
          287. $(element).focus();? ??
          288. },? ??
          289. /**? ?
          290. *?判斷參數引用對象是否有非空值,如為空值,返回false,?反之true? ?
          291. */ ? ??
          292. present:? function ()?{? ??
          293. for ?( var ?i?=?0;?i?<?arguments.length;?i++)? ??
          294. if ?($(arguments).value?==? '' )? return ? false ;? ??
          295. return ? true ;? ??
          296. },? ??
          297. /**? ?
          298. *?使選中參數引用對象? ?
          299. */ ? ??
          300. select:? function (element)?{? ??
          301. $(element).select();? ??
          302. },? ??
          303. /**? ?
          304. *?使參數引用對象處于可編輯狀態(tài)? ?
          305. */ ? ??
          306. activate:? function (element)?{? ??
          307. $(element).focus();? ??
          308. $(element).select();? ??
          309. }? ??
          310. }? ??
          311. /**? ?
          312. *?表單工具類? ?
          313. */ ? ??
          314. var ?Form?=?{? ??
          315. /**? ?
          316. *?將表單元素序列化后的值(其實就是?name=value?形式的名值配對)組合成?QueryString?的形式? ?
          317. */ ? ??
          318. serialize:? function (form)?{? ??
          319. var ?elements?=?Form.getElements($(form));? ??
          320. var ?queryComponents?=? new ?Array();? ??
          321. ??
          322. for ?( var ?i?=?0;?i?<?elements.length;?i++)?{? ??
          323. var ?queryComponent?=?Form.Element.serialize(elements);? ??
          324. if ?(queryComponent)? ??
          325. queryComponents.push(queryComponent);? ??
          326. }? ??
          327. ??
          328. return ?queryComponents.join('&');? ??
          329. },? ??
          330. /**? ?
          331. *?得到表單的所有元素對象? ?
          332. */ ? ??
          333. getElements:? function (form)?{? ??
          334. var ?form?=?$(form);? ??
          335. var ?elements?=? new ?Array();? ??
          336. for ?(tagName? in ?Form.Element.Serializers)?{? ??
          337. var ?tagElements?=?form.getElementsByTagName(tagName);? ??
          338. for ?( var ?j?=?0;?j?<?tagElements.length;?j++)? ??
          339. elements.push(tagElements[j]);? ??
          340. }? ??
          341. return ?elements;? ??
          342. },? ??
          343. /**? ?
          344. *?根據?type?和?name?過濾得到表單中符合的??對象? ?
          345. */ ? ??
          346. getInputs:? function (form,?typeName,?name)?{? ??
          347. var ?form?=?$(form);? ??
          348. var ?inputs?=?form.getElementsByTagName('input');? ??
          349. ??
          350. if ?(!typeName?&&?!name)? ??
          351. return ?inputs;? ??
          352. ??
          353. var ?matchingInputs?=? new ?Array();? ??
          354. for ?( var ?i?=?0;?i?<?inputs.length;?i++)?{? ??
          355. var ?input?=?inputs;? ??
          356. if ?((typeName?&&?input.type?!=?typeName)?||? ??
          357. (name?&&?input.name?!=?name))? ??
          358. continue ;? ??
          359. matchingInputs.push(input);? ??
          360. }? ??
          361. return ?matchingInputs;? ??
          362. },? ??
          363. /**? ?
          364. *?將指定表單的元素置于不可用狀態(tài)? ?
          365. */ ? ??
          366. disable:? function (form)?{? ??
          367. var ?elements?=?Form.getElements(form);? ??
          368. for ?( var ?i?=?0;?i?<?elements.length;?i++)?{? ??
          369. var ?element?=?elements;? ??
          370. element.blur();? ??
          371. element.disabled?=?' true ';? ??
          372. }? ??
          373. },? ??
          374. /**? ?
          375. *?將指定表單的元素置于可用狀態(tài)? ?
          376. */ ? ??
          377. enable:? function (form)?{? ??
          378. var ?elements?=?Form.getElements(form);? ??
          379. for ?( var ?i?=?0;?i?<?elements.length;?i++)?{? ??
          380. var ?element?=?elements;? ??
          381. element.disabled?=? '' ;? ??
          382. }? ??
          383. },? ??
          384. /**? ?
          385. *?使表單的第一個非?hidden?類型而且處于可用狀態(tài)的元素獲得焦點? ?
          386. */ ? ??
          387. focusFirstElement:? function (form)?{? ??
          388. var ?form?=?$(form);? ??
          389. var ?elements?=?Form.getElements(form);? ??
          390. for ?( var ?i?=?0;?i?<?elements.length;?i++)?{? ??
          391. var ?element?=?elements;? ??
          392. if ?(element.type?!=?'hidden'?&&?!element.disabled)?{? ??
          393. Field.activate(element);? ??
          394. break ;? ??
          395. }? ??
          396. }? ??
          397. },? ??
          398. /*? ?
          399. *?重置表單? ?
          400. */ ? ??
          401. reset:? function (form)?{? ??
          402. $(form).reset();? ??
          403. }? ??
          404. }? ??
          405. /**? ?
          406. *?表單元素工具類? ?
          407. */ ? ??
          408. Form.Element?=?{? ??
          409. /**? ?
          410. *?返回表單元素的值先序列化,?其實就是?name=value?形式的名值配對? ?
          411. */ ? ??
          412. serialize:? function (element)?{? ??
          413. var ?element?=?$(element);? ??
          414. var ?method?=?element.tagName.toLowerCase();? ??
          415. var ?parameter?=?Form.Element.Serializers[method](element);? ??
          416. ??
          417. if ?(parameter)? ??
          418. return ?encodeURIComponent(parameter[0])?+?'='?+? ??
          419. encodeURIComponent(parameter[1]);? ??
          420. },? ??
          421. /**? ?
          422. *?返回表單元素的值? ?
          423. */ ? ??
          424. getValue:? function (element)?{? ??
          425. var ?element?=?$(element);? ??
          426. var ?method?=?element.tagName.toLowerCase();? ??
          427. var ?parameter?=?Form.Element.Serializers[method](element);? ??
          428. ??
          429. if ?(parameter)? ??
          430. return ?parameter[1];? ??
          431. }? ??
          432. }? ??
          433. /**? ?
          434. *?prototype?的所謂序列化其實就是將表單的名字和值組合成一個數組? ?
          435. */ ? ??
          436. Form.Element.Serializers?=?{? ??
          437. input:? function (element)?{? ??
          438. switch ?(element.type.toLowerCase())?{? ??
          439. case ?'submit':? ??
          440. case ?'hidden':? ??
          441. case ?'password':? ??
          442. case ?'text':? ??
          443. return ?Form.Element.Serializers.textarea(element);? ??
          444. case ?'checkbox':? ??
          445. case ?'radio':? ??
          446. return ?Form.Element.Serializers.inputSelector(element);? ??
          447. }? ??
          448. return ? false ;? ??
          449. },? ??
          450. /**? ?
          451. *?單/多選框?由此方法處理序列化? ?
          452. */ ? ??
          453. inputSelector:? function (element)?{? ??
          454. if ?(element.checked)? ??
          455. return ?[element.name,?element.value];? ??
          456. },? ??
          457. /**? ?
          458. *?textarea?由此方法處理序列化? ?
          459. */ ? ??
          460. textarea:? function (element)?{? ??
          461. return ?[element.name,?element.value];? ??
          462. },? ??
          463. /**? ?
          464. *?select?下拉列表由此方法處理序列化? ?
          465. */ ? ??
          466. select:? function (element)?{? ??
          467. var ?value?=? '' ;? ??
          468. if ?(element.type?==?'select-one')?{? ??
          469. var ?index?=?element.selectedIndex;? ??
          470. if ?(index?>=?0)? ??
          471. value?=?element.options[index].value?||?element.options[index].text;? ??
          472. }? else ?{? ??
          473. /**? ?
          474. *?支持?select-mulitple?的下拉列表,返回的數組的第二個元素,是一個值數組? ?
          475. */ ? ??
          476. value?=? new ?Array();? ??
          477. for ?( var ?i?=?0;?i?<?element.length;?i++)?{? ??
          478. var ?opt?=?element.options;? ??
          479. if ?(opt.selected)? ??
          480. value.push(opt.value?||?opt.text);? ??
          481. }? ??
          482. }? ??
          483. return ?[element.name,?value];? ??
          484. }? ??
          485. }??

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

          主站蜘蛛池模板: 遂宁市| 莱阳市| 临沧市| 崇阳县| 古丈县| 高唐县| 巢湖市| 双鸭山市| 塔城市| 丹东市| 麻城市| 凭祥市| 扎兰屯市| 乌拉特前旗| 兴隆县| 西藏| 察雅县| 西林县| 宣汉县| 兴安县| 辰溪县| 车险| 育儿| 壤塘县| 山西省| 正定县| 甘孜县| 东阳市| 印江| 皋兰县| 奉贤区| 天祝| 繁峙县| 北海市| 昭通市| 手游| 仙游县| 双流县| 上思县| 镇远县| 名山县|