web新兴前端框架与模式研究

《web新兴前端框架与模式研究》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、Web新兴前端框架与模式研究-电子商务论文Web新兴前端框架与模式研究文／占东明洪家伟陈希杨徐礼飞辛鄢放摘要：随着互联网的进步，传统的Web技术已经不能满足于人们对交互体验的更高要求，使用ReactJS，bootstrap，AngularJS，H5等新兴技术成为未来前端开发的必然选择；展示了近几年兴起的新兴技术和工程化思想，分析其优缺点；指出应用和应对这些技术是未来几年前端发展的重要课题。关键词：前端发展；前端模块化；AngularJs；HTML5；Webpack；Backbonejs；Reactjs

2、引言近年来随着前端领域的大跨步发展，前端领域的技术方向呈现出了百花齐放的盛况。许多前端学习者在面对如此多元化的技术方向时，不免感到疑惑和茫然。本文旨在探讨近年来前端领域里一些框架和模式的应用方向及其特点。综合考虑了客观规律和主观判断的因素，以此为前端人员在技术决策提供科学、合理的分析。1、前端基石与催化剂1.1浏览器的跃进现在H5已经成为了一个符号，基本上所有具有绚丽界面或者交互的Web界面，无论是PC还是Mobile端，都被称为基于H5。H5技术的发展以及带来的一系列前端的变革，都离不开现代浏览器的

3、发展与以IE为典型代表的老的浏览器的消逝。1.2浏览器端的魔术：AJAXAJAX即“AsynchronousJavaScriptandXML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术，可以基于JavaScript的XmlHttpRequest的用于创建交互性更强的Web应用。AJAX是一种已有技术的mashup，多种技术组合在一起形成了其特色和优势，早在1998年就已经开始有人使用。Google在地图和Gmail等产品中对这项技术的深入应用，以及AJA

4、X这个吸引眼球的名字的提出，使其正式站在了聚光灯下，开始吸引无数人的目光。我们知道Web应用中用户提交表单时就向Web服务器发送一个请求，服务器接收并处理传来的表单，并返回一个新的网页。而前后两个页面中的往往大部分HTML代码是一样的，每次都返回整个页面内容是一种带宽资源的浪费。而AJAX应用仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器响应，更新页面的局部信息。这样不仅浏览器和服务器的数据交换大大减少，而且客户端也可以更加快速地响应用户操作。如果你用Gmail就应该

5、知道，Gmail从来都不刷新页面，所有的请求都是通过AJAX获取数据进行局部更新。AJAX的出现，以及诸如EXTJS、DOJO等一些前端开发框架的出现，也使得单页应用（SinglePageApplication）在这个时候流行起来。1.3ECMAScript2015年是JavaScript诞生的20周年。同时又是ES6标准落地的一年。ES6是迄今为止ECMAScript标准最大的变革(如果不算上胎死腹中的ES4的话)，带来了一系列令开发者兴奋的新特性。从目前es的进化速度来看，es后面应该会变成一个个

6、的feature发布而不是像以前那样大版本号的方式，所以现在官方也在推荐ES+年份这种叫法而不是ES+版本。更让人兴奋的是，JavaScript慢慢不再局限于前端开发中，NodeJs的提出让人们感受到了利用JavaScript进行全栈开发的能力，从此大大提高了开发的效率（至少不用多学习一门语言）。JavaScript在物联网中的应用也曾经引起一些追捧与风潮，不过今年物联网社区更加冷静地看待着这个问题，但是并不影响各大厂商对于JavaScript的支持，可以参阅《JavaScriptBeyondtheW

7、ebin2015》这篇文章。可以预见JavaScript在其他领域将继续大放异彩，毕竟ECMAScript6，7已经是如此的优秀。2、模块化和工程化2.1前端MVC：Angular/Backbone这种模式下，前后端的分工非常清晰，前后端的关键协作点是Ajax接口，规定好交互接口后，前后端工程师就可以根据约定，分头开工，开发环境中通过Mock等方式进行测试，同时在特定时间节点进行前后端集成测试。但是，随着业务功能的愈发复杂（看看现在的Gmail），这种模式本质上和JSP时代的Web开发并无本质区别，只

8、不过是将复杂的业务逻辑从JSP文件转移到了JavaScript文件中而已。现在，对于一个前端功能、交互复杂的SPA，JavaScript代码很容易膨胀（超过10万行）。很自然地，像服务端从JSP向MVC框架转换的过程一样，前端开发也出现了大量的MVC框架，比较典型的包括BackboneJS，AngularJS，EmberJS，KnockoutJS。总的来说，MV*框架的提出是为了解决前端开发的复杂度，提供一套规则组织代码、分层（MVC），通过合理的组织和