前端结构不断推新，很多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个JavasScript MVC结构的纯技能评价：

显着，咱们榜首步便是圈定时下最盛行的结构与库作为评价目标，然后再依据自家公司的状况进行挑选。贵公司是建站公司，仍是有自己产品的公司呢？假如是建站公司，页面不会杂乱到哪里去，根本上jQuery+Bootstrap搞定，不要想得太多，便是它们。假如有自己产品， 要保护一大堆客户数据，要与客户打交道，不难想象存在十分杂乱的CRM体系，依照中国人的特性，这东西只会越来越杂乱，这就要稳重考虑了。这往往是继续十年的保护晋级，咱们需求看一下某结构是否有你们的产品那么长命，这结构的晋级更新是否频频陡峭。

大工程应尽量避开谷歌产品

假如你的项目是一个跨度三年以上的大工程，用《人月神话》的术语来说，90%便是个焦油坑。咱们需求运用更稳健老练的技能计划，咱们需求要点避开谷歌的产品，它的许多产品都是玩票性质，GWT、Closure、Darty便是前车之鉴。Polymer依据许多新技能构建，其间Object.observe()、 Custom Elements、HTML Imports、Shadow DOM、Model-Driven Views还远远没被标准化， 许多仍是独家的，变数太大，因而才呈现下图所示的悲惨剧。 Angular不是我黑它，这东西也喜爱断崖式晋级，它在1.08时兼容IE6-8，1.2时需求打补丁兼容老式IE，1.3摒弃了对老式IE的兼容，直接在源码中删除了一切兼容代码，因而一切补丁计划都无力回天，而且不支撑大局Ctrl函数，许多模块需求独立引证，1.4不向下支撑动画模块，2.0由at改成ts构建，因为运用Object.observe()，因而不支撑IE6-11，Chrome30……

后台体系可考虑EXT、EasyUI，avalon等国内优异结构也值得考虑

假如你们的产品是后台体系，那么就有两个挑选，运用EXT、EasyUI这些严峻的UI库计划，其间EXT具有严峻的排它性，它很难与其他前端解决计划并用。什么模块安排、打包、数据可视化，它都现已能悉数帮你搞定。它文档完备美丽，入门难度中等，但它要求你的团队十分安稳，现在招一个专职EXT的前端是很难的。EasyUI是国内比较大牌的UI结构，尽管闭源，不过想扩展它不是难事。

此外，国内的淘宝Kissy， 网易Nej也不错。还有更轻量的计划：MVVM。MVVM最拿手做这些重交互的产品。举例说，为了对应杂乱交互的Gird，jQuery社区开宣布各种巨大巨物DataGrid、jqGrid、FlexiGrid，还不如MVVM几个循环绑定来得爽性利落，扩展性又好。现在，KnockOut、Emberjs、Angular与我写的avalon便是这一类结构。Angular尽管有点坑，但假如你是从1.3用起，而且不鸟IE，它仍是一个不错的挑选，其活泼的社区为它带来无限的或许。KnockOut在.Net人群中十分盛行，微软出品，前端MVVM结构的开山祖师，不过它需求对后端数据进行过多的加工，因为它自身是不支撑对套嵌目标的绑定。Emberjs没有一个好干爹，但有一个好亲爹，作者Yehuda Katz是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标准，但这无法直接运转于前端，需求凭借fekit、FIS、Webpack这样的构建东西进行兼并了。不管怎么说，你这时选用的结构有必要存在AMD、CMD或CommonJS任一种加载标准，这便利你今后的横向扩展。至于插件，现在小插件们都趋向用UMD，它能够让AMD、CMD、CommonJS任一种加载器加载。

移动端技能较紊乱，需多管齐下

假如你们的产品是移动端，根本上是SPA架构了，因为这会削减等候，整页改写与请求数。现在该范畴十分紊乱，不同于PC端，要兼容的浏览器多出N倍，而且为了功用，浏览器商乱砍功用或改动一些浏览器特性的行为，往往引发一些古怪的BUG，现在社区正在收拾这些坑与解药。但现在没有一个结构能够摆平一切问题，都需求多管齐下。我的见地是：

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/FrontendMagazine/19967854 与http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html ）。Facebook也推出了自己相似的计划React Native，自己完成了一套GUI，不过编写言语是JavaScript。它是运用自己本来的超高功用轮子React完成的。这或者是一条路途。但优缺点也显着，正如Angular浓浓的Java风，React是在逻辑中刺进大段标签言语（JSX）。一起React的排它性也十分强，很难与其它库调配运用。一起，咱们能够看到，出自jQuery名门的jQuery Mobile并没有入围，那个功用太糟了，连Sencha Touch也不及。上面说的仅仅中心库， 还没有搬出UI库呢。声称Mobile First的UI库不在少数，因为无视IE，能够斗胆运用CSS3。现在比较出彩的有Foundation、Semantic，Refill、Ratchet。假如仅仅想运转在平板上，功用问题就不会那么窘迫了，咱们还能够试试inoic、Sencha Touch， Kendo UI Mobile……

没有最好，挑选最合适自己的

根本上，针对每个渠道，我都列出一些干流结构，但不意味着你们都能驾御得住。小马过马，老牛没过膝，松鼠淹个半死，便是这么回事。创业公司喜爱新结构，这与他们拿得起高薪招一两个前端牛人所造成的，根本上一切页面便是他们干的，因而用Angular或Ember都没差异。小公司则当心，人员丢失大，jQuery+RequireJS是万金油。大公司则根本上有自己的技能沉积，换言之，应该有自己的前端结构，除非那东西很陈腐，不主张再造轮子。对大公司的主张是搞自己的技能委员会，依据自己的人员装备来挑选的结构。有句话说得好，不求最好，但求最合适。有些结构就归于牛逼人手里牛逼闪闪，二逼人手里一团乱麻。关于某些生长特别快的中等公司来说，这点最需防备，牛人是有的，但作战的主体70%都是刚训练出来的实习生，难上手，中文文档不全的结构就有必要过滤掉。我也不扫除造轮子的或许性，究竟有些公司便是人才辈出，能推出一些靠谱的开源产品来谋福社区。

但不管咱们挑选什么结构或决议自己着手造轮子，都勿忘初心，技能有必要让咱们作业日子更为轻松愉快——咱们只挑选咱们能驾御住的结构，咱们不能确保它在一年后是否会过期落后，但至少不会变成拦路虎。套用亚当·斯密的话（税收是一种必要的恶）来说，结构是一种必要的恶，它是强束缚的，因而有必要稳重挑选。