转：前端开发者的基本要求

时间 2019-11-13

原文原文链接

原文连接：http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/javascript

前几天我为一个项目写README文档，我但愿其余开发者可以看到这个项目，并从中学到一些东西。忽然我意识到，若放在几年前，我写做的过程当中随口提到的Node，npm，Homebrew，git，测试还有产品构建，会把我魂都吓没了。css

曾经有段时间，一个前端开工程师基本的工做流程是：编辑文件，本地测试下（尽咱们可能作到最好），而后经过FTP上传到服务器。咱们评价一个前端工程师的水平，是经过他是否可以兼容IE6，或者取得跨浏览器的像素级的一致。不少社区的成员——包括我在内——缺乏传统的编程经验。HTML、CSS和JavaScript——一般指jQuery——是自学的技能。html

这些事情在过去的几年里发生了变化。多是由于你们开始认真的看待前端开发者的工做，或者是由于浏览器开发商开始臭味相投（趋向一致？原句getting their shit together），又或者是前端开发者本身——一样，包括我在内——开始看到软件开发变得完善的曙光。前端

无论怎么说，咱们看到前端开发的重点，从繁琐转向了重视工具化。想要成为一名成功的前端开发者，你须要掌握一套新的基础技能，而不知足要求的前端开发者会感受到落后愈来愈多，而那些正在分享他们知识的工程师们以为这些事情是天然而然的。java

下面提到的一些内容是我但愿人们可以熟悉的，除此以外还有一些相关的资源，若是你以为你须要在成长的道路上加速的话。（感谢Paul Irish，Mike Taylor，Angus Croll，以及Vlad Fillppov的贡献）jquery

JavaScript

这个不用多说，但仅仅知道一个javascript库不再够了。我并非说你须要知道如何用原生的JavaScript实现一个JavaScript库的全部特性，但你须要知道，何时的确须要用库，同时，在不须要用库的时候，有能力用简单而古老的JavaScript完成你的工做。git

这意味着，你已经读过《JavaScript语言精粹》—— 但愿不止一次。你理解像对象、数组这样的数据结构；函数，包括如何、为何你须要～call和apply他们；掌握原型继承；掌握javascript的异步操做。github

若是你的原生JS比较弱，这里有一些资源能够帮到你：chrome

《JavaScript编程精解》：一本能够带你回归JavaScript基础的书，挺不错的（有纸质版的）
《测试驱动的JS评价》：一系列失败测试，它们覆盖了不一样的JavaScript主题；你可以编写让测试经过的代码吗？
《我从jQuery源码中学到的10点》：Paul Irish给咱们带来的礼物，虽然比较旧，但的确不错，它让咱们知道从阅读他人的代码中所能学到的东西。

Git（还有一个Github帐户）

若是你没访问过Github，你绝对没法参与到这个资源丰富的开源社区中来，它已经在前端开发技术领域呈现欣欣向荣之势。克隆一个分支而后跑一下应该成为你的习惯，同时你须要知道在多人协做的项目中如何使用分支。npm

须要提高你的git技能？

模块化，依赖管理，产品构建

经过在页面塞几个script或style标签来管理依赖的日子已经一去不复返了。即便你还没能可以将RequireJS引入你的工做流程中去，也应该找时间在本身的我的项目，或像Backbone Boilerplate这样的项目里试下它，由于它能给咱们带来许多好处。RequireJS可以让你开发的JS、CSS文件保持模块化、粒度足够细，而在产品上线前能够经过配套的优化工具进行文件压缩、合并。

AMD听起来很吓人？再也没有借口什么也不干了。至少，你应该知道存在像UglifyJS、Closure Compiler这样的工具，它们可以在你的产品上线前，对你的代码进行智能压缩和合并。

若是你还在写原生的CSS —— 也就是说，目前没有用像Sass或者Stylus这样的CSS预处理器 —— RereireJS也可以帮你保持你的CSS文件模块化。在一个基础样式文件里使用@import声明来加载相关依赖文件，而后对这个基础文件运行ReqireJS Optimizer来构建实际生产环境所要用到的文件。

浏览器内置开发者工具

在过去的几年里，基于浏览器的开发工具已经大大获得了提高，若是你知道怎么利用好它们的话，它们可以大大提升你的开发体验。（提示：若是你还在使用alert调试代码的话，你会浪费不少时间）

你或许须要肯定一款浏览器，你主要使用它的开发者工具 —— 近来我比较倾向于使用Google Chrome开发者工具 —— 但不要当即抛弃其余浏览器的开发者工具，由于他们常常会根据开发者的反馈来添加有用的特性。特别值得一提的是，Opera的Dragonfly的某些功能让它的开发者工具不同凡响，好比（尚在实验中的）CSS分析器，可用户自定义的键盘快捷键，无需USB链接的远程调试，以及可以保存并使用自定义的调色板。

命令行

