本站首页    管理页面    写新日志    退出


«October 2025»
1234
567891011
12131415161718
19202122232425
262728293031


公告
 本博客在此声明所有文章均为转摘,只做资料收集使用。

我的分类(专题)

日志更新

最新评论

留言板

链接

Blog信息
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7635593
建立时间:2006年5月29日




[Prototype(Ajax)]Prototype.js--Javascript编写者的小军刀
软件技术

lhwork 发表于 2006/8/31 10:23:08

 作者:江南白衣 ,@_@  (本文为SpringSide参考手册一部分,更多Java开源项目开发指南请访问SpringSide参考手册)   Prototype.js 是Javascript编写者的一把小军刀,提供了Ruby风格的简写语法和实效的函数,更难得的是完全跨浏览器,让大家舒舒服服写出又精简又不用愁心兼容的的JS代码,springside 已经离不开它了。  Prototype.js最重要的文档有: Developer Notes for Prototype.js 中文版 (英文原版) script.aculo.us的wiki 文档集合:http://www.prototypedoc.com/ 1.1 最爱$系列  我最喜欢是可以用${"bookDiv"} 等价于通用的document.getElementByID("bookDiv") 值得留意的还有和CSS一样的批量选择语法$$(),如 $$('div#left_books).each(500)this.width=500'>.) Element系列有很多实用的函数:   $('bookdiv').update(' < p > 500)this.width=500'> </ p > ');  // 更新innerHtml  $('bookdiv').show(); $('bookdiv').hide();$('bookdiv').toggle();   // 切换visiable $('bookdiv').visiable();   // 返回是否visiable $('bookdiv').scrollTo();   .....还有很多  1.2 传统的Ajax 传统的基于URL的ajax函数简单实用。    new  Ajax.Updater('bookdiv', "foo .jsp " ); 此函数的还有很多可选的参数,参数列表见此:   new Ajax.Updater('bookdiv',"foo.jsp", {onComplete: initObserve}); 比如需要异步执行ajax, 更新bookdiv后需要重新执行initObserve, onComplete的设置就刚好满足你的要求。 另有可定时执行Ajax的PeriodicalUpdater。 1.3 Form系列函数也不错 Form.serialize   将Form中所有Input对象的值转化为一个URL String,方便把Form转为用 URL Get方式的Ajax提交,最经典的用Ajax提交Form的例子:    < form action = " /action/here "  method = " post "     onsubmi = " new Ajax.Updater('div_to_be_updated', '/action/here', {parameters:Form.serialize(this)});              return false; " >     另外,Form.focusFirstElement , Form.getInputs等函数也很实用。  1.4 Event系列 除了后述的Observe模式外,还有下列保证兼容IE和FF的事件函数: 1.Event.element(event),找出触发事件的element. 2.Event.findElement(event,tagName),搜索DOM tree里事件的响应链里的第一个符合tagName的element. 3.pointerX(event),pointerY(event)等. 还定义了一些标准KeyCode,见:http://www.sergiopereira.com/articles/prototype.js.html#Reference.Extensions.Event 1.5 Ruby风格 1.循环函数 elements.each(  function (element){        alert(element);        }); 2.不定参数 new  Ajax.Updater('mydiv', ' / foo / bar', {asynchronous: true }); 2. Observe模式达到搜索引擎Friendly Observe模式,就是连接仍然以<a href="foo.jsp">形式编写,用Observe为其加入onClick事件的侦听。 这样,当搜索引擎访问时,就会访问传统的URL;而用户使用IE访问时,就会被Observe转为使用onClick事件的Ajax效果。 见SpringSide中的/home/index.jsp 图书详情察看--通过selector查找需要处理的链接(a),循环为每个链接添加观察者,为click事件,添加handle函数。     $$('div#left_books  *  a[href]').each( function (element){Event.observe(element,'click',handlerCilckEvent, false );});function  handlerCilckEvent(event){     var  element  =  Event.element(event);     new  Ajax.Updater('bookdiv',element.href);     Event.stop(event);    $('bookdiv').show();} 3.script.aculo.us的DomBuilder script.aculo.us语法超简洁的Builder, 相比之下W3c的Dom Builder语法简直是噩梦。html片断不复杂时如果用JSTemplate有点大炮打蚊子,用script.aculo.us的Builder就够了。Builder很有Ruby的风格,请看下面一句 :  foo =  Builder.node('a', {href: " foo.jsp " },categorys[i].name) 第1个参数是element类型,第2个是可选的attribbute,第3个是节点内的子节点。如果要换成W3c的Dom函数写法,善哉善哉。 下面这段更明显,直接照元素的页面顺序来生成对象,而不是像W3C Dom Builder很逻辑抽象的,先生成对象,然后append到父元素。 div  =  Builder.node('div',{className:linkDiv},[                        Builder.node('a', {href: " foo.jsp " }, categorys[i].name)  ]         );   当然了,还是没有JS Template清晰,所以Builder只作为html片断非常短时使用。


阅读全文(3093) | 回复(0) | 编辑 | 精华
 



发表评论:
昵称:
密码:
主页:
标题:
验证码:  (不区分大小写,请仔细填写,输错需重写评论内容!)



站点首页 | 联系我们 | 博客注册 | 博客登陆

Sponsored By W3CHINA
W3CHINA Blog 0.8 Processed in 1.203 second(s), page refreshed 144814280 times.
《全国人大常委会关于维护互联网安全的决定》  《计算机信息网络国际联网安全保护管理办法》
苏ICP备05006046号