你的分享就是我们的动力 ---﹥

给前端开发者的忠告 - JavaScript开发的挑战

时间:2014-12-26 16:34来源:www.chengxuyuans.com 点击:

我前几天为一个我所希望其他开发者能看到并且从中学习的计划写了一份说明文件,当我在写的过程中,我意识到里面有些东西在几年前可能会吓到我,就像随便提到的Node,npm,自制程序,git,测试和开发以及产品设立。

以 前,编辑一个文件,本地测试(总之,尽我们所能够做到的),然后把他们传输到服务器上,这是前端开发者的基本工作流程。根据我们对IE6的服从或者达到跨 浏览器完美像素争论,我们衡量到我们的奋斗精神。许多社区的成员--包括我自己--缺乏传统编程经验的。HTML,CSS和脚本语言,经常出现在 JQuery的格式里--都是自学而来的。

有些事情在过去的几年里已经发生了改变。可能是人们开始严格要求前端开发者所导致的结果,也可能是大部分浏览器的供应商该死,还可能他也是前端开发者--包括我自己,前来看一下已经被大家所接受的软件开发过程。

无论是什么,我认为我们现在只是强调从重视细节转换成重视工具。为了顺利成为一名前端开发者,这里有一系列新的基线技能要求,而开发者不会满足那些即将开始又越来越落后的基线作为他们分享他们那些开始假设却又不必说的知识。

这里有一些事情我最初是想期待人们能够熟悉的,如果你觉得自己需要赶上进度,那么就用你所能够用到的资源。(感谢 Paul Irish, Mike Taylor, Angus Croll和Vlad Filippov他们的贡献。)

脚本语言

这里可能就不用说了,可是简单知道一个脚本语言的库不再是足够的。我不是说你需要知道如何在普通的脚本语言里面实施一个库里面的所有特点,可是你应该知道当一个库文件确实需要并有效工作在普通旧版脚本语言后,这是不可行的,和管理所有的差异性。

这就意味着你已经读过了[JavaScript: The Good Parts]--希望不止一次。你懂得数据结构就像对象和数组;方法,包括如何调用和为什么应用他们,使用原型继承;管理所有的异步性。

如果你抱怨JS库是薄弱的,那么这里有一些资源能够帮助你:

Git(和一个Github账户)

如果你不知啊Github上,那么你基本上就不能参加到这个在前端开发技术兴起的丰富开源社区。克隆一个副本并尝试它应该是其次--你的习惯,而你也应该知道在合作项目中如何去使用分支。

需要加快你的git能力么?


模块化,依赖性管理和产品生产

通过在页面上抛出更多的脚本或者样式标签的管理依赖性日子已经一去不复返了。即使在工作时你还不能在工作流程上融入像RequireJS这样的好工具,你也应该在个人计划中找时间去调查他们或者在一个像Backbone Boilerplate这样的计划,因为他们传达的好处是非常巨大的。RequireJS尤其让你开发小型的,模块化的脚本和CSS文件,然后根据产品用法链接并缩小到到它最优化的工具上。

超微半导体表示怀疑?这不是什么都不做的借口。至少,你应该意识到就像UglifyJS或者Closure Compiler这样可以智能化缩小你代码的工具,也会把那些先前那些削减的文件链接到你的产品当中。

如 果你在写普通的CSS文件,如果你不是使用一个像Sass或者Stylus这样的预处理器--RequireJS也可以帮你保留CSS的模块化文件。在基 础文件中采用@import 语句来加载开发依赖,然后在基础文件为产品创造一个生成文件时,运行RequireJS优化器。

浏览器开发工具

经过最近的这几年,基于浏览器的开发工具已经发生了极大的改进了,如果你知道如何去使用它们,他们会显著地提升你的开发经验。(提示:如果你依然适用alert去调试你的代码,那么,你会耗费许多时间。)

你或许应该找一个主要使用开发者工具的浏览器--我偏袒谷歌Chrome的开发者工具一点--可是这不代表忽视了其他浏览器的开发工具。因为他们根据开发者的反馈不断添加有用的新功能。特别是欧鹏浏览器的Dragonfly拥有一些可以让开发工具变得超群的特点,比如一个(实验性的)CSS分析器,定制键盘快捷键,无需USB链接的远程调试和可保存可使用自定义颜色的调色板。

如果你知道浏览器开发工具的功能是有限的,那么(修理这些JQuery)Fixing these jQuery是很很好的调试复习(但不是JQuery的核心),包括怎样去[步进调试]-一这是改变生活的东西如果你学习使用它的话。

命令行