说到命令行，适应它(being comfortable with it)不再是可选项了——若是你没有准备好坐到终端窗口前，并亲自动手敲命令行的话，你一路上会错过很是多的东西。我并非说你必须在终端上完成全部事情——我不会抢走你的git GUI（图形化用户操做界面），虽然个人确以为最终你离开它会更好——但无论作什么项目，你最好一直开着你的命令行终端。下面几个命令行任务是你必须不假思索就必须可以完成的：

ssh 登陆另外一台机器或服务器
scp 拷贝文件到另外一台机器或服务器
ack或者grep 找到文件名包含某个字符串或符合某种模式的文件
find 定位文件名符合某种模式的文件
git 至少可以用它完成以下事情：add，commit，status和pull
brew 经过Homebrew 来安装文件
npm 安装Node包
gem 安装Ruby包

若是有些命令你用得比较多，你能够编辑.bashrc或者.profile或者.zshrc或者其余，而后建立alias，这样你就不用像以前那样敲不少字符。你也能够添加alias到你的~/.gitconfig文件里。Gianni Chiappetta的dofiles是个不错的范例。

注意：若是你在Windows上开发，我不知道如何帮助你，除了建议使用Cygwin。在Windows上参与前端开源社区的活动比较麻烦，固然我说的不必定正确。相反的，MacBook Air便宜、强大，并且难以想象地便携，并且老是会有Ubuntu或者各类*nix。

前端模板

在不久以前，对于前端的XHR请求，服务器典型的应答方式是返回一段HTML文本。但在过去的12到18个月间，前端开发社区看到了曙光，要求服务端返回单纯的数据。将数据转成HTML是件麻烦的事情，若是处理得很差的话，可维护性会至关糟糕。这就是前端模版库诞生的目的：你仅须要维护一套模板，在须要的时候提供数据，就可以将模板转换成HTML。在模板库的选择上须要帮助？Garann Mean的template chooser可以给你指明方向。

CSS预处理器

Paul Irish前些天注意到，前端开发者编写的代码，跟最终在生产环境部署的差异开始变得很大。经过CSS预处理器写出来的代码就是很好的例子。仍然有很多人坚持说原生的CSS才是惟一的出路，但它们离咱们愈来愈近(but they are starting to come around)。这些工具提供了一些CSS属性按理来讲早就该有的特性，包括——变量、数学运算、逻辑、混合(mixin)，它们可以帮你从一堆冗余的特性前缀中解放出来。

测试

编写模块化、松耦合代码的乐趣之一就是，你的代码变得很容测试。若是你用了Grunt这样的工具，建立一个包含测试用例的项目再简单不过了。虽然Grunt集成了QUnit，可是还有许多测框架供你选择——Jasmine和Mocha是我喜欢的两个测试框架——框架的选择取决于你的我的偏好，以及你项目的结构(the mark up of the rest of your stack)。

若是你的代码是模块化、松耦合的，测试是件有趣的事情。然而，对于那些组织糟糕的代码，测试不单困难，有时甚至不可能的。换句话说，强迫本身编写测试用例——甚至可能在你正式编码以前——有助于帮你理清你的思路以及你的代码组织。后续当你重构你的代码的时候，它也能让你充满自信。

我录制的一段很短的视频，关于如何使用Jasmine测试jQuery
一个jquery-bbq插件单元测试的例子

流程自动化(rake/make/grunt/其余)

流程自动化的一个例子：经过Grunt建立内置单元测试的项目。前端开发的现状是，咱们有一大堆重复性的工做须要作，但有个朋友曾经告诉我，一个好的开发者是个“懒惰”的开发者：首要的一点是，若是你发现本身作同一件一样的事件超过三次，那么是时候将它变成自动化的。

像make这样的工具已经存在很长一段时间，主要用来帮咱们解决上述问题，但也有相似rake、grunt以及其余相似的工具。若是你想把跟须要跟文件系统打交道的任务变成自动化，学习一门JavaScript之外的语言很是有帮助，由于当你仅仅想要处理文件时，Node的异步特性会让事情变得更加麻烦。也有许多针对特定任务的自动化工具——部署，构建，代码质量保证，还有其余。

代码质量

若是你曾经被缺失分号，或多一个逗号这样的问题困扰过，你就知道这样小的代码缺陷能够浪费你多少时间。这就是为何你正在相似JSHint这样的工具里运行你的代码，没错吧？它不只可配置，并且有不少方式能够将它集成到你的编辑器或构建流程中去。

好的参考手册

唉，没有针对前端开发的手册，但MDN触手可及。好的前端开发者会在任何搜索查询里加上mdn前缀，好比mdn javascript arrays，避免搜到像w3schools那样的盈利性组织的内容。

结尾

阅读上面这些东西没办法让你成为一个专家，哪怕是变得更有经验些——在某件事情上作得更好的惟一途径就是作那件事。祝你好运。

转自：https://github.com/chyingp/blog/issues/1