全栈工程师培训材料，帮助学习者掌握 JavaScript 全栈开发的基本知识，承担简单 Web 应用的前后端开发。¶

统计信息：字数 17946 阅读36分钟

目录¶

第一讲：前端开发的历史和趋势

前端开发的历史演变
前端 MVC 框架的兴起
前后端分离
全栈工程师
前端开发的未来

第二讲：React 技术栈

React 的基本用法
React 应用的架构

第三讲：Node 应用开发

Node 的基本用法
Restful API
Express 框架搭建 Web 应用

第四讲：前端工程简介

持续集成
静态代码检查
单元测试
功能测试
持续集成服务 Travis CI

前端开发的历史和趋势¶

后端 MVC 的开发模式¶

早期网站开发，采用的是后端 MVC 模式。

Model（模型层）：提供/保存数据
Controller（控制层）：数据处理，实现业务逻辑
View（视图层）：展示数据，提供用户界面

后端代码读取模板，替换变量，渲染出页面。

前端只是后端 MVC 的 V。那时的前端工程师，实际上是模板工程师，负责编写页面模板。

Ajax¶

Ajax 技术诞生，改变了一切。

前端不再是后端的模板，可以独立得到各种数据。

Web 2.0¶

Ajax 技术促成了 Web 2.0 的诞生。Web 1.0：静态网页，纯内容展示。Web 2.0：动态网页，富交互，前端数据处理。从那时起，前端变得复杂了，对前端工程师的要求越来越高。

前端 MVC 框架¶

前端通过 Ajax 得到数据，因此也有了处理数据的需求。

前端代码变得也需要==保存数据、处理数据、生成视图==，这导致了前端 MVC 框架的诞生。

MVVM 模式¶

另一些框架提出 MVVM 模式，用 View Model 代替 Controller。

Model
View
View-Model：简化的 Controller，唯一作用就是为 View 提供处理好的数据，不含其他逻辑。

本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理。

SPA¶

前端可以做到：读写数据；切换视图；用户交互

这意味着，网页其实是一个应用程序。SPA = Single-page application

2010年后，前端工程师从开发页面，变成了开发“前端应用”（跑在浏览器里面的应用程序）。

传统的架构 and 单页应用的架构，多了一个前端 MVC 层

Vue¶

Vue.js 是现在很热门的一种前端 MVVM 框架。基本思想与 Angular 类似，用法更简单，引入响应式编程的概念。

示例：Vue 的双向绑定，Vue 的模板与数据，是双向绑定的。

HTML 代码

<div id="journal">
  <input type="text" v-model="message">
  <div>{{message}}</div>
</div>

JS 代码

var journal = new Vue({
  el: '#journal',
  data: {
    message: 'Your first entry'
  }
});

前后端分离¶

Ajax -> 前端应用兴起；智能手机 -> 多终端支持

这两个原因，导致前端开发方式发生根本的变化。

前端不再是后端 MVC 中的 V，而是单独的一层。

REST 接口¶

前后端分离以后，它们之间通过==接口通信==。后端暴露出接口，前端使用后端提供的数据。后端接口一般是 REST 形式，前后端的通信协议一般是 HTTP。

Node¶

2009年，Node 项目诞生，它是==服务器上的 JavaScript 运行环境==。

Node = JavaScript + 操作系统 API

Node 的意义：JavaScript 成为服务器脚本语言，与 Python 和 Ruby 一样；JavaScript 成为唯一的浏览器和服务器都支持的语言；前端工程师可以编写后端程序了

前端开发模式的根本改变¶

Node 环境下开发
大量使用服务器端工具
引入持续集成等软件工程的标准流程
开发完成后，编译成浏览器可以运行的脚本，放上 CDN

全栈工程师¶

前端工程师正在转变为全栈工程师：一个人负责开发前端和后端；从数据库到 UI 的所有开发

怎样才能称为全栈工程师？

传统前端技能：HTML、JavaScript、CSS
一门后端语言
移动端开发：iOS / Android / HTML5
其他技能：数据库、HTTP 等等

软件行业的发展动力¶

历史演变：前后端不分 -> 前后端分离 -> 全栈工程师

动力：更加产业化、大规模地生产软件

