javascript总结（一）有关框架

做过.NET,ROR,现专职JS满两年了.就开发过程中遇到的问题和做过的实践,从以下几个方面,做一个回忆记述,当总结.
有关框架只是一个泛泛的概述，希望大家多参与第二篇以后讨论，那些都是我在项目中的实际做法。点击以下面的链接

目录
（一）有关框架
（二）文件组织与代码组织
（三）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.

评论

22 楼 andy54321 2010-04-02  

ext复杂一些，但是学好后界面漂亮很多，它是提供了一揽子方案；
jquery借助其强大的selector，能够方便的实现html 结构、样式、行为的分离，是很好很强大的纯js操作的替代

21 楼 wz_boy 2010-04-01  

happysoul 写道

最早接触JS也就是用用简单判断加上一个alert功能
后来接触的 prototype ，$F $A 等等让我眼前一亮，节省了很多重复的代码，慢慢的接触到了Ajax，又发觉代码量节省了很多很多...
随后从JS基础学起... 慢慢的扔掉了prototype 全都是用最基本的JS代码开发
再后来接触到了jquery，又找回了当初对prototype的激情...
现在JS+jquery交替使用ing 哈哈！

我还处在判断+alert阶段，想多听听关于怎样进阶学习js！

20 楼 bellstar 2010-03-31  

fins 写道

bellstar 写道

fins 写道

啥时候出(二)啊 ?
期待着呢

在文章头部已经有链接啊，我都已经写到五了，可是大多数人好像喜空泛的聊下框架。

可能是因为太细节的东西部具有通用性吧.

你写太细的东西 比如你写篇文章 介绍你是如何组织和使用某ajax框架的, 很多人可能在没看之前 就本能的觉得:他的做法未必适合我 于是就懒得看了 或者是看完后无法引起共鸣.

呵呵 不过没关系 我还是支持你写下去 就算没人响应  也可以当做一个积累和总结.
以后也许对自己会有很大帮助.

这一系列的总结，虽然写的都比较细，但基本覆盖到了网站开发（非指WEB软件）的各个方面，总结中的做法，就是我做JS的现状，反映了我在写JS处理各种事情使的基本思路。这个现状，是通过学习、与网友交流，并在实际项目中不断实践中得来的，但肯定还有很多不足和值得改进的地方，所以我相信做网站开发的一线程序员，也会有他们的做法，希望借鉴他们的讨论和做法，把细节做得更好，在思路上更加清晰。

19 楼 fxsc 2010-03-31  

要让我专职JS一定很痛苦，object,class,method不分，动态反射功能缺乏，交互对象太多，调试手段又太少，习惯静态语言了，但偶尔用JQuery写写代码还是很愉快的.

18 楼 fins 2010-03-31  

bellstar 写道

fins 写道

啥时候出(二)啊 ?
期待着呢

在文章头部已经有链接啊，我都已经写到五了，可是大多数人好像喜空泛的聊下框架。

可能是因为太细节的东西部具有通用性吧.

你写太细的东西 比如你写篇文章 介绍你是如何组织和使用某ajax框架的, 很多人可能在没看之前 就本能的觉得:他的做法未必适合我 于是就懒得看了 或者是看完后无法引起共鸣.

呵呵 不过没关系 我还是支持你写下去 就算没人响应  也可以当做一个积累和总结.
以后也许对自己会有很大帮助.

17 楼 sogo1986 2010-03-30  

YUI3也出了段时间了

16 楼 EldonReturn 2010-03-30  

fkpwolf 写道

EldonReturn 写道

bellstar 写道

fkpwolf 写道

总结很好阿，赞。dojo确实只适合企业信息系统，互联网应用还是jquery灵活性更好点。

EXT没有用过，不是很明白LZ所说的EXT "应用模板"，能否详细说明下

见我的SUI类别文章

为啥这么说呢？求教

dojo和ext js都是宣称b/s的web开发模式，界面具强大。互联网应用一般提倡简洁，再说如果页面一股脑全用dojo替代，性能不会好的哪里去吧

这个性能有具体的数据不？貌似1.4的Dojo速度不慢啊

15 楼 fkpwolf 2010-03-30  

EldonReturn 写道

bellstar 写道

fkpwolf 写道

总结很好阿，赞。dojo确实只适合企业信息系统，互联网应用还是jquery灵活性更好点。

EXT没有用过，不是很明白LZ所说的EXT "应用模板"，能否详细说明下

见我的SUI类别文章

为啥这么说呢？求教

dojo和ext js都是宣称b/s的web开发模式，界面具强大。互联网应用一般提倡简洁，再说如果页面一股脑全用dojo替代，性能不会好的哪里去吧

14 楼 luolonghao 2010-03-30  

引用

不好的方面:
      CSS选择器，确实很强大，可我认为我只需要实现以下几种便可了。其它代码完全多余

Sizzle确实代码比较多，Sizzie支持css3 selecotr的原因可能是为了将来，现在各浏览器的最新版本直接提供document.querySelectAll，再过几年估计不需要用Sizzle这样的JS selector了。

13 楼 bellstar 2010-03-30  

fins 写道

啥时候出(二)啊 ?
期待着呢

在文章头部已经有链接啊，我都已经写到五了，可是大多数人好像喜空泛的聊下框架。

12 楼 fins 2010-03-30  

啥时候出(二)啊 ?
期待着呢

11 楼 EldonReturn 2010-03-30  

bellstar 写道

fkpwolf 写道

总结很好阿，赞。dojo确实只适合企业信息系统，互联网应用还是jquery灵活性更好点。

EXT没有用过，不是很明白LZ所说的EXT "应用模板"，能否详细说明下

见我的SUI类别文章

为啥这么说呢？求教

10 楼 EldonReturn 2010-03-30  

lokinell2006 写道

dojo 呢！ dojo现在1.4.1了，有很多的widget可以用。

dojo还是很不错的，特别是它的核心库，不带widget的那个

9 楼 bellstar 2010-03-30  

fkpwolf 写道

总结很好阿，赞。dojo确实只适合企业信息系统，互联网应用还是jquery灵活性更好点。

EXT没有用过，不是很明白LZ所说的EXT "应用模板"，能否详细说明下

见我的SUI类别文章

8 楼 fkpwolf 2010-03-29  

总结很好阿，赞。dojo确实只适合企业信息系统，互联网应用还是jquery灵活性更好点。

EXT没有用过，不是很明白LZ所说的EXT "应用模板"，能否详细说明下

7 楼 lzz4438253 2010-03-29  

   不知楼主JS反射用得多吗...特指eval...这个曾经让我在将前端发布成AIR时费了好一阵力气。

6 楼 lokinell2006 2010-03-29  

dojo 呢！ dojo现在1.4.1了，有很多的widget可以用。

5 楼 風一樣的男子 2010-03-29  

只用过 jQuery，现在用 mootools

4 楼 happysoul 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

3 楼 happysoul 2010-03-29  

最早接触JS也就是用用简单判断加上一个alert功能
后来接触的 prototype ，$F $A 等等让我眼前一亮，节省了很多重复的代码，慢慢的接触到了Ajax，又发觉代码量节省了很多很多...
随后从JS基础学起... 慢慢的扔掉了prototype 全都是用最基本的JS代码开发
再后来接触到了jquery，又找回了当初对prototype的激情...
现在JS+jquery交替使用ing 哈哈！