作者：克里斯·阿基诺
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Web开发权威指南试读：
前言
学习前端Web开发进行前端Web开发可能需要转换一下观念，因为它跟其他平台上的开发有很大不同。在学习过程中，你需要时刻牢记以下几点。
浏览器是一个平台
你也许在iOS或者Android上进行过原生开发，或者用Ruby、PHP写过服务器端代码，抑或在OS X或者Windows上构建过桌面应用。但作为前端开发者，你的代码则需要面向浏览器——一个几乎存在于全世界所有手机、平板电脑和个人计算机中的平台。
前端开发横跨一个范围
这个范围的一端是网页的外观和风格（圆角、阴影、颜色、字体、空白等），另一端则是控制网页复杂行为的逻辑（浏览交互式相册时滑动图片、校验表单数据、通过聊天网络发送消息等）。你需要通晓这个范围内的每种核心技术，还经常需要搭配使用多种技术来实现优秀的Web应用。
Web技术是开放的
没有哪家公司能够控制浏览器的工作方式。也就是说，前端开发者并不会每年得到一个SDK版本，而且这个版本里还包含了未来一年中可能要处理的所有改变。原生平台就像结了冰的池塘，任你舒适地滑过；而Web就像河流，蜿蜒曲折，水流湍急，某些地方还会有礁石——不过这正是它的魅力所在。Web是进化最快的平台，适应变化才是前端开发者的生存之道。
本书的目标是教会你如何在浏览器上进行开发。在本书的指导下，你将会经历一系列项目的开发，而每个项目都需要搭配使用前端范围内的不同技术。因为前端可用的工具、库以及框架不计其数，所以本书主要使用最重要也最便于移植的模式和技术。目标读者
这并不是一本介绍编程的书。本书假定你已经具备编写代码的基础知识，并熟悉基本的类型、函数和对象。
话虽如此，但本书不要求你了解JavaScript。根据需要，本书会在具体语境中介绍JavaScript的相关概念。本书的组织结构
本书会指导你实现四个不同的Web应用。每个应用对应书中的一个部分，每个部分的每一章会向当前正在构建的应用添加新功能。
构建这4个应用的过程横跨整个前端范围。第一个项目是一个基于Web的图片浏览应用。通过构建Ottergram，能教会你通过使用HTML、OttergramCSS以及JavaScript进行浏览器编程的基础知识。你将手动构建用户界面（User Interface，UI），并且掌握浏览器加载和渲染内容的方式CoffeeRun的一部分是咖啡订购表单，另一部分是清单。构建本应用涉及一系列JavaScript技术，CoffeeRun包括编写模块代码、使用闭包，以及使用Ajax与远程服务器通信。你的关注点会从之前的手动创建UI转移到通过编程创建和操作UIChattrbox的内容最少，但也最特别。你将用ChattrboxJavaScript创建一个聊天系统，用Node.js编写一个聊天服务器和一个基于浏览器的聊天客户端最后一个项目将使用Ember.js，它是前端开发最强大的框架之一。你将会创建一个应用，用来收Tracker录人们见过的奇异、神秘的珍稀生物。在开发过程中，你会学习支撑Ember.js框架的丰富的生态系统
在开发这些应用的过程中，你将会学习使用很多工具，包括：● Atom文本编辑器和一些方便代码编写的插件● 文档资源，比如Mozilla Developer Network（MDN）● 命令行，使用OS X终端应用或者Windows命令行● browser-sync● Google Chrome开发者工具● normalize.css● Bootstrap● jQuery以及库函数，比如crypto-js和moment● Node.js、Node包管理工具（Node package manager，npm）
以及nodemon● WebSockets和wscat模块● Babel、Babelify、Browserify以及Watchify● Ember.js和插件，比如Ember CLI、Ember Inspector、
Ember CLI Mirage以及Handlebars● Bower● Homebrew● Watchman如何使用本书
不同于参考手册，本书的目标是带你入门，让你学到参考手册上所教的大部分知识。本书基于Big Nerd Ranch的5天课程，因此会从入门知识开始。每一章都基于前面的知识，所以跳跃式阅读可能会影响学习效果。
在我们的课堂上，学生会学习本书的内容，但是他们还能享受一个良好的环境——浓厚的学习氛围、好吃的食物、相互鼓励的同学，还有答疑解惑的辅导老师。
作为读者，你也会希望有相似的环境。所以，睡个好觉，找一个安静的地方开始学习吧。做下面这些事情也会有所帮助。● 与朋友或同事组成一个阅读小组。● 安排一段时间集中学习一些章节。● 参与本书论坛forums.bignerdranch.com上的讨论，在那儿你
能探讨书中内容，发现勘误并找到解决方案。● 找个了解前端开发的人帮你。挑战
几乎每一章的结尾部分都会有至少一个挑战。这些挑战能帮你复习所学知识，并将这一章中做的项目再推进一步。建议你尽量完成这些挑战，这样可以巩固所学的知识，并且从学习JavaScript开发变为自己从事JavaScript开发。
这些挑战的难度分为3个级别。● 初级挑战一般要求你做一些与该章内容相似的事情。这些挑
战旨在强化所学内容，迫使你在不看代码的情况下写出相似的代
码。熟能生巧就是这个道理。● 中级挑战要求你挖掘更深，思考更多。有时候需要使用你从
未见过的函数、事件、标记以及样式，但是任务还是与该章的任
务类似。● 高级挑战很难，可能需要花好几个小时才能完成。它们要求
你理解该章介绍的概念，做一些质量层面的思考，并自己解决问
题。解决这些问题可以为你在现实世界中进行JavaScript开发做
好准备。
进行每一章的挑战之前都复制一份代码，否则你做的改动可能无法兼容后续的练习。
如果你感到困惑，记得访问forums.bignerdranch.com寻求帮助。延展阅读
每章结尾的“延展阅读”对该章话题做了更深入的解释，或者提供了附加信息。这部分信息并不一定重要，但是希望你觉得它们有趣或者有用。致谢
作为作者，我们完全可以把本书中的文字和图表都归功于我们自己。（棒呀，我们！）但实际上，如果没有投稿人、协作者和导师们的共同努力，我们可能到现在都无从下笔。● Aaron Hillegass相信我俩能写出配得上Big Nerd Ranch之名
的作品。你给予了我们极大的信心和支持，谢谢！● Matt Mathias在本书的创作过程中给予了我们指导，对最后
关键部分的建议尤为重要。你督促我们把时间花在写作上，而不
是花在看猫咪视频或者《唐顿庄园》的重播上。● Brandy Porter一直照料我俩并给我们烹饪美食。你在幕后做
了各种工作，为本书的顺利出版打点好了一系列事情。谢谢你。● Jonathan Martin是我们的导师和语言专家。谢谢你充满热情
地教我们尚未完结的课程内容，本书就是基于这些内容写成的。
在多次审校中，你还提供了很有深度的意见和建议。● 我们的校对员、技术审稿人以及实验对象：Mike Zornek、
Jeremy Sherman、Josh Justice、Jason Reece、Garry Smith、
Andrew Jones、Stephen Christopher以及Bill Phillips。谢谢你们
的志愿工作。● Elizabeth Holaday是一位极具耐心且令人安心的编辑。谢谢
你打破我们狭隘的思维，提出有理有据的观点，并提醒我们始终
要考虑到读者。● Ellie Volckhausen，谢谢你设计了封面。● Simone Payment是我们的校对员，谢谢你让本书内容连贯
一致。● 来自IntelligentEnglish.com的Chris Loper设计并制作了本书
的印刷版和电子版。另外，他的DocBook工具链非常好用。
最后，感谢无数接受了长达一周的培训的学生们。如果没有你们的好奇心和提问，培训就毫无意义。这本书正是得益于你们在这么多周的培训中的见解和灵感。我们希望那些水獭让培训轻松了一些。第一部分浏览器编程基础第1章配置开发环境
前端开发领域有着数不清的工具和资源，而且还有更多工具在被源源不断地制造出来。无论开发者的水平如何，选择最佳工具都极具挑战性。本书的项目将会带你使用一些本书作者非常喜爱的工具。
首先你需要三个基本工具：浏览器、文本编辑器，以及好用的前端开发技术参考文档。此外还有一些能够提升开发体验的附加选项，当然它们并非必需品。
为达到最佳效果，建议你和本书作者使用相同的软件。本章会引导你安装并配置Google Chrome浏览器、Atom文本编辑器、Node.js以及一些插件。另外还会介绍一些优秀文档，并针对Mac和Windows命令行进行一次突击学习。在下一章开始第一个项目时，这些资源将会派上用场。1.1 安装Google Chrome
默认情况下，你的电脑应该已安装过浏览器，但前端开发中最好用的浏览器还是Google Chrome。若尚未安装最新版Chrome，可以通过www.google.com/chrome/browser/desktop获取（如图1-1所示）。图1-1 下载Google Chrome1.2 安装并配置Atom
在众多文本编辑器中，GitHub出品的Atom是前端开发的最佳选择之一。它可以进行大量配置，也有很多辅助编码的插件。另外，它可以免费下载使用。
可以通过atom.io下载Mac版或Windows版的Atom（如图1-2所示）。图1-2 下载Atom
遵循安装指引即可。安装成功后，还需要安装一些可能用到的插件。Atom插件
对于一款文本编辑器来说，最需要的无非是文档查询、自动补全、代码格式化以及代码提示（接下来会细说）功能。Atom默认提供了一部分功能，但安装一些插件后效果会更好。
打开Atom的Settings面板。在Mac上，选择Atom → Preferences...，或者使用Command + ,（Command加逗号）快捷键。在Windows上，点击File → Settings或者按Control + ,快捷键。
左侧就是Settings面板，点击+ Install（如图1-3所示）。图1-3 Atom Install Packages面板
可以根据名称搜索插件，先搜索“emmet”试试看。
书写大量HTML是很枯燥的，而且容易出错。通过emmet插件（如图1-4所示），可以用一些速记符生成符合语法规则的HTML。点击Install按钮开始安装emmet。图1-4 安装emmet
然后再搜索“atom-beautify”。该插件（如图1-5所示）可辅助缩进，提高代码可读性。同样还是点击Install进行安装。图1-5 安装atom-beautify
接着搜索并安装autocomplete-paths（如图1-6所示）。在代码中，经常需要引用其他文件或目录。该插件能够在输入文件名时提供自动补全功能。图1-6 安装autocomplete-paths
接下来安装api-docs（如图1-7所示），这样就可以通过键盘查阅文档。文档会在编辑器单独的一个标签面板中显示。图1-7 安装api-docs
下面安装linter（如图1-8所示）。linter是一个用来检查代码语法和风格的程序。请确认你安装的插件就叫作linter。这是一个基础linter，与特定语言插件搭配使用效果更佳；有了它，才能使用后续其他linter插件。图1-8 安装linter
要使用linter检查CSS、HTML和JavaScript代码，还需安装另外三个插件。首先安装linter-csslint（如图1-9所示），该插件在保证CSS代码语法正确的同时，还能提供编写高性能CSS的建议。图1-9 安装linter-csslint
然后是linter-htmlhint（如图1-10所示），它确保HTML代码保持良好的格式。当HTML标签匹配错误时，编辑器会显示警告信息。图1-10 安装linter-htmlhint
最后一个linter插件是linter-eslint（如图1-11所示）。它能检查JavaScript代码的语法，还能通过配置检查代码的风格和格式（如每行缩进几个空格，注释前后空几行等）。图1-11 安装linter-eslint
现在Chrome和Atom都安装好了，但还需要做一些完善编码环境的工作：访问参考文档、学习命令行基础知识、安装最后两个工具。1.3 文档和参考资料
前端开发与针对iOS和Android等平台的开发有所不同。抛开显而易见的差异不说，除了技术规范之外，前端技术是没有官方开发者文档的——这意味着需要另寻他处，找到编码指南。建议你熟悉下列资源，并在阅读本书和继续前端开发的过程中养成经常查阅文档的习惯。
Mozilla开发者网络（MDN）是HTML、CSS和JavaScript最好的参考文档，可以通过devdocs.io访问。这是一个优秀的文档界面（如图1-12所示），它从MDN上拉取前端核心技术文档，而且还能在离线状态下查阅。图1-12 通过devdocs.io访问文档
注意，Safari目前尚不支持devdocs.io所用到的离线缓存机制；如需访问，可使用Chrome这样的浏览器。
还可以访问MDN的官方网站developer.mozilla.org/en-US（如图1-13所示），或在搜索引擎中搜索“MDN”以获取所需信息。图1-13 MDN官网
另一个需要知道的网站是stackoverflow.com（如图1-14所示）。严格说来，它并非文档源，而是一个开发者讨论社区。问题答案的质量视情况而定，但通常非常全面，很有帮助。这是很有用的资源，但需要记住，因其众包特性，答案并不具有权威性。图1-14 Stack Overflow网站
Web技术在不断演进。随着时间推移，不同浏览器对特性和API的支持会有所不同。有两个网站可以帮你判断某个特性被哪些浏览器（以及该浏览器的哪些版本）所支持，它们是html5please.com和caniuse.com。需要查询特性支持程度时，建议使用html5please.com查询该特性是否被推荐使用；需要了解浏览器的哪些版本支持某一特性时，则可以访问caniuse.com。1.4 命令行速成
命令行（或称为终端）的使用贯穿全书，其中用到的许多工具都只会在命令行中运行。
要在Mac上访问命令行，需要打开Finder，依次进入Applications、Utilities文件夹，找到并打开名为Terminal的程序（如图1-15所示）。图1-15 在Mac上找到Terminal程序
然后会看到如图1-16所示的窗口。图1-16 Mac命令行
要在Windows上访问命令行，请打开“开始”菜单，搜索“cmd”，找到并打开名为Command Prompt的程序（如图1-17所示）。图1-17 在Windows上找到Command Prompt程序
点击即可运行Windows下的标准命令行界面，如图1-18所示。图1-18 Windows命令行
从现在起，将用“终端”或“命令行”统一指代Mac的Terminal和Windows的Command Prompt。若不熟悉命令行的使用，下面会介绍一些常见任务的命令。在窗口中输入命令后，按下回车键执行命令——所有命令都是如此。1.4.1 查看当前工作目录
命令行是以当前位置为基础的，这意味着在任意给定时间点上，它总会“位于”文件结构的特定目录中，所有输入的命令都在该目录中执行。命令行窗口显示了当前目录的缩写。要在Mac上查看完整路径，请输入pwd（即print working directory，打印工作目录）命令，如图1-19所示。图1-19 在Mac上使用pwd展示当前路径
在Windows上使用echo %cd%命令查看当前路径，如图1-20所示。图1-20 在Windows上使用echo %cd%展示当前路径1.4.2 新建目录
前端项目的目录结构非常重要。项目的增长可能很快，所以最好从一开始就保持良好的结构。在开发过程中会经常创建新目录，通过mkdir（即make directory，创建目录）命令加上新目录名称即可新建目录。
下面就为本书将要创建的所有项目新建一个目录。输入以下命令：mkdir front-end-dev-book
紧接着，为第一个项目Ottergram新建一个目录，该项目会在下一章介绍。要创建的目录是刚新建的front-end-dev-book的子目录。因此，在主目录中的新目录名前面加上父级目录名以及一个斜杠（在Mac上）：mkdir front-end-dev-book/ottergram
在Windows上，请使用反斜杠：mkdir front-end-dev-book\ottergram1.4.3 切换目录
要在文件结构中切换目录，请使用cd（即change directory，切换目录）命令，其后加上要进入的目录路径。
使用cd命令时，不用每次都输入完整目录路径。例如，要进入当前目录的某个子目录时，只需该子目录名称即可。当处于front-end-dev-book目录时，ottergram目录的路径就是ottergram。
进入新项目目录：cd front-end-dev-book
现在进入ottergram目录：cd ottergram
要进入父级目录，使用命令cd ..（即cd后面加上一个空格和两个句点）。两个句点代表父级目录的路径。cd ..
记住，可以通过pwd（在Windows上是echo %cd%）命令查看当前目录。图1-21展示了作者新建目录、切换目录和查看当前目录的操作。图1-21 切换、查看目录
每次切换目录不限于向下或向上一层。假设有一个结构更复杂的目录，如图1-22所示。图1-22 文件结构示例
假设你现在在ottergram目录中，想要切换到coffeerun目录下的stylesheets。这可以通过在cd后面加上一个路径实现，该路径表示“当前所在目录的父级目录下的coffeerun目录中的stylesheets目录”：cd ../coffeerun/stylesheets
在Windows上，命令是相同的，但要用反斜杠：cd ..\coffeerun\stylesheets1.4.4 列出目录中的文件
有时可能需要查看当前目录下有哪些文件，这在Mac上可以使用ls命令实现（如图1-23所示）。若想查看另一个目录下的文件列表，可以在命令后面加上相应路径：lsls ottergram图1-23 使用ls列出目录中的文件
若目录为空，ls默认不会打印任何内容。
在Windows上，对应的命令是dir（如图1-24所示），也可以加上可选路径：dirdir ottergram图1-24 使用dir列出目录中的文件
dir命令会默认打印出日期、时间、文件大小等信息。1.4.5 获取管理员权限
在某些版本的OS X和Windows上，可能需要超级用户或管理员权限才能执行一些命令（如安装软件、修改受保护文件等）。
在Mac上，可以在命令前加上sudo获取权限。首次使用sudo时，会有如图1-25所示的警告出现。图1-25 sudo警告
sudo以超级用户身份执行命令之前会向你询问密码。输入密码时不会显示输入的内容，因此要小心，别输错。
在Windows上获取权限是在打开命令行界面的过程中完成的。在Windows的开始菜单中找到命令行选项，鼠标右键点击，选择Run as Administrator（如图1-26所示）。该命令行窗口中的所有命令都是以超级用户的身份运行的，因此同样要当心。图1-26 以管理员身份打开命令行窗口1.4.6 退出程序
在学习本书的过程中，你会通过命令行运行很多应用。有些应用在完成任务后会自动退出，但也有些应用在手动终止之前会保持运行。要退出命令行程序，使用Control + C快捷键。1.5 安装Node.js和browser-sync
这是开始第一个项目之前的最后一个安装步骤了。
Node.js（简称Node）允许通过命令行运行用JavaScript编写的程序。大多数前端开发工具都要使用Node.js。第15章会介绍更多关于Node.js的内容，但眼下要用到一个依赖Node.js的工具——browser-sync。
若要安装Node，需要从nodejs.org（如图1-27所示）下载安装包。本书使用的是Node.js 5.11.1版本，你看到的版本可能有所不同。图1-27 下载Node.js
双击安装包，根据提示操作。
Node自带两个命令行程序：node和npm。node的工作是运行JavaScript程序，在第15章之前还用不到它；而另一个程序npm则会在在线安装开源开发工具时用到。
browser-sync对本书的价值不可估量。有了它，示例代码在浏览器中的运行将更加方便；修改并保存代码时，浏览器也会自动重新加载。
在命令行中通过下面的命令安装browser-sync：npm install -g browser-sync（命令行中的-g表示global，即全局。以全局方式安装此工具，意味着可以在任意文件夹中执行browser-sync命令。）
运行此命令时所处的目录不影响结果，但可能需要超级用户权限。若如此，在Mac的命令前加上sudo：sudo npm install -g browser-sync
若在Windows上，则先以管理员身份打开命令行窗口（前文已提过）。
从下一章启动browser-sync后它便会一直运行，使用Control + C才能退出。完成一个项目之后，最好退出browser-sync。在本书的前两个项目（Ottergram和CoffeeRun）中，开始工作之前需要启动browser-sync。
通过前面的介绍和操作，Ottergram项目所需的工具已经准备好啦！1.6 延展阅读：Atom的替代工具
可供选择的文本编辑器太多太多。如果对Atom不那么感兴趣，在跟着本书完成所有项目之后，可以试试下面两个文本编辑器。它们在Mac和Windows平台上都可以免费获取，而且都拥有大量插件，可以个性化开发环境。此外，它们和Atom一样，都是由HTML、CSS和JavaScript构建，但以桌面应用的形式运行。
Visual Studio Code是微软为Web应用开发量身定做的开源文本编辑器，可通过code. visualstudio.com下载（如图1-28所示）。图1-28 Visual Studio Code官网
Adobe的Brackets文本编辑器专长于用HTML、CSS搭建UI。它还提供了一个扩展程序，帮助用户使用Adobe PSD文件。可以通过brackets.io下载Brackets（如图1-29所示）。图1-29 Adobe Brackets官网
试读结束[说明：试读内容隐藏了图片]