效率更高
成本更低

通用性好、能够快速产出的技术最终会赢，单个程序员的生产力要求越来越高。

H5 就是一个最好的例子¶

为什么 H5 技术会赢得移动端？

开发速度快：Native 需要重新编译才能看到结果，H5 是即时输出
开发成本低：Native 需要两个开发团队，H5 只要一个
快速发布：安卓 Native 新版本需要24小时，iOS 需要 3 ～ 4 天，H5 可以随时更新

未来软件的特点：联网；高并发；分布式；跨终端

现在基于 Web 的前端技术，将演变为未来所有软件的通用的 GUI 解决方案。

未来只有两种软件工程师¶

端工程师
手机端
PC 端
TV 端
VR 端
……
云工程师

React 技术栈¶

React 的优点

组件模式：代码复用和团队分工
虚拟 DOM：性能优势
移动端支持：跨终端

React 的缺点

学习曲线较陡峭
全新的一套概念，与其他所有框架截然不同
只有采用它的整个技术栈，才能发挥最大威力

总结：React 非常先进和强大，但是学习和实现成本都不低

JSX 语法¶

React 使用 JSX 语法，JavaScript 代码中可以写 HTML 代码。

let myTitle = <h1>Hello, world!</h1>;

（1）JSX 语法的最外层，只能有一个节点。

// 错误
let myTitle = <p>Hello</p><p>World</p>;

（2）JSX 语法中可以插入 JavaScript 代码，使用大括号。

let myTitle = <p>{'Hello ' + 'World'}</p>

Babel 转码器¶

JavaScript 引擎（包括浏览器和 Node）都不认识 JSX，需要首先使用 Babel 转码，然后才能运行。

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
  // ** Our code goes here! **
</script>

React 需要加载两个库：React 和 React-DOM，前者是 React 的核心库，后者是 React 的 DOM 适配库。

Babel 用来在浏览器转换 JSX 语法，如果服务器已经转好了，浏览器就不需要加载这个库。

React 组件库¶

React 的一大优势，就是网上有很多已经写好的组件库，可以使用。

React-Bootstrap：https://react-bootstrap.github.io/

示例：ReCharts¶

ReCharts 是一个 React 图表组件库。http://recharts.org/

