锁定老帖子 主题:javascript总结(一)有关框架
该帖已经被评为良好帖
|
|
---|---|
作者 | 正文 |
发表时间:2010-03-26
最后修改:2010-04-01
有关框架只是一个泛泛的概述,希望大家多参与第二篇以后讨论,那些都是我在项目中的实际做法。点击以下面的链接 目录 (一)有关框架 (二)文件组织与代码组织 (三)JS与FLASH交互 (四)ajax局部刷新与RPC (五)获取设置元素样式与监听元素事件 (六)页面元素的创建调整与关联 (七)浏览器兼容性问题 (八)WEB软件的前端架构实践 prototype: 刚开始用的是prototype,我现在都忘光了。只记得是如何开始讨厌prototype的,有一次遇到一个问题,我定义了一个next(),然后我写onclick="next()",却没有执行到我定义的next(),查出是它执行了元素本身的next()方法,这个方法是prototype给他的,由此推论,它侵入于element的其他方法也有此问题,我很恶心它这么干。为此我还专门写了一个脚本去检查侵入性,见http://www.iteye.com/topic/251422#693230,除了用它检查框架的侵入性外,还用于检查自己的脚本中有没有无意中创建了全局变量。 jQuery: 抛弃prototype之后,工作上一直用jQuery。 好的方面: 短小精悍,特别赞他操作DOM的DSL,方法名短且实现风格统一,且覆盖到了DOM的方方面面。有了它你不用写长长的DOM方法。AJAX也很出色,$("sel").load(),$.get(),$.post().$.getJSON(),$.getScript()针对不同需求包装了不同的AJAX请求配置。 不好的方面: CSS选择器,确实很强大,可我认为我只需要实现以下几种便可了。其它代码完全多余 jQuery("#id") jQuery("div.class") jQuery("#id>div.class ") jQuery("#id div.class") 插件质量方面。我用过的插件我几乎都改过,有的是有小BUG,有的是功能不全,有的文档示例不全。用过的有jScrollPane, jslider, sexyCombo, xxx tree, imageAreSelect ,只有validation稍满意。 要用插件,大部分是出于UI widget的需求。jQuery UI只用过slider,我特别讨厌jQuery UI widget(无论插件还是官方)的接口风格和jQuery操作DOM的风格一样。当然它的THEME也一样的难看,虽然有很多种。我比较喜欢YUI的样子,很APPLE。UI方面是jQuery的软肋。基于此,如果YUI3的API接口不像YUI2那样的不统一和复杂,如果网站UI widget方面用的比较多的话,YUI也许比jQuery更适合。 YUI: 关于YUI,YUI用过autocomplete和calendar,slider,写SUI的时候,也尝试过其他组件。YUI文档和API很全,UI漂亮,但API有点太过复杂。CSS方面也是,得在body上加一个yui的class,导致对原有的css产生影响。相对于jQuery,它更重量级,好在它有loader来解决依赖的问题。用过WEB QQ的应该很满意,WEB QQ用的就是YUI2.6。当然YAHOO.COM也是(有人不知道不)。对于YUI3,那是相当的期待。 Ext: 做WEB软件一直用的是Ext,尝试过两种形式,一种是iframe,只用了表格,一种是单页面,全部都是Ext component。第一种我只用来做了简单的项目,通过简单配置来实现CRUD。我主要讲下单页面的,用EXT做业务复杂的WEB软件,不能一个一个页面独立开来做,那样会累死,还是得应用模板(可以用SUI),每种模板相对应一个控制页面组件的抽象类(VIEW控制层),套用此模板的页面代码继承此抽象类来实现自己的特殊逻辑。当然和后台交互的MODEL也有是以独立的类存在的,一句话,在前端我又分了三层。见图示: (webApp,sui,ext也都是JS) 由于EXT有强大的STORE,它使得我们前端引用及操作数据的代码可以通过它和后端脱离出来。有一点小小的问题,就是EXT和ROR交互起来并不是很方便,我自己实现了符合REST的writer来操作数据。 Ext的UI组件丰富,也很成熟,虽然性能在IE上表现不佳,但这是IE的问题。Ext3.1性能据说大幅提升。 有了Ext,其实离做WEB软件还很远,因为界面和ajax形式的数据交互全部由前端来做的话,前端要很成熟的框架来搭架子,有个框架叫JS MVC,也许可以借鉴学习。 最后,上2张图养眼,不是美女!是界面欣赏 主界面 FORM window qooxdoo: 不了解的可以通过官方网站了解,也可以本人翻译的部分介绍查看 javascript是一门隐晦的语言,在这一点上,我讨厌它。有诸如模拟实现类与OO的N种方法、不同位置不同声明方式变量作用域不同、function的各种声明和调用方式等等让人头大,还有可能一不小心就中招,写JS真的要小心翼翼。 qooxdoo在JS之上构造了一门语言,然后以这个语言写了一套丰富的UI组件,相比较Ext,它的性能要好很多,虽然功能少了点。当然最主要的是用Ext,你还是要小心写JS。有了它你可以显式的声明你的对象及其OO关系,你会觉得安全很多,会找回写JAVA,C#的感觉。 用qooxdoo你要花一定时间先学习它这个语言,虽然目前它在UI组件上还不及EXT,但它的底子很好,所以我相信用它来做WEB软件,会很有效率且让客户满意,隔了好长一段时间没有继续学习它了,要继续。 选择框架: 普通网站:jQuery,prototype, mootools 自定义UI widget较多的中大型网站:YUI 大的商业web软件,部署到企业内部: Ext, qooxdoo 小中型的web软件(放到互联网上的):jQuery. 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-03-29
最后修改:2010-03-29
jQuery("#div.class") jQuery("#div.class")与jQuery("#div")等价。 这个应该写成下面这样的: jQuery("#div .class") 还有 ....可我认为我只需要实现以下几种便可了。其它代码完全多余 那不用jQuery("#id + div"),怎么选择兄弟节点? |
|
返回顶楼 | |
发表时间:2010-03-29
hyj1254 写道 jQuery("#div.class") jQuery("#div.class")与jQuery("#div")等价。 这个应该写成下面这样的: jQuery("#div .class") 还有 ....可我认为我只需要实现以下几种便可了。其它代码完全多余 那不用jQuery("#id + div"),怎么选择兄弟节点? jQuery("#div.class")是我笔误了 至于引用兄弟节点,我觉得这样引用兄弟节点可扩展性不好,所以采用其他方式引用。 |
|
返回顶楼 | |
发表时间:2010-03-29
最早接触JS也就是用用简单判断加上一个alert功能
后来接触的 prototype ,$F $A 等等让我眼前一亮,节省了很多重复的代码,慢慢的接触到了Ajax,又发觉代码量节省了很多很多... 随后从JS基础学起... 慢慢的扔掉了prototype 全都是用最基本的JS代码开发 再后来接触到了jquery,又找回了当初对prototype的激情... 现在JS+jquery交替使用ing 哈哈! |
|
返回顶楼 | |
发表时间:2010-03-29
最后修改:2010-03-29
兄弟节点 siblings()
找到每个div的所有同辈元素。 HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div").siblings() 结果: [ <p>Hello</p>, <p>And Again</p> ] nextAll()查找当前元素之后所有的同辈元素。 不用jquery那只能是 xx.parentNode.childNodes |
|
返回顶楼 | |
发表时间:2010-03-29
只用过 jQuery,现在用 mootools
|
|
返回顶楼 | |
发表时间:2010-03-29
dojo 呢! dojo现在1.4.1了,有很多的widget可以用。
|
|
返回顶楼 | |
发表时间:2010-03-29
不知楼主JS反射用得多吗...特指eval...这个曾经让我在将前端发布成AIR时费了好一阵力气。
|
|
返回顶楼 | |
发表时间:2010-03-29
总结很好阿,赞。dojo确实只适合企业信息系统,互联网应用还是jquery灵活性更好点。
EXT没有用过,不是很明白LZ所说的EXT "应用模板",能否详细说明下 |
|
返回顶楼 | |
发表时间:2010-03-30
fkpwolf 写道 总结很好阿,赞。dojo确实只适合企业信息系统,互联网应用还是jquery灵活性更好点。
EXT没有用过,不是很明白LZ所说的EXT "应用模板",能否详细说明下 见我的SUI类别文章 |
|
返回顶楼 | |