热门前端框架分析 || 前端攻城师不容错过

Posted 2021-04-05 红芯Redcore

一名合格的前端程序猿一般不会也不愿意每天去做重复的工作，IT行业每天更新迭代的速度那么快，我们还有好多好多新的技能要花时间去get。

同样的效果，同样的动画，每天重复着写同样一套代码，最后搞得自己对工作失去兴趣，枯燥、乏味，累感不爱。于是乎，程序猿进化了~~这个种族在这种简单重复单调的工作中发现了一些代码上的共通点，用自己掌握的成熟技术，用带有扩展性的语言将常用的代码封装好，不管是css or javascript，在使用的时候传递对应的参数进去，直接调用，省时省力还能把代码贡献出来让别人使用，感觉so easy有木有。

于是乎，框架本身的扩展性、兼容性以及使用的便捷性，使得各种各样的插件和框架开始被程序员们冠以亲睐的目光。Google在13年提出的webcomponents就提到，Web组件将会是Web前端的未来，而Web组件就是通过这些被封装的小组件、小框架融合而成，就像是点成线，线组面一样样的。

---

目前前端框架主要采用JavaScript+CSS 模式，我们先来了解一下这两者。

预准备之--JavaScript

目前主流的 JavaScript 框架排名中，jQuery 和 Ext 可算是佼佼者，获得了用户的广泛好评。国内的一些框架很多也是仿照 jQuery 对 JavaScript 进行了包装，不过这些框架的鼻祖 YUI 还是坚持用自己的 JavaScript 类库。

jQuery 是目前用的最多的前端 JavaScript 类库，据初步统计，目前 jQuery 的占有率已经超过 46%，它算是比较轻量级的类库，对 DOM 的操作也比较方便到位，支持的效果和控件也很多。同时，基于 jQuery 有很多扩展项目，包括 jQuery UI(jQuery 支持的一些控件和效果框架)、jQuery Mobile(移动端的jQuery 框架)、QUnit(JavaScript 的测试框架)、Sizzle(CSS 的选择引擎)。这些补充使得 jQuery 框架更加完整，更令人兴奋的是，这些扩展与目前的框架基本都是兼容的，可以交叉使用，使得前端开发更加丰富。

Ext 是 Sencha 公司推崇的 JavaScript 类库，相比 jQuery，Ext JS 更重量级，动辄数兆的文件，使得 Ext 在外网使用的时候会顾虑很多。但是，另一方面，在 Ext JS 庞大的文件背后是 Ext JS 强大的功能。Ext JS 的控件和功能可以说强大和华丽到了让人发指的程度。图表、菜单、特效，Ext JS 的控件库非常丰富，同时它的交互也非常强大，独立靠 Ext JS 几乎就可以取代控制层完成于客户的交互。强大的功能，丰富的控件库，华丽的效果也使得 Ext JS 成为内网开发利器。

框架鼻祖 YUI 也有自己的 JavaScript 类库，DOM 操作和效果处理也还比较方便，功能和控件也很齐全，但是相比 jQuery 和 Ext JS 显得比较中庸一些。随着 Yahoo!的没落，YUI 的呼声也逐渐被新起的框架淹没，想来也让人惋惜。

除了上述的三个 JavaScript类库，还有 Dojo、Prototype、Mootools 等众多类库，由于本文讨论的框架多采用上述框架，所以其他框架暂不讨论。

预准备之 CSS

随着 CSS3 的推出，浏览器对样式的支持更加上了一个层次，效果更加出众。各框架也纷纷开发出基于 CSS3 的样式，让框架更加丰富。

对于 CSS3，更是推出了一些预编译的扩展框架，主要是 LESS、Sass 和Compass(Compass 是基于 Sass 的扩展)。可以方便地进行变量定义，格式引用，函数定义等操作，并内置了大量的效果。让您的 CSS 开发效率提升一个档次。根据 Chris Coyier 的比较，Sass+Compass 几乎完胜 LESS。（有兴趣的读者可以自行参考http://css-tricks.com/sass-vs-less/）。由于 Sass 是用 Ruby 开发的，所以也需要相应的 Ruby 环境将文件编译成 CSS 文件。

现在业内比较出名的框架有好多，比方说Foundation、AmazeUI、Kissy等等。

Foundation

Foundation是 ZURB 旗下的主要面向移动端的开发框架，但是也保持对桌面端的兼容，目前已经更新到Foundation4 版本。框架主要采用 jQuery 和Zepto（语法酷似 jQuery，但比 jQuery 更轻量级）作为 JavaScript 基础，CSS 则基于 Sass、Compass，有着很好的扩展性，并有着丰富的布局，版式和多种多样的控件与特效，非常方便开发者使用。控件的响应式效果也帮助用户识别不同浏览器效果。ZURB 作为一个完整的项目组，包括很多原型、设计、构建、分析等一系列工具，为用户提供完整的服务。当然，有很多服务是要收费的。

Foundation 主要以移动端风格为主，如图所示：

Amaze UI

AmazeUI 面向 html5 开发，使用 CSS3 来做动画，以Mobile first为理念，从小屏逐步扩展到大屏；根据用户代理、针对国内不同内核的浏览器以及不同浏览器下的字体排版进行了全面的考究，进行设置；其中的Web 组件，由模板（hbs）、样式（LESS）、交互（JS）三部分组成，通过一个 package.json 文件描述，使用 Handlebars 作为模板引擎；同时提供了Slush.js的开发脚手架，以快速生成 Web 组件目录及相关文件。

Kissy

Kissy是阿里集团自主开发的前端框架，目前在淘宝网、一淘网等阿里系网站上得到不少应用。Kissy 框架模仿 jQuery 编写了自己的内核 Kissy Core，用于对 DOM 的解析，Ajax 处理等。同时，有着丰富的控件，并实现了一些动画效果和特效。同样，在 Kissy的控件中也可以看到 Bootstrap 等国外框架的影子。此外，Kissy abc 项目工具可以帮助用户实现自动化构建，并有很多扩展组件方便用户使用。

应该说 Kissy 是目前国内开发的最好的前端框架，在实际使用中也经过了检验，但跟国外成熟框架相比还是有一定差距。

欢迎大家前来讨论：374946651

戳

“阅读原文”

进入Amaze UI官网

↓↓↓