前言

前言

学习前端Web开发

新葡京娱乐场:《卫报》称,英国步入未知境地。

进行前端Web开发可能需要转换一下观念,因为它跟其他平台上的开发有很大不同。在学习过程中,你需要时刻牢记以下几点。

浏览器是一个平台

你也许在iOS或者Android上进行过原生开发,或者用Ruby、PHP写过服务器端代码,抑或在OS X或者Windows上构建过桌面应用。但作为前端开发者,你的代码则需要面向浏览器——一个几乎存在于全世界所有手机、平板电脑和个人计算机中的平台。

前端开发横跨一个范围

这个范围的一端是网页的外观和风格(圆角、阴影、颜色、字体、空白等),另一端则是控制网页复杂行为的逻辑(浏览交互式相册时滑动图片、校验表单数据、通过聊天网络发送消息等)。你需要通晓这个范围内的每种核心技术,还经常需要搭配使用多种技术来实现优秀的Web应用。

Web技术是开放的

没有哪家公司能够控制浏览器的工作方式。也就是说,前端开发者并不会每年得到一个SDK版本,而且这个版本里还包含了未来一年中可能要处理的所有改变。原生平台就像结了冰的池塘,任你舒适地滑过;而Web就像河流,蜿蜒曲折,水流湍急,某些地方还会有礁石——不过这正是它的魅力所在。Web是进化最快的平台,适应变化才是前端开发者的生存之道。

本书的目标是教会你如何在浏览器上进行开发。在本书的指导下,你将会经历一系列项目的开发,而每个项目都需要搭配使用前端范围内的不同技术。因为前端可用的工具、库以及框架不计其数,所以本书主要使用最重要也最便于移植的模式和技术。

目标读者

这并不是一本介绍编程的书。本书假定你已经具备编写代码的基础知识,并熟悉基本的类型、函数和对象。

话虽如此,但本书不要求你了解JavaScript。根据需要,本书会在具体语境中介绍JavaScript的相关概念。

本书的组织结构

本书会指导你实现四个不同的Web应用。每个应用对应书中的一个部分,每个部分的每一章会向当前正在构建的应用添加新功能。

构建这4个应用的过程横跨整个前端范围。

Ottergram第一个项目是一个基于Web的图片浏览应用。通过构建Ottergram,能教会你通过使用HTML、CSS以及JavaScript进行浏览器编程的基础知识。你将手动构建用户界面(User Interface,UI),并且掌握浏览器加载和渲染内容的方式
CoffeeRunCoffeeRun的一部分是咖啡订购表单,另一部分是清单。构建本应用涉及一系列JavaScript技术,包括编写模块代码、使用闭包,以及使用Ajax与远程服务器通信。你的关注点会从之前的手动创建UI转移到通过编程创建和操作UI
ChattrboxChattrbox的内容最少,但也最特别。你将用JavaScript创建一个聊天系统,用Node.js编写一个聊天服务器和一个基于浏览器的聊天客户端
Tracker最后一个项目将使用Ember.js,它是前端开发最强大的框架之一。你将会创建一个应用,用来收录人们见过的奇异、神秘的珍稀生物。在开发过程中,你会学习支撑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寻求帮助。

延展阅读

每章结尾的“延展阅读”对该章话题做了更深入的解释,或者提供了附加信息。这部分信息并不一定重要,但是希望你觉得它们有趣或者有用。

电子书

如需购买本书的电子版,请扫描如下二维码。

{%}

目录

  • 版权声明
  • 献词
  • 前言
  • 致谢
  • 第一部分 浏览器编程基础
  • 第 1 章 配置开发环境
  • 第 2 章 开始第一个项目
  • 第 3 章 样式
  • 第 4 章 flexbox响应式布局
  • 第 5 章 使用媒体查询完成自适应布局
  • 第 6 章 JavaScript事件处理
  • 第 7 章 使用CSS营造视觉效果
  • 第二部分 模块、对象及表单
  • 第 8 章 模块、对象和方法
  • 第 9 章 Bootstrap简介
  • 第 10 章 使用JavaScript处理表单
  • 第 11 章 从数据到DOM
  • 第 12 章 表单校验
  • 第 13 章 Ajax
  • 第 14 章 Deferred和Promise
  • 第三部分 实时数据传输
  • 第 15 章 Node.js入门
  • 第 16 章 使用WebSocket进行实时通信
  • 第 17 章 借助Babel使用ES6
  • 第 18 章 继续ES6探索之旅
  • 第四部分 应用架构
  • 第 19 章 初识MVC和Ember
  • 第 20 章 路由选择、路由表、模型
  • 第 21 章 模型和数据绑定
  • 第 22 章 数据——适配器、序列化器和变换器
  • 第 23 章 视图与模板
  • 第 24 章 控制器
  • 第 25 章 组件
  • 第 26 章 后记
合作: 赌博网 新葡京注册 新葡京娱乐场