前端技术归纳

 

文/李晶

 

随着互联网产业的爆炸式增加，与之伴生的Web前端技术也在历经洗礼和蜕变。尤为是近几年随着移动终端的发展，愈来愈多的人开始投身或转行至新领域，这更为当今的IT产业注入了新的活力。尽管Web前端技术诞生至今时日并不长，但随着Web技术的逐渐深刻，从此将会在如下几方面发力。

1. Web移动终端开发。
2. JavaScript的兄弟们。
3. 百花齐放的类库和框架。
4. 工程化的Web前端开发规范。

Web移动终端开发

PhoneGap： 一个开源的开发框架，使用HTML、CSS和JavaScript来构建跨平台的移动应用程序。它使开发者可以利用iPhone、Android、 Palm、Symbian、BlackBerry、Windows Phone和Bada等智能手机的核心功能，包括地理定位、加速器、联系人、声音和振动等。除了在本地编译应用以外，还可使用PhoneGap提供的云 端Build工具进行应用编译。也就是说，只须要将用HTML5写好的应用上传到PhoneGap的云端服务器，PhoneGap Build便可将其编译成适合不一样平台的应用。

Sencha Touch：说到这里，就不得不提一些面向移动端的WebUI库，毕竟PhoneGap是一个工具，要想基于Web技术构建完整的App，必须选择一些适 用的移动UI库。而最值得一提的是Sencha Touch，它可让Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，所有基于最新的HTML5和CSS3的Web标准，全面兼容Android和iOS设备。PhoneGap 昭示着一种开发趋势，即App也可使用Web前端技术来完成。而做为开发者最经常使用的UI工具箱，Sencha Touch又进一步加速了这种趋势，目前在淘宝已有大量的项目采用这种思路来搭建，即在内置应用的外壳加上自定义的基于移动Web的UI库。相信在将来这 种模式必会愈来愈流行。

Media Queries：在CSS2时代，若是你曾经为网站设计过打印版CSS，那么就会明白CSS3 Media Queries的做用。不过，CSS3的Media Queries比CSS2的Media Type更实用，由于CSS2 的Media Type并未曾被多少设备支持过。CSS3的Media Queries能够获取这些数据：浏览器窗口的宽和高、设备的宽和高、设备的手持方向（横向仍是竖向）和分辨率等。也就是说，Media Queries提供了一种基于不一样的平台写CSS的技术。这项技术在2011年初被推广开来，至今已很是火热，尤为是在Web页面仍占互联网流量大多数的 今天，这种兼容技术能很快让网站兼容移动设备，保证产品实现最快的跨平台的兼容性和多平台的可用性。

Zepto.js：一个专为 Mobile WebKit浏览器（如Safari和Chrome）而开发的JavaScript框架。它标榜本身简约的开发理念可以帮助开发人员简单、快速地完成开发 交付任务。更重要的是这个JavaScript框架是超轻量级的，只有5KB。Zepto.js的语法借鉴且兼容jQuery。目前已有很多网站开始基于 Zepto.js作应用，由于在抛弃了IE浏览器的兼容性问题后，Web开发会变得愈来愈纯粹，体积更轻巧，编码也更加愉悦。不能否认，随着移动终端开发 愈来愈流行，Zepto.js在将来将会有更加广阔的应用场景和空间。

Bootstrap：Twitter推出的一个开源的用于前端开发的工具包。它由Mark Otto和Jacob Thornton合做开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，由动态CSS语言LESS写成，与CSS 框架Blueprint存在不少类似之处。Bootstrap一经推出便颇受欢迎，一直是GitHub上的热门开源项目，NASA和MSNBC的 Breaking News都使用了该项目。2012年第二季度，Bootstrap发布了2.0版，Bootstrap 2.0的一个重大改进是添加了响应设计特性，在1.0中，这是让不少开发人员抱怨的地方。并且为了提供更好的针对移动设备的响应式设计方 案，Bootstrap 2.0采用了更为灵活的12栏网格布局。此外，它还更新了一些进度栏及可定制的图片缩略图，并增长了一些新样式。值得关注的是，Bootstrap是一个 很是轻量级的框架，2.0在压缩后只有10KB。Bootstrap为咱们的网站快速搭建提供了不错的工具和思路，这个工具集将拥有更旺盛的生命力。

JavaScript的兄弟们

CoffeeScript 是一个借鉴Ruby编写的新编程语言，建立者Jeremy Ashkenas戏称它是JavaScript的低调的小兄弟，由于CoffeeScript会将Ruby编译成JavaScript，并且大部分结构都 类似。但不一样的是，CoffeeScript拥有更严格的语法。它的最大功绩就是将JavaScript硬绑的C/Java语法抛弃了，改成采用相似 Ruby/Python的语法。Ruby/Python原本就是深受Lisp影响的，与JavaScript算是同门师兄，它们的语法通过了实践考验，非 常适合函数式编程。这种优雅的语言独具魅力，即将面世的2013版的淘宝首页即采用了CoffeeScript实现。

