tags: web, html, js, css, grunt, php
我从事前端开发已经一年零六个月。从2015年末至今,前端开发有很多变化,这其中有我正在经历的,也有我尚未感受到的。而前端开发中的我所知道的各类知识,我想以自己绵薄之力,结合自身开发实践稍作梳理,让别人看看我踩过的坑。
这篇文章的阅读者是前端学习者,尤其是入门和中级前端开发。我写出了我自己所看到的前端开发世界里的色彩缤纷,也整理出了各个阶段能够参考学习的网站和资料。
三驾马车:HTML5 + CSS3 + JavaScript
HTML5 + CSS3 + JavaScript
HTML5 是HTML 和XHTML 的新版本。 在HTML5 草案 的规范中定义了可以用 HTML 和XML编写的单一的语言,意在解决在之前 HTML 的迭代中发现的一些问题并满足 web 应用的需求,这是以前HTML没有充分覆盖到的领域。
这意味着 HTML5 的很多新特性是为了适应现代浏览器而增加的,这其中包括更加语义化的标签,视音频播放的 API,本地存储功能的 API 等。详情参看W3school。
CSS3 是CSS 技术的升级版,目前最新版本是 CSS2.1,为W3C 推荐标准,建议阅读该规范的中文版,这篇翻译来自@黯羽轻扬。当然,目前 CSS3 已被大部分现代浏览器支持,而下一代 CSS4 还在开发中(有关 CSS3 开发相关请参考https://www.w3.org/Style/CSS/)。
ECMAScript 6 (简称 ES6)是JavaScript 语言的下一代标准,已经在2015年6月正式发布。伴随着 Node.js 的火热,JavaScript 已经不仅仅是浏览器里面的脚本。同时,越来越多的库和框架:React(a javascript library for building user interfaces)、Flux(application architecture for buiding user interfaces)、Angular(Superheroic JavaScript MVW Framework)、Babel、Mocha……让前端开发更加简单。

入门(html+css+js)

HTML5
我仍然是从前端开发的三驾马车开始讲入门的知识。毫无疑问,前端入门最快的路是打开电脑上的文本编辑工具,写下:
Hello world!
Hello World!
然后命名为 'name.html',接着在浏览器中打开这个文件。当看到浏览器中显示出“Hello World!”时,一切 OK!这个桥段实在是俗了点,不过我就是从这里开始踏上前端之路的。
接下来,我要选择一个编辑器或者 IDE ,透露最终答案:我目前使用 Win10 系统,编辑器使用 sublime text3 和Atom。对的,我使用两个编辑器,并且最终没有选择任何 IDE。但在此,我建议刚入门的开发者去尝试 WebStrom 这样功能齐全的 IDE,可以感受到代码高亮,代码自动补全,集成本地服务器测试等功能。然后,开始尝试在 sublime text3 和Atom 中自己安装能实现 IDE 里一切所需功能的插件,以及 IDE 不具备的功能。没错,这两个编辑器完全可以定制为一个 IDE,并且更专注于编程这一件事,而不管是 web 开发者,还是 java 开发者……。当然,前提是作为一个喜欢自己折腾的开发者。
选择好一个编辑工具,如同选择一把趁手的兵器。接下来是开始学习html5,css3,js 的时候了。这里仍然是一个很俗的桥段,打开这个网站:W3school。开始把这个网站里的所有代码(html5,css3,js按照这个顺序)抄写到自己的编辑器里,并且保存,然后在浏览里查看效果。如果感觉这样太枯燥了,那么可以到下面这两个视频网站去学习:极客学院和慕课网。下面是我推荐的几个系列视频学习课程:
《Html5从入门到精通》 这里包含的知识已经远远超过了入门阶段,而且也对知识体系作了很好的整理。但我依然建议入门者能够从W3school开始一点一点写代码,而不是在视频的讲解里遨游。因为视频学习往往容易让人忽视一些基础的知识,这对于入门者而言并不是好事。
《前端开发》 这里的知识也同样超过了入门阶段所需知识。但我仍然建议入门者去看看,但不要急于动手去写其中的代码,这里的内容可以让你看到前端开发是多么有趣,以至于忘记照着 W3school 里的枯燥代码写下 'hello,world' 这类的东西是多么无趣。然而, 在能够理解视频里那些酷炫好玩的东西之前,必须忍受 W3school 里呆板的代码。所以,现在先收藏这个网站,并且随时学习自己力所能及的内容。
CSS3
上一部分,已经涵盖了入门 html5 + css3 + javascript 所需要的工具和参考。但是,这里依然单独用一章节来讲 CSS3。因为,如果只是学完上面提及的内容,也许你会认为 css3 能做的事情仅此而已。但是,我可以郑重的提醒你,css3 可以实现所有你能够想象的样式。当结合 js,几乎所有的动画,交互都可以实现。
没错,这很夸张,但是我现在却深信不疑。无论是否看完 W3school 里CSS3 的内容,下面这个视频集合的内容都有可能让你重新认识 CSS3 ——《重拾 CSS 的乐趣》 。请务必记住这个视频的作者,@CSS魔法。因为他翻译的《css sprites》也是我重点推荐的参考书籍。
JavaScript
当然,在看完 W3school 上JS 的知识后,就应该看 jQuery 的知识了,仍然是在 W3school上,同时也应该多查看 jQuery 官网。如果精力充足的话,可以去看看Bootstrap。因为单凭 jQuery,Bootstrap 这两个东西已足够实现一个界面优美,功能完善的网站。
— 本节的扩展 —
(1)三个有趣的前端新应用:Hybrid app,微信内应用,H5
从迈入移动端时代,前端技术也有了新的应用。这里主要扩展三个我认为有趣的前端的应用。
Hybrid app:
一种兼顾Web和Native的一种开发模式。简单的理解就是在 app 里嵌入一个浏览器,然后访问前端开发的适配了移动端的网页。Hybrid app 要实现的是 app 与网页的数据交互。这种开发模式很好玩,让前端也能插手 app 开发。同时也让 app 开发者有兴趣接触前端技术。彼此间可以愉快的相爱相杀了……
微信内应用:
这个目前应该是属于国内专属的应用了。相当于 Hybrid app 模式里面已经实现了 app 的浏览器,定义好了使用微信功能的各类接口,只要开发适配微信的网页应用即可。只要掌握前端开发的基础知识,熟悉移动端开发适配的细节,然后根据微信提供的开发文档,就可以在微信 app 的开发中游刃而若有余地了。
H5:
这个不是 HTML5,不是!下面我会叫它 H5 专题页。首先看看它应该是什么一种形式(微信扫描二维码):
H5应用二维码
H5 专题页也是伴随微信火起来的。H5专题页,可以简单的认为就是在微信或移动端的 PPT。在国内,做前端开发的不会做 H5 专题页是不行的!所以,在入门知识都学完以后,务必尝试开发一个或多个 H5 专题页来丰富简历。
最后再补充一个好玩的东西:Electron。Electron 可以让你使用纯 JavaScript 调用丰富的原生 API 来创造桌面应用。
(2)ES6,Node.js,MongoDB,PHP,SQL……
ES6 : 接下来介绍的这些可都是很厉害的东西,作为入门者而言,没有必要马上去懂这些知识。但是,在前端进阶的路上,这里面的某些或全部都可能是要熟练掌握使用的。ES6自不必说,JavaScript 语言的下一代标准,但我认为你没有必要一开始就去纠结了解 ES6 与JavaScript 的区别,甚至于你完全不知道 ES6 是怎么回事,也完全不影响你作为一个合格的前端开发人员。但是,我们是有目标,有理想的。对于 JavaScript 这个开始在服务器,移动 app 端都展露头角的核武器,怎么能不去了解它的核心知识 ECMAScript?至于学习的时机,我认为是当你不再满足在浏览器上做东西,不再满足使用别人开发的库,框架的,当你不再满足只做一个前端,企图成为一名全栈工程师的时候,那么学习 ECMAScript 会是实现这一切的开始。
Node.js : "Node.js is a JavaScript runtime built on Chrome's V8 JavaScript Engine."——这句话来自Node.js 官网。意思是 Node.js 是构建于 Chrome 的V8 JavaScript 引擎()基础上的 JavaScript 运行环境。也就是说,它使得 JavaScript 这门程序语言可以脱离浏览器,而在服务器环境下运行。它的学习时机或许比 ES6 更早,因为我已经尝试用它在云主机上搭建 web 服务器。前后端使用同一种编程语言,这的确是一件另人兴奋的事情。
MongoDB : MongoDB,NoSQL 数据库的一种,由于我使用的不多,接触的也不是很深,这方面暂时不能提供很有价值的信息与资料。容我以后再来补上这一块的内容……
PHP,SQL : 我想在入门甚至于入门以后很长一段时间,凭借在 W3school 上了解到的关于它们的知识,已经足够应付开发任务。但我依然希望能够深入的学习它们,共勉之……
单就入门阶段的扩展而言,我想这些知识已经现在已经足够了。但是,前端的发展很多并不是我能够想象得到的,所有关注一些公众号,微博,github,以及各种前端技术的官方网站,时刻把握动向,是非常有必要的。虽然,经验丰富的开发人员会认为新的东西往往带有风险,只有成熟,稳定的技术才能实现价值。但是,现在前端的发展太过迅猛,每一个技术都在争夺开发者。前端开发框架中火热的有 Angular、React、Vue(国内阿里团队推出的一个框架),前端构建工具中有 Grunt,Gulp,browserify,webpack,前端测试工具有 mocha,jasmine,简直如同海贼王里的大航海时代。所以,对于火热的前端,我的态度是积极投身其中,研究各种技术,进而领悟它们所展示的思路和想象,而不是等到一切尘埃落定再来选择剩下来的技术。

流程和规范

网站开发不是一个人的战斗,即使是全栈工程师,也不应该一个人承担所有的任务。作为前端工程师,既要与视觉设计师、交互设计师对接设计稿、交互稿,又要与后端工程师对接数据模型。
“图难于易,为大于细”——就细节而论,与每一个角色的交流沟通过程都可以细致的整理出文章来单独讲解。因此,这里只扩展前端需要了解的知识。
— 本节的扩展 —
PS 和AI 的熟练使用,切图的规范,字体、svg 和iconfont 的应用
PS 和AI 自不必说。 MAC 上的专属设计神器 Sketch,如果有 MAC 设备建议也了解下。这里我只能提供一套不错的 PS 学习视频:PS入门教程。
至于 AI,由于最近我觉得网站矢量化是一个不错的方向,所以会更深入的学习 AI,之后单独整理一篇讲网站矢量化的文章,里面再详细讲解 PS 和AI 制作矢量图。
切图的规范,是需要设计师与前端一起商议出来。前端最好不要等到设计师自顾自的导出切图和标注图,毕竟大多数设计师不懂前端开发的逻辑。很多情况下,前端开发需要写相对距离,然而标注图上只有绝对距离,又或者相对距离的对象又完全不对,等等。总之,作为前端要清楚明白自己需要什么样的标注图,需要什么样的切图。我认为明白这两点最好的方式是自己多尝试标注、切图,找到符合自己开发逻辑的那套规范。当然,后续我也会把自己用的那一套规范整理出一篇文章。
字体的使用上,不可避免设计师会使用一些具有设计感的字体。对此,我的建议是两点:
如果用到的特殊字体只有少部分,不是全站都要使用的,我建议是做成 SVG 图导入网站。单独提一点小 tip,在高分辨率设备逐渐普及的现在,能够做成 SVG 的图,千万不要用像素图。(这点我会在网站矢量化的研究在单独讲解)
如果是全站都要用到某些字体,比如媒体网站或者新闻阅读类网站,那么建议使字蛛字蛛通过分析本地 CSS 与HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
这里又提到 iconfont 的应用了解,但是我也发现 iconfont 存在用户体验的问题,在一些大型网站上如 github 已经直接使用 SVG 替换 iconfont。当然作为了解 iconfont 的使用,我会在那篇网站矢量化的文章中介绍。
BAE,PHP 和SQL的学习使用
百度应用引擎(Baidu App Engine,简称BAE)是PaaS 平台,提供弹性、便捷、一站式的应用部署服务,支持 PHP/Java/Node.js/Python 等各种应用。只需上传应用代码,BAE 自动完成运行环境配置、应用部署、资源监控、日志收集等工作。