浏览器打开`demos/recharts-demo/index.html，仔细查看源码，体会 JSX 语法对表达复杂组件的优势。

<LineChart width={1000} height={400} data={data}>
  <XAxis dataKey="name"/>
  <YAxis/>
  <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
  <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>

React 的核心思想¶

View 是 State 的输出。

view = f(state)

上式中，f表示函数关系。只要 State 发生变化，View 也要随之变化。

React 的本质是将图形界面（GUI）函数化。

const person = {
  name: "michael",
  age: 31
}
const App = ({ person }) => <h1>{ person.name }</h1>
ReactDOM.render(<App person={person} />, document.body)

React 没有解决的问题：React 本身只是一个 DOM 的抽象层，使用组件构建虚拟 DOM。如果开发大应用，还需要解决两个问题。架构：大型应用程序应该如何组织代码？通信：组件之间如何通信？

架构问题¶

React 只是视图层的解决方案，可以用于任何一种架构。

MVC
MVVM
Observer
Reactive
...

到底哪一种架构最合适 React ？

通信问题：组件会发生三种通信：父向子组件发消息 props；子向父组件发消息回调函数；向其他组件发消息事件监听；eventBus。React 只提供了一种通信手段：传参。对于大应用，很不方便。

状态的同步：通信的本质是状态的同步；React 同步状态的基本方法：找到通信双方最近的共同父组件，通过它的state，使得子组件的状态保持同步。

Flux 架构¶

Facebook 提出 Flux 架构的概念，被认为是 React 应用的标准架构。Flux 只是一个概念，有30多种实现。

最大特点：数据单向流动。与 MVVM 的数据双向绑定，形成鲜明对比。

Flux 的核心思想

不同组件的state，存放在一个外部的、公共的 Store 上面。
组件订阅 Store 的不同部分。
组件发送（dispatch）动作（action），引发 Store 的更新。

两个 React 架构¶

React 架构的最重要作用：管理 Store 与 View 之间的关系。

MobX：响应式（Reactive）管理，state 是可变对象，适合中小型项目
Redux：函数式（Functional）管理，state 是不可变对象，适合大型项目

MobX 架构¶

MobX 的核心是观察者模式。

Store 是被观察者（observable）
组件是观察者（observer）

一旦Store有变化，会立刻被组件观察到，从而引发重新渲染。

MobX 例子¶

const { observable } = mobx;
const { observer } = mobxReact;

const person = observable({name: "张三", age: 31});

const App = observer(
  ({ person }) => <h1>{ person.name }</h1>
);

ReactDOM.render(<App person={person} />, document.body);
person.name = "李四";

UI 层是观察者，Store 是被观察者。

Store 所有的属性，分成两大类：直接被观察的属性和自动计算出来的属性。

class Store {
  @observable name = 'Bartek';
  @computed get decorated() {
    return `${this.name} is awesome!`;
  }
}

UI 会观察到 Store 的变化，自动重新渲染。

PS：UI 层会随着Store层数据变化而响应式变化。如果组件很复杂，维护的变量很多，那么Store变化很频繁，就会造成大量的界面重绘和性能问题。

Redux 架构¶

Redux 的核心概念¶

所有的状态存放在Store。组件每次重新渲染，都必须由状态变化引起。
用户在 UI 上发出action。
reducer函数接收action，然后根据当前的state，计算出新的state。

Redux 层保存所有状态，React 组件拿到状态以后，渲染出 HTML 代码。

示例：

Redux 将组件分成 UI 组件和容器组件两类。
UI 组件是纯组件，不包含 state 和生命周期方法，不涉及组件的行为，只涉及组件的外观。

<div className="index">
  <p>{this.props.text}</p>
  <input
    defaultValue={this.props.name}
    onChange={this.props.onChange}
  />
</div>

容器组件正好相反。

不涉及组件的外观，只涉及组件的行为。
负责订阅 Store，将 Store 的数据处理以后，再通过参数传给 UI 组件。
用户给出配置以后，由 Redux 生成。

// MyComponent 是纯的 UI 组件
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

mapStateToProps: 定义 UI 组件参数与 State 之间的映射
mapDispatchToProps：定义 UI 组件与 Action 之间的映射

拆分 UI 组件和容器组件的好处

UI 组件与后台数据无关，可以由设计师负责
容器组件只负责数据和行为，一旦 Store 的数据结构变化，只要调整容器组件即可
表现层和功能层脱钩，有利于代码重用，也有利于看清应用的数据结构和业务逻辑

Reducer 函数¶

reducer是一个纯函数，用来接收action，算出新的state。

function reducer(state, action) {
  switch (action.type) {
    case 'change':
      return {
        name: action.payload,
        text: '你好，' + action.payload
      };
  }
}

Store由 Redux 提供的createStore方法生成，该方法接受reducer作为参数。
为了把Store传入组件，必须使用 Redux 提供的Provider组件在应用的最外面，包裹一层。

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.body.appendChild(document.createElement('div'))
);

Node 应用开发¶

Node 简介¶

Node 是服务器的 JavaScript 运行环境，提供 API 与操作系统互动。

主要用途：

开发前端应用
快速搭建服务
架设网站

Node 开发前端脚本的好处：

模块机制
版本管理
对外发布
持续集成的标准开发流程

"scripts": {
  "buile": "webpack --mode production ./app.js -o ./bundle.js",
},

npm run build

可以把一个JS文件打包成一个bundle文件，然后在HTML中引用，就可以使用打包后的JS文件

REST API¶

REST 是浏览器与服务器通信方式的一种设计风格。

它的全称是“REpresentational State Transfer”，中文意为“表现层状态转换”。

Resource：资源
Representation：表现层
State：状态
Transfer：转换

REST 的核心概念¶

互联网上所有可以访问的内容，都是资源。
服务器保存资源，客户端请求资源。
同一个资源，有多种表现形式。
协议本身不带有状态，通信时客户端必须通过参数，表示请求不同状态的资源。
状态转换通过HTTP动词表示。

URL 设计¶

URL 是资源的唯一识别符。

/store/1
/store/2
/store/1/employee/2

查询字符串¶

查询字符串表示对所请求资源的约束条件。

GET /zoos/1/animals?limit=10
GET /zoos/1/animals?limit=10&offset=10
GET /animals?zoo_id=1

HTTP 动词¶

操作	SQL方法	HTTP动词
CREATE	INSERT	POST
READ	SELECT	GET
UPDATE	UPDATE	PUT/PATCH
DELETE	DELETE	DELETE

GET /v1/stores/1234
PUT /v1/stores/1234
POST /v1/stores
DELETE /v1/stores/1234

Express¶

Express 是最常用的 Node 框架，用来搭建 Web 应用。

定义一个 Web 应用实例，并且启动它。

var express    = require('express');
var app        = express();

var port = process.env.PORT || 8080;

app.listen(port);
console.log('Magic happens on port ' + port);

定义一个路由

var router = express.Router();

router.get('/', function(req, res) {
  res.send('<h1>Hello World</h1>');
});

app.use('/home', router);

中间件：对 HTTP 请求进行加工。

router.use(function(req, res, next) {
  console.log('There is a requesting.');
  next();
});

前端工程简介¶

软件工程流程¶

持续集成流程¶

前端开发转移到后端环境，意味着可以适用标准的软件工程流程。

本地开发（developing）
静态代码检查（linting）
单元测试（testing）
合并进入主干（merging）
自动构建（building）
自动发布（publishing）

持续集成的概念¶

Continuous integration（简称 CI）：

开发代码频繁地合并进主干，始终保持可发布状态的这个过程。

优点

快速发现错误
防止分支大幅偏离主干
让产品可以快速迭代，同时还能保持高质量

ESLint：静态代码检查工具¶

发现语法错误
发现风格错误
自动纠正错误

为什么写测试？Web 应用越来越复杂，意味着更可能出错。测试是提高代码质量、降低错误的最好方法之一。

测试可以确保得到预期结果。
加快开发速度。
方便维护。
提供用法的文档。

对于长期维护的项目，测试可以减少投入时间，减轻维护难度。

测试的类型¶

单元测试（unit testing）
功能测试（feature testing）
集成测试（integration testing）
端对端测试 (End-to-End testing）

以测试为导向的开发模式¶

TDD：测试驱动的开发（Test-Driven Development）
BDD：行为驱动的开发（Behavior-Driven Development）

它们都要求先写测试，再写代码。

思考题：测试导向的开发模式有明显的优点，为什么现实生活中采用的人不多？

TDD vs. BDD¶

两者侧重点不一样

TDD：基于开发者角度，重点测试函数的输入输出
BDD：基于使用者角度，重点测试对用户行为的反应

比如，有一个计数器函数counter，TDD 测试的是输入1，输出的应该是2；BDD 测试的是用户访问以后，计数器应该增加一次。

Mocha¶

Mocha 是目前最常用的测试框架。

功能测试¶

功能测试指的是，站在外部用户的角度，测试软件的某项功能。

与内部代码实现无关，只测试功能是否正常。

很多时候，单元测试都可以通过，但是整体功能会失败。

前端的功能测试¶

功能测试必须在真正浏览器做，现在有四种方法。

使用本机安装的浏览器
使用 Selenium Driver
使用 Headless Chrome
使用 Electron

Nightmare¶

使用 Electron 模拟真实浏览器环境
提供大量人性化、易用的 API
官网：nightmarejs.org

移动平台的自动化测试¶

目前，最常见的方案是使用 Appium。

基于 WebDriver
采用客户端/服务器架构
可以在模拟器运行，也可以在真机运行

Appium 测试流程¶

WebDriver 客户端发出测试请求和测试内容
Appium 服务器转发到相应的测试运行器（Driver）
iOS 设备是 UIAutomation，安卓设备是 UiAutomator
测试运行器将运行结果，返回给 Appium

持续集成服务平台¶

代码合并进主干以后，就可以进行==自动构建和发布==了。

网上有很多 PaaS 平台，提供持续集成服务。

Travis CI 就是其中最著名的一个，它可以根据你提供的脚本，自动完成构建和发布。

Last update: November 9, 2024