后续详细研究前端框架的抛砖引玉

这些补充让框架更加完整，更令人兴奋的是，这些扩展基本兼容当前的框架，可以交叉使用，让前端开发更加丰富。 Ext是公司推崇的类库。 与ExtJS相比，它更加重量级，可以轻松包含几兆字节的文件。 这使得Ext在互联网上使用时存在很多顾虑。 但是，另一方面，ExtJS巨大文件的背后是ExtJS强大的功能。 ExtJS的控件和功能可以说是无比的强大和华丽。 图表、菜单、特效，ExtJS的控件库非常丰富，交互也非常强大。 仅靠ExtJS几乎可以取代控制层来完成客户交互。 强大的功能、丰富的控件库、华丽的效果也让ExtJS成为内网开发的有力工具。 框架鼻祖YUI也有自己的类库，对于DOM操作和效果处理都比较方便，功能和控件也比较齐全，但相比ExtJS就显得平庸了。 随着Yahoo!的衰落，YUI的声音也逐渐被新的框架淹没，想想也很可惜。 除了以上三个类库之外，还有Dojo、>等很多类库。 由于本文讨论的框架大部分都使用上述框架，所以其他框架暂时不讨论。 预先准备好的CSS 随着CSS3的推出，浏览器对样式的支持达到了更高的水平，效果也更加出众。

各种框架也开发了基于CSS3的样式，让框架更加丰富。 针对CSS3，已经推出了一些预编译的扩展框架，主要有LESS、Sass和（基于Sass的扩展）。 您可以轻松地进行变量定义、格式引用、函数定义等操作，以及大量内置效果。 将您的 CSS 开发效率提升到一个新的水平。 根据对比，Sass+ 几乎胜过 LESS。 有兴趣的读者可以参考/sass-vs-less/。 由于Sass是用Ruby开发的，因此也需要相应的Ruby环境才能将文件编译成CSS文件。 回页首 国内外前端开发框架对比 首先我们对当前国内外主流前端开发框架有一个基本的了解，然后对它们进行直观的比较。 ()是目前桌面上最流行的开发框架。 一经推出，便势不可挡。 主要针对桌面市场，提出移动优先，但目前桌面仍是主要目标市场。 主要以处理为主，支持LESS进行CSS扩展。 如果要在框架中使用Sass，需要通过-Sass（/-/-sass）项目添加兼容性。

该框架无论是布局、布局、控件还是特效都非常令人满意。 拥有丰富的预设效果，极大的方便了用户开发。 在样式设置方面，用户在下载时也需要手动设置。 可配置的粒度很细，响应也比较繁琐，不太直观。 它需要非常熟悉配置的人才能轻松使用。 在浏览器兼容性方面，目前Opera、IE8+等主流浏览器均提供支持。 不过它对IE的支持稍显不足，对IE6和IE7的支持不是特别理想。 Zai甚至放弃了对IE6和IE7的支持。 不过在国内，据CNZZ统计，IE目前的份额仍然达到46.98%，并且大量国产浏览器也使用IE核心。 这让我们在使用的时候时刻保持警惕。 上面可以通过BSIE项目添加对IE6的支持，但不能支持所有效果。 在框架扩展方面，随着 的广泛使用，扩展插件和组件也非常丰富，涉及显示组件、兼容性、图表库等方面。 图 1. 布局和效果示例 ▼此处[]■■■■■■■■]*▼此处[]■■■■■■■■]*ryUI(/) 是 (/) 是项目中的桌面组端到端扩展，包括丰富的控件和特效，无缝兼容。

同时，应用内预设了多种风格供用户选择，避免千篇一律。 如果你对预设的风格不满意，还可以通过可视化界面自行配置显示效果，非常方便，也足够高端。 图2.Cijr^口口日tnunc..a./,.,ren电ui狠电..Mauns博.bile()的效果示例，是该项目对移动端的延伸，目前支持主流平台比如iOS，，。

具体支持信息请参见/gbs/。 此外，它在布局、控件和特效方面也非常慷慨。 风格方面与 类似，除了预设的风格效果外，还支持用户可视化配置的效果。 值得注意的是，它也是无缝连接的，用户可以通过拖放直接设计界面并生成代码。 图 3. 效果示例，包罗万象。 只有你想不到，没有它，你就做不到。 基于Sass和Sass，让用户更方便的修改格式和创建特效。 另外，凭借丰富的产品线，R可以让您的应用程序具有桌面应用程序的效果。 基于CSS3，更方便用户制作特效。 它不仅支持桌面端，还支持移动端。 玩游戏的时候似乎很容易赢。

它基于HTML5，提供了制作跨平台应用程序的工具。 同时对主流浏览器的支持也非常理想。 有耀眼的光芒，但光芒背后总有阴影。 除了前面提到的ExtJS过于重量级之外，商业化是另一把利剑。 在帮助披荆斩棘的同时，他也害死了不少程序员。 规定所有商业应用都需要付费。 另外，所有辅助产品也是收费的，否则只能是试用版。 这里的辅助产品其实包括了上面提到的所有产品。 图4.效果示例

»c□

