经验分享：去哪儿网的网站前端框架如何挑选？和主流JavaScript框架有什么不同？

随着前端框架的不断创新，许多IT企业面临着“如何选择框架”和“是否需要重建轮子”的选择。前端架构师司徒正美分析了主流框架的优缺点和适用场景，并为不同规模的公司和项目提供了相应的前端技术选择方案。近年来，前端技术发展迅速，几乎每年都会出现一个主流框架。每次新开业务线或启动新项目，第一件事就是纠结:用什么框架，重建什么轮子？RequireJS，五六年前，移动终端还没有兴起，我们别无选择，只能jquery。有人会说jquery只是一个类库，而不是一个框架；但当时前端业务并没有今天那么繁重。本来是后端做的，都搬到了前端，因为只有jquery才能打败世界。jquery不够，还有成千上万的jquery插件。所以问题是一个接一个地衍生出来的。一个页面上有太多的jquery插件和太多的请求，所以我们必须打包它们。包装要求我们计划插件。因此，这一需求在社区中逐渐形成了一些规则，其中最著名的是AMD规范，反映了RequireJS的加载库。RequireJS是前端技术发展的分水岭。JavaScript在ES6之前没有自己的加载机制，RequireJS的出现意味着前端可以更大规模地发展。我将来提到的技术选择是一个非常重要的选择点，即是否有加载机机制或符合模块规范。在选择前端框架时，应综合考虑框架本身和团队情况，回到原来的主题。框架的选择应该从两个方面来看，一个是框架的能力，另一个是你的团队的能力。从框架的角度来看，其功能丰富，社区活动，国内社区活动（有些在国外很受欢迎，但只有国内初创公司或一些大公司的边缘项目在测试水）、我们考虑的是文档是否齐全，是否及时更新，测试覆盖率和启动难度。然而，能够进入我们视野的外国框架基本上是在繁荣的世界里闯出来的领导者。jQuery、Angular、KnockOut、Emberjs、Polymer、React、Backbone、Zepto，我们基本上是围绕这些人转的。当然，还有更大的东西，比如EXT、YUI、Dojo、EasyUI、Bootstrap，这是UI库层面。以下是2012年流行的12个JavasscriptMVC框架的纯技术评估:显然，我们的第一步是圈定最流行的框架和库作为评估对象，然后根据自己公司的情况进行筛选。贵公司是建站公司还是有自己产品的公司？如果是建站公司，页面不会复杂到哪里去，基本上jquery 完成Bootstrap，不要想太多，就是它们。如果你有自己的产品，维护大量的客户数据，处理客户，不难想象有一个非常复杂的客户关系管理系统。根据中国人的特点，这只会变得越来越复杂，这需要仔细考虑。这通常持续了十年的维护升级，我们需要看看一个框架是否像你的产品那样长寿，它的升级和更新是否频繁和温和。如果你的项目是一个跨度超过三年的大项目，用“人月神话”这个词来说，90%的大项目应该尽量避免谷歌产品。我们需要使用更稳定、更成熟的技术方案，我们需要专注于避免谷歌的产品，它的许多产品都是票性的，GWT、Closure、Darty是前车之鉴。基于许多新技术的Polymer，其中Objectter.observe()、CustomElements、HTMLImports、ShadowDOM、Model-Drivenviews还远未标准化，很多都是独家的，变数太大，所以才出现下图所示的悲剧。Angular不是我黑的。它也喜欢悬崖升级。它与IE6-8兼容，1.08兼容旧IE，1.2兼容旧IE。1.3摒弃了旧IE的兼容性，直接从源代码中删除了所有兼容代码。因此，所有补丁方案都无法返回天空，并且不支持全球Ctrl函数。许多模块需要独立引用。1.4不支持向下的动画模块，由于使用Objectt，2.0由at改为ts构建.observe()所以不支持IE6-11，Chrome30...后台系统可以考虑EXT、EasyUI，avalon等国内优秀框架也值得考虑。如果您的产品是后台系统，则有两种选择：使用EXT、EasyUI等重大UI库方案，EXT具有严重的排他性，很难与其他前端解决方案相结合。它可以帮助你完成任何模块组织、包装和数据可视化。它可以帮助您完成任何模块组织、包装和数据可视化。它的文档齐全漂亮，入门难度中等，但它要求你的团队非常稳定。现在很难招聘全职EXT的前端。EasyUI是中国大品牌的UI框架。虽然它是封闭的，但扩展它并不难。此外，国内淘宝Kissy，网易Nej也不错。还有更轻的解决方案:MVVM。MVVM最擅长做这些重交互的产品。例如，JQuery社区为了对应复杂交互的Gird，开发了各种巨大的DataGrid、jqGrid、FlexiGrid，MVVM的几个循环绑定不如简单利落，扩展性好。目前，KnockOut、Emberjs、Angular和我写的avalon就是这种框架。虽然Angular有点坑，但如果你从1.3开始，不鸟IE，这仍然是一个不错的选择。它活跃的社区给它带来了无限的可能性。Knockout在.Net在人群中很受欢迎。微软生产，前端MVVM框架的鼻祖，但需要过度处理后端数据，因为不支持嵌入对象的绑定。Emberjs没有好爸爸，但是有好爸爸，作者Yehudakatz是jquery，Rails、SprouteCore、Merb、著名框架的核心成员Handlebars，虎父无犬子，Emberjs仍然是国外第二大MVVM框架。avalon是一款适合国情的MVVM。它有一个特殊的版本，兼容IE6，易于使用，性能高，视频教程多。如果有问题，可以抓住作者，这是它的几大卖点。重SEO产品可以考虑jquery Bootstrap RequireJS组合如果你的产品是商场这样的重演示产品，对SEO有要求，MVVM就不适合了。Angular和avalon目前正在进行后端渲染机制，但还没有进入台面。此时jQuery Bootstrap RequireJS非常好用。RequireJS的功能不仅提供了按需加载机制，还使我们能够组织更大的代码。如果不使用RequireJS，中国的另一个选择是SeaJS，它的规格是CMD。此外，还有CommonJS规范，但不能直接运行在前端，需要fekitt的帮助、FIS、合并了Webpack等构造工具。无论如何，此时你选择的框架必须有AMD、CMD或CommonJS的任何加载规范都有利于您未来的横向扩展。至于插件，小插件倾向于使用UMD，它可以使AMD、CMD、加载任何加载器的CommonJS。移动技术混乱，需要多管齐下。如果你的产品是移动的，基本上是SPA架构，因为它会减少等待，刷新整个页面和请求数量。目前，该领域非常混乱。与PC端不同，需要兼容的浏览器是N倍。为了性能，浏览器制造商切断功能或改变一些浏览器特性的行为往往会导致一些奇怪的错误。目前，社区正在整理这些坑和解药。但是目前还没有一个框架可以解决所有的问题，需要多管齐下。我的观点是:RequireJS(按需加载，移动端不能打包，充分利用304缓存，腾讯做了一个更牛叉的增量更新加载器MT，也可以试试) Backbone(组织代码和路由管理) Zepto(轻量DOM操作) fastclick.js(点击穿透和延迟处理) Hammer.js(各种触屏事件) iscroll5.js(滚动条处理) Animate.css(CSS3动画) Enquire.js(处理响应布局)。可以看出，移动端的每个部件都腐烂到雄蕊，每个部件都需要一个特殊的工具来修复。可以看出，移动终端的每个部件都腐烂到雄蕊，每个部件都需要一个特殊的工具来修复。移动终端非常注重体验，每个小角落都有各种各样的动画，但浏览器或自己的WebView非常糟糕，所以Native和Hybird的话题一直如此受欢迎。有人说，既然DOM最吃性能，那就用Canvas代替吧(见:http://zhuanlan.zhihu.com/FrontendMagazine19967854和http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html）。Facebook还推出了自己类似的ReactNative方案，实现了一套GUI，但编写语言是JavaScript。它是用自己原来的超高性能轮子React实现的。这可能是一条路。但是优缺点也很明显，就像Angular浓浓的Java风格一样，React在逻辑上插入了大段标签语言（JSX）。同时，React的排他性也很强，很难与其他库配合使用。与此同时，我们可以看到，JQueryMobile，一个著名的JQuery家族，并没有入围。那个性能太差了，连SenchaTouch都不如。以上只是核心库，还没有搬出UI库。有不少UI库被称为MobileFirst，可以大胆使用CSS3，因为它忽略了IE。目前Foundation比较出彩、Semantic，Refill、Ratchet。假如只是想在平板上运行，性能问题就不会那么紧张，我们也可以试试inoic。、SenchaTouch，KendoUIMobile...没有最好的，基本上选择最适合自己的。对于每个平台，我都列出了一些主流框架，但这并不意味着你们都能控制它。小马过马，老牛没过膝，松鼠淹死半死，就是这样。初创公司喜欢新的框架，这是因为他们能负担得起高薪招募一两个前端牛。基本上，他们做了所有的页面，所以使用Angular或Ember没有区别。小公司小心，人员流失大，jQuery RequireJS是万金油。大公司基本上有自己的技术沉淀。换句话说，他们应该有自己的前端框架，除非它很旧，否则不建议重建轮子。对大公司的建议是建立自己的技术委员会，根据自己的人员配置选择框架。有句话说得好，不求最好，但求最合适。有些框架属于牛逼人手中的牛逼闪闪，二逼人手中一团乱麻。对于一些成长特别快的中等公司来说，这是最重要的预防措施。有一些牛人，但70%的战斗主体是新培训的实习生，很难开始。必须过滤掉中文文档不完整的框架。同时，我也不排除造轮子的可能性，毕竟有些公司人才济济，可以推出一些可靠的开源产品来造福社区。然而，无论我们选择什么框架或决定自己制造轮子，我们都不应该忘记我们的初衷。技术必须使我们的工作和生活更加轻松愉快——我们只选择我们可以控制的框架。我们不能保证一年后它是否会过时和落后，但至少它不会成为绊脚石。对于亚当·斯密(税收是必要的恶)来说，框架是必要的恶，它是强烈的约束，所以我们必须仔细选择。