文档章节

前端技术

姚欣炜
 姚欣炜
发布于 2014/06/22 13:08
字数 4059
阅读 97
收藏 9
点赞 0
评论 0

文/李晶

随着互联网产业的爆炸式增长,与之伴生的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等项目开发。


© 著作权归作者所有

共有 人打赏支持
姚欣炜
粉丝 4
博文 51
码字总数 33914
作品 0
其他
程序员
第 10 届 D2 前端技术论坛,邀您参加

大会介绍 INTRODUCTION D2前端技术论坛 (Designer & Developer Frontend Technology Forum),简称D2。为国内前端开发者和网站设计师提供一个交流的机会,一起分享技术的乐趣,探讨行业的发展...

oschina
2015/12/09
3.7K
8
OneAPM x 腾讯 | OneAPM 技术公开课·深圳 报名:前端性能大作战!

「 OneAPM 技术公开课」由应用性能管理第一品牌 OneAPM 发起,内容面向 IT 开发和运维人员。云集技术牛人、知名架构师、实践专家共同探讨技术热点。 11月28日,OneAPM 技术公开课第五期将走进...

OneAPM蓝海讯通
2015/11/16
60
0
揭秘前端工程师未来就业方向,年薪50w不是梦!

如今,人工智能技术发展炙手可热,使得相应的AI技术人才成为各大科技公司争抢的香饽饽。 一份网上流传的2018届互联网校招高薪清单,更是爆出一线科技公司普遍能为AI相关的硕士、博士毕业生开...

gitchat
2017/11/25
0
0
讲真 | 身为web前端工程师的你,到底值多少钱?

在互联网+的社会,互联网行业的一个普通程序员的工资抵得上传统行业一个中小企业副总的工资了,可是实际上,一个传统经营多年的副总和程序猿的贡献度以及能力来比较未必就低,而薪酬不平均的事...

你好明天ll
2017/06/21
0
0
杭州!杭州!问啊W-Time技术分享沙龙,与互联网巨头技术高管零距离!

  问啊W-Time技术分享沙龙-杭州站将于5月15日举行,三位技术大咖相约W-Time杭州站现场与你分享技术那点事儿!活动预留足够的时间可以与技术高管们交流,也许下一个进入互联网巨头公司工作...

刘星石
2016/05/07
65
0
未来的前端工程师

作者简介:aoto 蚂蚁金服数据前端 以下我说的都是个人观点,比较宏观粗浅,主要针对的是前端工程师本身,没有深入技术和业务细节,请谨慎参考。 职能概览 前端工程师首先是个程序员,其次也是...

2017/12/30
0
0
聊聊未来的前端时代

  2016年结束了,前端技术的发展也将进入到一个新的阶段,那么未来又会给我们带来什么呢?这里就个人发表下意见,不喜勿喷。   就前端主流技术框架的发展而言,过去的几年里发展极快,在...

ouven
2016/12/14
1K
1
年薪30W,2018年前端发展趋势分析

互联网发展如火如荼,前端开发在经历了前两年的火热之后,大浪淘沙,沉淀下来,计算机科学基础的核心没有变化,而其领域将继续分化,专业将细分。 行业的持续发展使前后端逐渐融合,走向全栈...

心旗
05/14
0
0
web前端开发程序员的收入未来会更高吗

Web前端我们通过其字面意思大概可以了解到,web前端的设计师的工作内容就是直面用户的,当然,在这一过程中还会应用到一些包括用户交互,页面布局设计等,也许有人会问,ps和美工能够做web前...

web前端程序员
2017/12/07
0
0
谈谈css的加载及加载循序

谈谈css的加载及加载循序 Haorooms博客-前端博客-前端技术,记录web前端开发的技术博客2017-12-231 阅读 css 前言 关于前端css性能优化,网上很多类似文章,我之前也写过,《[网站前端性能优...

Haorooms博客-前端博客-前端技术,记录web前端开发的技术博客
2017/12/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

知识点总结

jq如何拿到data-info的自定义属性 1.1 原生可以获取到所有属性el.attrbutes 1.2 jq的$(el).attr('属性名称') 继承的几种方式,原型链 2.1 扩展原型对象实现继承 2.2 替换原型对象实现继承 2....

litCabbage
4分钟前
0
0
python语言规范

http://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/python_style_rules/...

ghou-靠墙哭
7分钟前
0
0
istio 监控,遥测 (理论)

Istio提供了一种灵活的模型来强制执行授权策略并收集网格中服务的遥测。 基础架构后端旨在提供用于构建服务的支持功能。它们包括诸如访问控制系统,遥测捕获系统,配额执行系统,计费系统等之...

xiaomin0322
10分钟前
0
0
阿里资深专家面试问题收集

corejava hashcode相等的两个对象一定相等吗?equals呢?反过来相等吗? 介绍一下集合框架? hashtable,hashmap底层实现是什么?hashtable和concurrenthashmap底层实现的区别? hashmap和treemap的...

undefine
11分钟前
4
0
alpine安装软件指定安装源

linux-alpine安装软件指定安装源 一、永久修改apk下载源地址 vi etc/apk/repositories 替换成阿里源 http://mirrors.aliyun.com/alpine/v3.8/main/http://mirrors.aliyun.com/alpine/v3...

我心中有猛狗
11分钟前
0
0
Centos7通过yum安装nginx

添加源地址(直接install可能不是最新版本的) sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm 安装 sudo yum install -y ng......

iplusx
13分钟前
0
0
ef .core Dapper Helper

using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Threading.Tasks; using Dapper; using Dap......

Lytf
15分钟前
0
0
iOS 小笔记

1.以下代码打印什么     __block int val = 10;    void (^blk)(void) = ^{        printf("val=%d\n",val);        };       val = 2;    blk(); /...

风了个1
17分钟前
0
0
【Spring Boot 系列 Spring Boot示例程序】

入门程序步骤,创建一个Maven项目。继承Spring Boot官方提供的父工程。再引入一个Web的应用启动器。 1、选择一个合适的IDEA工具 创建一个Maven工程,并添加如下配置 <parent> <...

HansonReal
18分钟前
0
0
217. Contains Duplicate - LeetCode

Question 217. Contains Duplicate Solution 题目大意:判断数组中是否有重复元素 思路:构造一个set,不重复就加进去,重复返回true,如果数据量大的话,可以用布隆过滤器 Java实现: publ...

yysue
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部