说 到命令行的话,舒服地使用它不再是随意的--如果你没有预先亲自动手结束一个终端窗口,那么你会在途中遗漏很多东西。在这里我不是说你必须在终端里把所有 事情都做了--尽管我认为你最终还是离开它比较好,但我不会让你远离Git的图形用户界面。可是你显然应该有一个打开终端窗口,无论你的项目在哪里运行。 这里有一些命令行让你可以不假思索地使用:

  • 使用SSH登陆到另一台机器或者服务器上
  • 利用scp复制文件到另一台机器或者服务器上
  • 在项目中通过ack或者grep来检索包含字符串或者图形的文件
  • 找到那些名字匹配一个指定方式的文件
  • 至少学会Git的普通用法,比如添加,提交,状态和pull方式
  • 适当使用自制程序来安装软件
  • 使用npm来安装Node程序
  • 使用gem来安装Ruby程序

如果这里的命令你都使用得十分频繁,那么你最好修改你的.brashrc或者.profile或者.zshrc或者其他文件,并且创造一个别名可以让你不必打印那么多次。你也可以添加一个别名到你的~/.gitconfig文件当中。Gianni Chiappetta的dotfiles 是一个非常优秀的想法。

笔记:如果你是在windows上使用,那么我不知道从哪一步开始帮助你,除非使用Cygwin,是对也是错,使用Windows机器并且加入到开源的前端开发者社区实际上是要面对更多困难。好的一方面是,MacBook Airs已经十分便宜和强大,而且还十分便携,同时还拥有Ubuntu或者其他类*nix系统。

用户端模板

这 不会给服务器花费太长时间去从HTML片段传送到XHRs中去,可是有时会持续12-28个月,前端开发论坛知道这一点并且会开始从服务器开始提前取出所 需要的纯数据。如果完成后会带入一些不协调的东西到你的代码中去的话,这将会是一个繁杂和不可维护的工作,当那些数据转换HTML格式,同时插入到DOM 中,这里就是[客户端模板库]入口:(http://www.slideshare.net/garann/using-templates-to- achieve- awesomer-architecture) 。当一些数据混乱了,比如变成HTML的字符串形式,那么他们就会让你去维护这些模板了。如果你需要工具来帮助你获取某个模板,Garann Means’ 的[模板选择器](http://garann.github.com /template-chooser/) 可以指引你到一个正确的方向。

CSS预处理程序

Paul Irish鉴于当前我们开始发现前端开发者在编写代码时会发现产品在结束时不同于的原定方向,而通过CSS预处理器所编写的程序则在这里变成一个闪光点。 虽然还有一些人觉得纯CSS编写是唯一的路径,但是他们也开始尝试这样做了。这些工具即便让你举得有所争论,不过也应该从现在起在词汇,数学,逻辑,和其 他地方适当使用CSS----他们也可以顺畅地使用混乱的CSS前缀属性。

测试

编写模块的其中一个乐事是随意链接的代码在你手上会变得极其容易地测试,使用Grunt这样的工具,设置一个project包含测试已经是在容易不过了,Grunt源于QUnit的集合,根据你的喜好或者有所需要修改的,这里有一些测试框架可供你去选择--Jasmine 和 Mocha是我现在最喜欢的组合。

当你的代码是模块化和随意链接的时候,测试会变得很有乐趣。比如测试代码可能会在难点和不可能的地方显得条理性不强,另一方面,或者在你写代码之前强迫自己进行测试,将会帮助你思考代码的合理性,这也会让你在重构你的代码时变得十分有信心。

  • 我录制了一个视频关于如何使用Jasmine测试你的jQuery
  • 一个关于在jquery-bbg插件的单元测试例子
自动化进程(rake/make/grunt等)

Grunt 是有能力建立一个带有内置支持的工程文件,而单元测试就是一个很好的进程自动化例子,现实中前端开发其实是有许多重复性的工作需要我们来做,但之前有个朋 友告诉我,一个好的开发者是一个懒惰的开发者:作为一条经验法则,如果你发现自己重复做同一件事情三次,这就应该自动化进行他了。

工具就像make已经帮助了我们很长时间,其他还有rake,grunt等诸如此类的也一样。如果你想去进行自动化任务去处理文件系统,那么学习一门语言就不像JavaScript这样有用,这里也有许多特殊任务自动化工具--比如开发工具,代建,保证代码质量等等。

代码质量

如果你曾经试过忘记分号或者添加额外的逗号,那么,你就知道将要在你的代码中花费多长时间去发现这个微妙的错误。这就是为什么你在运行代码的时候需要通过一个像JSHint的工具,是吧?它是可配置的,而且有许多方法可以整合到你的代码到你的编辑器或者创建到进程当中。

说明书

哎!除了MDN比较接近以外,好像没有其他前端开发者说明书了。好的前端开发者知道在任何搜索引擎上通过mdn查询前缀,比如mdn javasrcipt 数组--为了防止像w3schools这样的非盈利插件。

最后

不管怎样,阅读这些东西不会让你变成一个专家或者厉害的技术--唯一可以确定使你变得更好的方法就是努力去学这些东西吧!

Good luck

转载注明地址:http://www.chengxuyuans.com/web_technology/86296.html