前端开发者应掌握的基本知识
前些天我给一个项目写过一个使用指南,以供其他的开发者们观摩学习。当我在写这个指南的时候,我意识到我不经意间罗列出的一些在测试、开发过程中用到的名词,诸如:Node,npm,Homebrew,git等,在两三年前绝对是能把我吓尿了的高端大气上档翅的东西。
曾几何时,编辑代码、本地测试然后通过FTP把项目发布到服务器是前端开发人员必要的工作流程。我们对于自身能力的衡量是基于我们能否搞掂IE6, 以及完成跨浏览器的完美显示。包括我自己在内的很多人都缺乏传统的编程经验,像HTML、css、JavaScript(以及jQuery)这些技能,也 都是靠自学成才。
在过去的几年里,这一状态正在慢慢改变。这导致了许多人开始认真对待前端开发——也许是由于不同浏览器的逐渐统一,亦或是由于包括我在内的这些浏览器厂商的前端开发者们,在开发过程中逐渐看到了能够对程序进行良好架构的有效方法。
不管是什么吧,我们的目光正在从对前端的细枝末节的关注转移到对于工具的关注,这就对前端开发者提出了一系列新的要求。那些认为这些要求理所应当并开始接受新知识的人,就足以把那些不能满足要求的开发者们甩出几条街了。
这里有一些我希望开发者们开始熟悉掌握的知识,如果有某些部分你觉得十分需要,你可以加快学习这部分内容。
JavaScript
JS的重要性是不言而喻的,但是仅仅知道JS的库已经跟不上时代的需求了。我并不是说你需要知道如何用纯JS实现这些库的功能;而是说你应该知道什么时候应该用库,并在不需要库的时候有能力用原生JS实现功能。
这意味着你必须要反复阅读这本书——《JavaScript:语言精粹》(传说中的蝴蝶书,译者注)。你需要:理解诸如objects和array等的数据结构;理解function,并知道使用 call
函数和 apply
函数的原因;使用原型继承(prototypal inheritance)来编程;管理好异步性等。
如果你觉得你写纯JS弱爆了,这有一些可以帮助你的资源:
- Eloquent Javascript :一本可以将你带到JS基础领域的精彩的书。
- A Test-Driven JS Assessment :涵盖了诸多JS领域的测试题目,你能编写代码通过他们么?
- 10 things I learned from the jQuery Source :一坛来自Paul Irish(谷歌Chrome开发者,jQuery团队核心成员,译者注)的陈年佳酿,教会你如何在阅读别人代码的过程中学习新知识。
Git(以及Github的帐号)
如果你不上Github,你根本无法参与到这个丰富的开源社区,汲取如雨后春笋般迅猛发展的前端开发技术。clone一个repo(Git术语,本操作指把放在git仓库中的代码下载到本地,译者注)并亲自修改尝试这件事儿应该成为你的习性,同时你应该理解如何在合作项目上使用分支(branch)的技术。
要提高你的git技术?下面有几个网站可以共你学习:
- help.github.com
- Github git cheat sheet
- More cheat sheet
- More git links
模块化、依赖管理和创建项目
那些通过在页面上加入 <script>
或者 <style>
标签的方式来进行依赖管理的日子已经一去不复返了(啥?现在都不这样搞了么?译者注)。即使你现在不能把一些优秀的工具(例如 RequireJS )合并到你的工作流中,你也应该抽时间在你的个人项目、或者在 Backbone Boilerplate 来研究一下,因为这些工具的好处是巨大的。特别是 RequireJS 可以让你开发小型的、模块化的 JS 和 CSS 文件,并通过优化工具对其进行连接和压缩以便在实际项目中使用。
对AMD规范持怀疑态度?这不应是你无所作为的借口。至少你应该知道使用 Uglify 或 Closure 的编译器来智能优化你的代码,然后把这些压缩的文件链接到项目中。
如果你在写纯CSS(就是说你不用诸如Sass或者Stylus等CSS编译器),RequireJS也可以使你的CSS文件模块化。在基础文件中使用 @import 语句以加载开发依赖,然后运行RequireJS优化基础文件并创建实际项目中用到文件。
浏览器内置开发者工具
在过去的几年里,基于浏览器的开发者工具的水平已经大大提高,如果你知道如何使用他们,你的开发效率将会提升一个档次。(啥?你还在用alert来调试代码?你这是在浪费绳命啊~)
你应该找到一个适于你自己的开发者工具——比方说我这两天就偏爱谷歌 Chrome 的开发者工 具(也是译者的最爱)——但是也不要就抛弃了别的浏览器,因为大家都在根据开发者的反馈而不断增加有用的功能特性。Opera的Dragonfly工具就 因有一些独到的功能而在开发者工具中脱颖而出,比如一个CSS分析器、可制订的快捷键、无需USB连接的远程调试(这是啥?)、可使用和保存的自定义调色 板。
如果你对于浏览器开发者工具不是十分理解,这个网址:jQuery修复术(不仅仅是jQuery的核心代码)会教你包括单步调试之类的debug方法——这可是一个能改变你人僧的东西啊,如果你还不会,赶紧的去学习吧!
命令行!
说到了命令行,我们就感觉踏入了苦海——不过你要是说为了不弄脏我用惯了GUI的冷艳高贵的手,就放弃丑陋的终端的话,那你可就得不偿失啦。当然, 我也不是让你吃喝拉撒都在终端里解决,不用完全脱离GUI,虽然我觉得没有它你会活得更好。不过呢,你还是应该拥有用终端编辑运行你任意一个项目的能力。 下面有几条命令你应该做到熟练掌握:
- ssh :用于登录到另一台计算机或服务器
- scp :用于将文件复制到另一台计算机或服务器
- ack 或 grep :查找项目或文件中包含的字符串或样式
- find :给定文件名匹配模式查找文件
- git :至少会些基本的命令吧,比方 add 、commit 、status 和 pull
- brew :用Homebrew安装插件
- npm :安装Node插件
- gem :安装Ruby插件
如果有些命令是你常用的呢,你可以编辑你的.bashrc,或者.profile,.zshrc之类的,然后搞一个alias让你不用命令行敲得那 么累(alias是设置命令缩写别名的命令,其实这些原生态命令好像也不是很长很难敲啦……译者注)。你也可以把你的aliases放 到~/.gitconfig文件里。Gianni CHiappetta的这个项目可能对你会有所启发。
如果你在用windows,我感觉除了说句呵呵以外就没啥要说的了。呵呵。嗯,其实你可以用一下Cygwin?不管怎么说,要在windows下参与前端项目的开源开发实在是要困难的多。不过所幸现在MacBook Air也不算贵,它功能强大且携带便捷;而且我们还有Ubuntu和其他还不错的带有GUI的*nix系统。
客户端模板
在不久之前服务器的典型的做法还是通过一小段HTML返回XHRs(XMLHttpRequest,额不是很理解啊。。现在不用XHR了么),但是 差不多在一年到一年半前,前端开发社区找到并着手开发从服务器请求纯数据的替代方案。如果在你的代码里直接将这些数据放入HTML以待将其插入DOM中, 会是一个混乱而难以维护的过程。这就是为什么客户端模板出现的原因:他们让你维护一个模板,然后将数据插入其中,最终生成HTML的字符串。需要一个模板 选择的工具?Garann Means'的模板选择器可能会帮到你。
CSS预处理器
Paul Irish之前曾说,我们开始看到了前端开发的编码与后端开发的明显不同,CSS预处理器就是一个明显的例子。当然还是有不少人宣称除了纯CSS之外其他 的都是异端,不过现在他们也开始逐渐接受预处理器这个东西。这些工具给了CSS一些按理说应该存在的特性,诸如变量、数学运算、逻辑运算、混入技术 (Max-in,译者也不是很清楚,可以参照这篇文章)等,同时其还可以帮助CSS理清混乱的前缀。
测试
模块化编程、编写送耦合的代码的一大好处就是让你的代码变得非常容易测试。现在有了Grunt这样的工具,让一个项目包含测试模块已经变得十分容易。Grunt源自QUnit的集合,不过这儿呢有一大堆测试的框架,供你依据你的喜好以及你对其他方面的要求进行选择——比方Jasmine和Mocha这两个框架就是我最近的最爱。
当你的代码是模块化的和松耦合的你的测试就会变得很轻松;不过如果你要测试的代码一团糟,那测试很有可能会变得十分困难或者根本没法搞定。另一方 面,强制要求你对自己写的代码进行测试,有时候甚至于在你写代码之前就让你写好测试用例和测试程序什么的,也会对你好好构思代码有所帮助。这也会使你在彻 底重构代码时有十足的信心(原文用down the line表示完全地)。
流程自动化(rake、make、grunt等等)
Grunt创建一个内置支持单元测试的项目的能力就是流程自动化的一个例子。前端开发的事实是我们要做一大堆重复的事情。但是我的一个朋友有次和我说,一个牛叉的开发者应该是个懒惰的开发者:从经验上讲,当你发现你重复了同一件事请三次以上,你就应把它自动化了。
诸如make这样的工具很长一段时间内帮助我们搞定自动化的事情,当然还有rake、grunt等等。如果你要用自动化处理文件系统,那么学会除 JavaScript之外的一门语言将对你大有裨益。当你手工处理文件时,Node的异步性对你而言将是一个沉重的负担。当然这儿也有很多针对特定任务的 测试工具,比方开发、编译生成、质量保障等等。
代码质量
如果你曾经被一个缺失的分号或多余的逗号的bug所困扰半天,你就会知道代码中小小的错误将会浪费你多少的时间。这就是为啥你要在JSHint这样的工具里运行代码,对吧~JSHint是可配置的,而且有多种方法可以整合到你的编辑器或编译过程中。
详尽的手册
唉,前端的苦逼之处在于木有手册啊,不过 MDN 还是不错的。一个好的开发者应该知道在搜索的时候加上mdn的前缀,比方你这样写:mdn javascript arrays——以避免找到那些盈利为目的的w3shcools的查询结果(啥。。译者一直用w3啊)。
结语