(//gxt/) 是框架的扩展。 它可以支持Java文件的解析生成HTML5页面文件，并且可以与Java环境无缝集成。 它具有丰富的控件和特效，并且可以无缝调用地图和其他应用程序。 虽然开发时不是特别直观，但是效果还是很丰富的。 并且没有丝毫示弱。 图 5.效果示例。 目前，唯一可以与之竞争的框架是Dojo (http:〃)。 抱着IBM，等待着很多人，Dojo的一举一动、一颦一笑都格外引人注目。 Dojo项目的产品线和功能也特别丰富。 首先，Dojo有自己的DOM解析器Nano，它是DOM解析和处理的核心。 另外，Dojo的Web框架有非常丰富的布局、布局、控件和特效。 它对多种语言和图表有非常好的扩展支持，并且支持地图的操作。 您可以使用 ExtJS 查看其演示 (/demos/)

比较一下效果。 另外，Dojo还有自己的图形化设计和开发工具，可以通过拖放的方式进行设计。 Dojo的样式设置并不是在下载时指定的，而是通过引用不同的CSS格式来实现的。 虽然Dojo比ExtJS重很多，但它仍然比ExtJS轻，至少在文件大小方面是这样。 另外，Dojo还有自己的CDN机制。 只要配置好，就可以CDN Dojo 文件。 由于IBM等大佬的支持，Dojo在支持现有框架方面也表现得非常好。 图6. 道场效果示例^..^..tnd|站|^]Japan|^->9.d-.>9.d-.t^h-翊;[Nli^EH|• ―- -aEu&ti1■i_i/HTOC\o"1-5"\h\^nM!Zhong，T1。 逃避“P东西挖掘■>，“IJ：jJtn'i'] *土IPiG“！，*i就像“I»»l>«诂-hi.Cww!!中加■^ij™|： ■■：-