TypeScript 是微软开发的JavaScript的超集，TypeScript兼容JavaScript，能够载入JavaScript代码而后运行。与 JavaScript相比，TypeScript进步的地方在于：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增长开销；增长一个 完整的类结构，使之更像是传统的面向对象语言。因为JavaScript只是一个脚本语言，并不是用于开发大型Web应用，因此没有提供类和模块的概念。而 TypeScript扩展了JavaScript实现了这些特性，能更好地支持大规模JavaScript应用开发，吸引了不开发者。但要注意，虽然 TypeScript有微软作后盾看起来颇有保证，但目前提供的只是早期的预览版本，TypeScript并不像它的网站看起来那样精美，最终版本可能会 在一年后ECMAScript 6发布会肯定，如今的版本只是个开发预览版。所以，TypeScript从此发展如何，还须要进一步观察。

此外，在服务器端，Node.js愈来愈流行。现在Node.js不只做为处理高并发请求的中间层解决方案，还因其灵活的语法和丰富的底层API，愈来愈多 的人开始用它来写工具，尤为是以前基于Ant或者Java的一些工具现在都有了Node.js的版本。

如此看来，Node.js在命令行工具领域有着更加 广阔的应用场景，甚至能够代替Perl或者Ruby这些传统的动态语言。在淘宝Node.js已有很是多的应用场景，例如在数据部门，Node.js被用 做处理高并发场景下的容池，专门吸取高并发的请求，甚至可以保持和客户端的长连接，而这在以前则须要花费很高昂的成本，例如Comet技术等。此外，淘宝 的开源前端类库KISSY也能够直接运行于Node.js环境，这样就能够在命令行运行KISSY代码，不少前端代码就有机会采用自动化测试等，提升生产 效率。再者，淘宝内部的开发工具链也已大部分采用Node.js来构建了。

百花齐放的类库和框架

SeaJS是由支付宝前端高级技术专家王保平（玉伯）开发的一个遵循CMD规范的模块加载框架，可用来轻松愉悦地加载任意JavaScript模块和CSS模块。 SeaJS很是小巧，小巧在于其压缩后体积只有4KB，并且接口和方法也很是少。SeaJS有两个核心：模块的定义和模块的加载。SeaJS能够加载任意 JavaScript模块和CSS模块，能保证你在使用一个模块时，已将所依赖的其余模块载入脚本运行环境中。SeaJS可让你享受写代码的乐趣，不用 去管那些加载的问题。毕竟如今网页的可维护性和性能问题同样严峻，体如今：文件太多，不利于维护，前端后端都同样；HTTP请求过多，固然这个能够经过合 并解决，但若是没有后端直接合并，那么人工成本会很是大。用SeaJS就能很是好地解决这些问题。SeaJS遵循CMD规范，所以能够很方便地书写模块。 目前已经有愈来愈多的人采用CMD规范来开发项目了。

最近微软已经正式发布了Windows 8操做系统，Windows操做系统的风格已经彻底变成了磁贴状的Metro UI。对于微软来讲，这是一个巨大的改变，并且全部微软的平台包括桌面、平板、移动端及其网站都使用这个UI风格。Metro UI CSS是一个很是完整的建立Metro风格的网站框架。它自成体系，但也能够与其余框架一块儿使用。使用LESS建立，而且拥有网格系统、排版样式、表格、 按钮和图片。同时也拥有内建的JavaScript组件，帮助你生成片状、菜单、边栏、进度条和提示等，是一个很是好用的框架。随着Windows 8的进一步流行，这种风格的CSS类库必定会成为一种趋势。

Hype是一个小巧的工具，是Mac App Store新上架的一个HTML5创做工具，其长处是能够在网页上作出悦目的动画效果，无须Flash插件。开发该应用的公司Tumult由两个前苹果工 程师建立，并得到了Y Combinator的投资。因为公司的联合创始人之一Jonathan Deutsch曾担任Mail.app后端的技术主管，所以他在接受Paul Hontz的The Startup Foundry访谈时，谈到公司创始是为了解决HTML5创做工具缺少的问题。能够说，Hype是第一个可用的创做HTML5产品的可视化工具，具备里程 碑式的意义。随着硬件性能提高，HTML5的应用程序更加倾向于被工具生成，而不像传统意义上由工程师“切”出来。所以工具化是一个方向，无论HTML5 是否真的能在移动终端扎下脚跟，这种方向是值得坚持的。毕竟，HTML5的应用开发如今还处于原始社会。