(//)是Dojo推出的移动框架，性能也非常不错。 在布局、控制和特效上投入了大量的精力。 它还支持与所使用的平台相匹配的样式设置。 如果你不喜欢，还可以引用不同的CSS文件来实现不同的效果。 除了在手机浏览器上使用外，还支持无缝连接，可以通过手机App应用程序进行开发。 它还具有良好的响应能力（宽屏和窄屏显示效果不同）。 图7. 上面的效果示例（）可以说是目前最轻量级的前端框架了。 内核js压缩后只有8k，完整版压缩后不到100k，比其他框架小很多。 有自己的面向对象设计核心。 除了最小的文件大小之外，该框架的功能也比其他框架弱得多，仅对控件和特效提供少量支持。 图8.效果示例 Ri()也是一个简洁的框架，具有丰富的DOM操作功能。 它很好地支持Ajax和JSON，使用起来也类似。

作为Rails的默认框架，相信对于广大开发者来说也是有很大参考价值的。 在扩展方面，()进行了丰富的扩展，主要是在动画特效、Ajax控制、DOM操作、单元测试等方面。()作为开源前端框架的鼻祖，在以下方面有着非常深厚的功底：框架。 它有自己的解析DOM的核心框架，并且在特效、动画、图表等方面有丰富的扩展，并且可以直接访问Yahoo! 通过 YQL 获取数据。 在用户经常使用的功能方面都有着不错的表现。 与灵活的语法相比，YUI更加规则，更加讲究代码组织、结构和模式，体现了工程师的严谨性。 同时，YUI还拥有丰富的产品线，包括测试框架、文档生成框架、自动构建框架，满足项目开发各方面的需求。 随着Yahoo!的没落，YUI也感觉自己正在逐渐进入暮年，但作为一个非常严谨、完整的前端框架的鼻祖，它足以瞬间秒杀别人。 图9. YUI的例子影响

(/)是ZURB下的一个开发框架，主要针对移动端，但也保持了对桌面端的兼容性，并已更新至最新版本。 框架主要基于Zepto（语法类似，但更轻量级），CSS基于Sass。 它具有良好的扩展性，丰富的布局、格式以及多种控件和特效，非常方便。 供开发人员使用。 控件的响应式效果还可以帮助用户识别不同的浏览器效果。 作为一个完整的项目团队，ZURB包含许多原型、设计、构建、分析等工具，为用户提供完整的服务。 当然，有很多服务是需要收费的。 主要基于移动样式，如图10所示。图10.样式示例

*tini*()是阿里巴巴集团自主研发的前端框架。 目前淘宝、一淘等阿里巴巴网站上的很多应用框架都模仿编写了自己的内核，用于DOM解析、Ajax处理等，同时具有丰富的控件，实现了一些动画效果和特效。 同样，在Kissy的控件中也能看到国外框架的影子。 另外，项目工具可以帮助用户实现自动化构建，并且有很多扩展组件可供用户使用。 应该说，Kissy是目前国内开发的最好的前端框架，并且经过了实际使用的检验，但与国外成熟的框架相比还有一定的差距。 图 11. Kissy 效果示例 宫二㈡凯当.com - C 港最爱我... 收藏的宝贝 - 收藏的店铺 - 我死了： ■ 我的淘宝 - oQ 已购买的宝贝已经结婚了：丄& Left ()是Kissy推出的移动版框架。 它的目的是开发一个可以在移动浏览器和移动应用程序上使用的框架。 不过目前的项目内容还比较少，控件和特效也比较少。 也不是响应式的。图12.效果示例

eTabT^'o-Ci&(/)是百度Youah团队推出的框架。 现已纳入360，并广泛应用于360产品中。 Qwrap 集成了 、 、 YUI 的功能并进行了封装。 不过，将Qwrap算作一个前端开发框架还是有点牵强，因为除了类库之外，Qwrap基本没什么亮点，还处于开发阶段。 ()是百度推出的另一个框架，广泛应用于百度产品中。 与Qwrap类似，只能算是一个框架。 它做了很多扩展，但作为前端开发框架，还是比较薄弱的。 基于此，百度继续推出了基于Magic和. Magic 项目扩展了控件和特效，添加了 10 个新控件。 它更多的是对移动终端开发的扩展，目前支持大多数主流移动设备和操作系统。了解了这些框架后，我们从平台、基础技术、布局、CSS、控件等方面对它们进行基本的比较，特效及风格设置： 表1 ■ 国内外主流前端开发框架对比 框架名称 主要基础技术布局 CSS 控制特效风格设置平台布局桌面、LESS 丰富手动配置桌面丰富预设/可视化配置桌面丰富预设/可视化配置

设置移动端丰富-丰富丰富预设/视觉配置 匕首小心和端面 匕首小心和端面 Ext Tu Sass 丰富 - 极富极富预设 i=ri= 移动 HTML5 移动 HTML5 丰富 - 丰富极富 加：海林工厂桌面耻辱HTML5丰富-丰富丰富-框架名称主要基础技术平台布局CSS控制特效风格设置局布局道场桌面侧丰富丰富非常丰富非常丰富css代码i=ri=r天天工厂移动端丰富-丰富丰富内置-中和移动端匹配框架名称主要基础技术平台布局CSS控制特效风格设置局布局道场桌面端丰富丰富极其丰富非常丰富css代码i=ri=r天天工厂移动端丰富丰富丰富内置与移动端匹配的wrap YUI Small Small Small Small Rich Rich - Rich Rich /Zepto、Rich Rich Rich Rich Sass Kissy QWrap Rich Less 由此我们可以看出，对于桌面端来说，目前并且已经是能够满足大部分的开发需求，在业界得到了广泛的应用。 它具有丰富的组件和扩展，以及相对简单的语法和操作。

满足我们的基本需求就足够了。 如果你对前端界面的效果要求比较高，希望应用结构树等更复杂的控件，我建议你考虑Dojo。 不枉你多年来一直拥抱它，而且效果还是很好的。 对于局域网应用，还可以考虑框架，效果更震撼，但对网络的要求也更高。 如果这些还不能满足你内心的野性，我只能推荐你使用Flex或者。 相反，如果你对网络速度非常敏感，想要找到一个功能不错的迷你框架，那么它会是你不错的选择。 如果你很怀旧，也可以使用YUI。 虽然曲线不够性感，但内容却很丰富。 如果你是开发者，建议你先看一下框架，毕竟是默认框架。 如果你对上面提到的框架不满意，建议你先体验一下国产框架，然后再回头看看刚才提到的框架。 相信你会有一种恍然大悟的感觉。 对于移动应用程序来说，它仍然是一个轻量级的选择，将为您提供更强大的功能。 同时，您还可以将其与 和 框架结合使用，利用 Web 技术开发移动应用程序。

不过，这种混合开发模式出现的时间并不长，仍在发展中。 回页首 结束语 以上只是目前新兴的前端开发框架的一部分。 我相信研发中心还有更多优秀的框架。 至此，我们对于“百花齐放”这个词有了更加直观的感受，这也说明了在沉寂多年之后，前端开发工作已经越来越受到大家的关注，也注定会成为越来越繁荣。 本文中的建议仅代表作者个人初步意见，您的最终选择必须根据实际开发需求而定。 参考资料《Sass 与 LESS 的比较》从语言能力、变量处理、功能扩展等多个角度对 Sass 和 LESS 进行了详细比较，为用户提供选择建议。 ，是目前广泛使用的移动开发框架，配合附带的SDK开发者可以通过Web技术开发跨平台的移动应用程序。 ，是该公司推出的移动开发框架，它也允许开发者使用Web技术开发跨平台的移动应用程序。 专区：通过专门针对网络技术的文章和教程来扩展您在网站开发方面的技能。 资源中心：这是有关 Ajax 编程模型信息的一站式中心，包括文档、教程、论坛、博客、wiki 和新闻。

有关 Ajax 的任何新信息都可以在这里找到。 .0资源中心，这是Web2.0相关信息的一站式中心，包含大量Web2.0技术文章、教程、下载及相关技术资源。 您还可以通过Web2.0初学者入门专栏快速了解Web2.0的相关概念。 •查看HTML5主题，了解更多HTML5相关知识和趋势。 讨论•加入中文社区。 查看开发人员驱动的博客、论坛、群组和 wiki，并与其他用户进行交流。