iScroll.js是使用原生 JavaScript编写的一个模拟滚动效果的小类库，不依赖于任何JavaScript框架。旨在解决移动WebKit系浏览器的区域滚动问题，兼容 Mobile Safari、Android默认浏览器、Safari、Chrome、Firefox5+、Opera11+、IE9+及其余WebKit核心浏览器。 最新版本为iScroll4。这个小库一问世就备受关注，由于它不只能够在PC端完美模拟滚动效果，在移动终端里对触屏事件的支持也堪称完美。

iScroll4 是2011年末问世的，2012年在移动终端产品开发中大放异彩，在淘宝的诸多产品中都用到了这个JavaScript库。iScroll是小而精的经典 做品，名字也带着苹果范儿。但美中不足的是，只能使用ID调用。不过这个小特性不是什么大问题，能够经过二次封装来解决。期待iScroll4在移动终端 里有更多精彩的表现。

前端MVC在2011年是比较火的话题，随着愈来愈多的人开始尝试使用诸如JavaScript MVC和Backbone.js这些MVC类库，更多的产品也看起来更像“软件”而非“网页”。但因为前端环境的复杂性，咱们也渐渐发现“这种”MVC并 非完美，只能应用于“基于数据驱动”的场景，而对“基于事件驱动”的场景却没有太好的解决办法。目前，淘宝有不少产品在尝试使用“有限自动机”来弥补 MVC在这方面的不足。所以，新场景下的MVC还须要更深刻的提炼。

工程化的Web前端开发规范

2012 年，关于前端开发编码规范的讨论越来越多。国外和国内的顶尖开发者几乎同时对编码规范产生了很大兴趣，前Yahoo!首页首席前端工程师N.C. Zakas在他那本《高可维护的JavaScript》书中也提到规范在团队协做过程当中的重要性。而以下这两个方面，是值得咱们探讨和深思的。

AMD 与CMD规范之争，随着CommonJS的进一步普及，CommonJS规范在标准的模块开发领域发挥着愈来愈重要的做用，而CommonJS在浏览器端 的难以实现却为这份规范增添了一丝变数。本质上讲，CommonJS是一种用于同步加载JavaScript代码的API规范，很是简单优雅。为了在浏览器端实现这种机制，则不得不加入了一层异步回调，这即是AMD（Modules/Asynchronous-Definition）。RequireJS 实现了这个规范，而Dojo也将立刻彻底支持（Dojo1.6）。规范自己很是简单，甚至只包含了一个API。玉伯在开发SeaJS的过程当中，更多地保持 了CommonJS Modules规范的风格，即CMD（Common Module Definition）。较之AMD，CMD没有采用单一的API来适用于多个功能，而是根据不一样功能定义不一样的API。我认为，二者在完备性上是基本一 致的，但在社区理念和编程风格上有所差别，开发者能够根据本身的偏好来选择使用AMD仍是CMD编程风格。

 

Java语言编码 规范对于前端开发编程规范有很是大的影响。在Zakas的《高可维护性JavaScript》一书中提到了五种JavaScript编程规范，都和 Java语言编码规范有着相似的渊源：Crockford编程规范、 jQuery核心风格指南、SproutCore编程风格指南、Google的JavaScript风格指南和Dojo编程风格指南。无论是哪一种规范，都 强调了编码风格一致的重要性，这也可看出，前端团队开发愈来愈看重规范，JavaScript的灵活性须要某种程度的限制。

总之，经过上面的阐述，咱们能够看到前端技术的不断进步和推陈出新，也可以体会到项目过程的工程化，解决方案的轻量化，库和框架的多元化，知识结构的体系化，这种趋势在从此会变得愈来愈明显，也昭示着前端技术的发展方向。

说 到前端技术知识结构的体系化建设，这是我这些年来一直都在作的事情，在2011年也画了一张图来讲明个人观点——前端技术体系的建设是一项长期的任务。毕 竟前端新技术新知识层出不穷，对于经典的知识结构的整理也颇有挑战性，但这项工做终究须要有人去作，为新入道的人指出一个大体的方向。对于前端工程师的成 长问题，我也写过一篇长文“前端开发十日谈”，帮助新人们解惑。

很是感谢个人同事朴灵，已经将这个知识结构新建了一个开源项目（http://github.com/JacksonTian/fks），也但愿你们一块儿参与进来，为前端技术知识体系建设作出贡献。

花名拔赤，淘宝前端工程师，具备多年前端开发经验，在团队协做、组件开发、移动Web App等方面有深刻研究，曾经参与淘宝首页、KISSY等项目开发。