关于作者

大家好，我是翟路佳。全栈工程师，编程爱好者，喜欢分享。

我今年的目标是做一名兴趣使然的分享者，多出内容，帮助尽可能多的同学获得进步。

我经常出没于：

• 博客：https://blog.meathill.com/
• 微博：https://weibo.com/meathill/
• SF：https://sf.gg/u/meathill

其它分享

https://github.com/meathill-lecture

课程大纲

1. 项目启动 & 需求分析
2. npm & package.json
3. Stylus
4. 静态 HTML 开发

5. ES2015 简介
6. 使用 ES6 开发 JavaScript
7. 使用 Mocha + should.js + Babel 测试

8. 搭建 Webpack + Babel 编译环境
9. 使用 Handlebars 处理模板
10. 完成 UI 开发和测试
11. 使用策略模式解决分支需求

11. Gulp 打包
12. 配置 Webpack 适应不同环境的打包
13. 使用 Weinre 解决微信下的问题

14. 使用 GitHub Pages 搭建文档网站
15. 回顾，总结

需求分析

通用规则

1. 今日用黄点标记
2. 不可选的日期为灰色
3. 打开关闭都需要动画
4. 周末用橙色标记
5. 可以指定某个日期为橙色（端午节、清明节等）
6. 向上滚屏可以自动增加下个月
7. 可以用参数配置

选择单日

1. 点击日期视为选中
2. 点击同一日期视为取消
3. 点击其它日期视为多选
4. 若自动提交，点够数量就提交
5. 不自动提交，右上角有提交按钮，点击后提交

选择多日

1. 第一次点击时，视为选择时间段的一端，第二次点击为选择另一端
2. 允许用户先选择终点，再选择起点
3. 若自动提交，第二次点击后，控件伴随着动画关闭
4. 不自动提交，第三次点击会清空之前的选择，并重新选择起点

技术选型

1. 开发效率
2. 使用效率
3. 维护成本

jQuery

1. 事件代理
2. 创建 DOM
3. 简单的 DOM 操作

模板引擎 Handlebars

1. 预编译
2. 比较熟

Stylus -> CSS

1. 使用预处理工具，方便开发
2. 简单方便快捷，基于 Node.js
3. 支持变量、函数、循环
4. 丰富的内建函数

语言

1. ES6 Class
2. Webpack + Babel
3. 完整的测试用例

提交物料

1. 最终文件 CSS、JS 各一个
2. 源代码
3. 使用文档

工作流程

1. 将事件绑定在 上
2. 配置信息使用 data-* 写在 上
3. 用户点击 input[type=text].tqb-date-picker 后
   1. 如果此文本框尚无日历元素
   2. 则生成一个元素并绑定
4. 弹出日历窗口
5. 用户点击后选中日期

0. 准备阶段

1. 安装 node.js
2. 安装 Stylus
3. [可选] 安装 Live-server

Live-server

Live-server 是开发服务器，基于 Node 实现，能够实现自动刷新。

用法：

live-server --port=8081 --host=localhost --ignore=styl

1. 初始化项目

NPM

Node Package Manager = Node 包管理工具

1. 管理依赖
2. 发布我们自己的包
3. 记录常用脚本

package.json

此项目的配置信息，可被 npm 读取。

1. 版本、内容、作者等描述
2. 依赖：运行时依赖 & 开发时依赖
3. 可执行脚本

ES2015 / ES6

ES

= ECMAScript

= 由 ECMA 国际（前身为欧洲计算机制造商协会）通过 ECMA-262标准化的脚本程序设计语言。

• JavaScript 是 ECMAScript 的一种方言
• 浏览器中的 JavaScript 增加了 DOM 和 BOM
• 目前 ES5 基本完成普及，主流浏览器部分或全部支持 ES6

• ES5 = ES6 之前的规范
• ES6 = ES2015
• ES7 = ES2016 + ES2017
• ES8 = ES2018（讨论中）
• ES9 = ES2019（征集想法中）

JavaScript 的历史

妾本出身贫寒家，未想尊威仪天下

1. 为校验表单而生
2. 只花了10天就设计出原型
3. 连名字都是山寨的……

江山代有才人出，各领风骚数百年

1. JScript
2. Flash，ActiveX
3. SilverLight，JavaFX

天下逐鹿，终归秦属

1. ES3 大体上统一了 JavaScript
2. ES4 夭折
3. HTML5 获得浏览器之争的最终胜利
4. ES5 诞生
5. ES6 诞生

变量解构

Destructuring

按照一定模式，从数组和对象中提取值。

// 解构数组
let [a, b, c] = [1, 2, 3];
// a = 1;
// b = 2;
// c = 3;

只要两边模式对照一致，可以有很多种拆法：

let [a, ...b] = [1, 2, 3, 4];
// a = 1
// b = [2, 3, 4]

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

解构对象

let {a, b, c} = {a: 1, b: 2, c: 3};
// a = 1
// b = 2
// c = 3

// 解构对象只关注键名，不关注顺序
let {b, c, a} = {a: 1, b:2, c: 3};
// a = 1
// b = 2
// c = 3

常见用法：函数返回多个值

function sample() {
  return {
    a: 1,
    b: 2,
    c: 3
  };
}
let {a, b, c} = sample();

常见用法：作为函数参数

function sample({id, name, age, sex, height, photo}) {
  // do something
}
sample({
  id: 1,
  name: 'meathill',
  age: 33,
  sex: MALE,
  height: 181,
  photo: './photo.jpg'
});

Class

class A {
  constructor() {
    // 构造函数

    // 声明实例属性
    this.var = '';
  }

  method1() {

  }

  method2() {

  }
}

几个常见的点：

1. 这里的类仍然是原型继承
2. class 关键词不存在变量提升
3. 子类构造函数里，必须 super() 之后才有 this

Module

终于有模块机制了！

// profile.js
export let name = 'Meathill';
export let age = 33;
export let weight = 100;

// user.js
import * as user from './profile'
// user.name = 'Meathill';
// user.age = 33;
// user.weight = 100;
// 亦可使用解构方法
import {name, age, weight} from './profile'

默认值

// profile.js
export default 'Meathill';
export let age = 33;
export let weight = 100;

// user.js
import anyname from './profile.js';

我对测试的态度

1. 开发人员必须了解测试
   1. 测试用例
   2. 边界条件
   3. 回归测试
2. 开发人员应该自己写测试
   1. 稳定质量
   2. 方便重构
   3. 提升开发效率
3. 不用追求测试覆盖率

单元测试

什么是单元测试？

在计算机编程中，单元测试（英语：Unit Testing）又称为模块测试, 是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。 程序单元是应用的最小可测试部件。

Wiki

怎么写单元测试？

以 Node.js 为例

const assert = require('assert');

assert.equal(1, '1'); // 1 == '1' true

核心概念：

1. 断言
2. 边界条件

Webpack

Webpack 是一个打包工具，降低 Web 中加载资源的难度。

• 官网
• 文档
• 当前版本：2.6.1

依赖管理的发展

1. 最早：所有资源静态引入
2. 接下来：AMD/CMD/CommonJS/Sea.js
3. 打包流出现：Browserify
4. 打包一切：Webpack

Babel

Babel 是一个转译工具，将高版本的 JS 转译成低版本的 JS。亦可转译 JSX（React）。

• 官网
• 文档
• 当前版本：
  • babel-core 6.24.1
  • babel-loader 7.0.0

Babel 入门

1. 配置文件 .babelrc
2. 预设环境 preset env
3. 插件

设计模式

可复用面向对象软件的基础

1. 面向对象
2. 提高代码的复用性和维护效率
3. 锦上添花

使用设计模式的正确姿势

1. 了解设计模式，暗记于心
2. 学习别人使用设计模式的方式、场景
3. 在合适的地方使用合适的模式

策略模式

定义一系列算法，把它们一个个封装起来，并且使它们可相互替换。

1. 如果把所有可能用到的算法都写到一起，会使它变得巨大复杂难以维护
2. 不同的时候需要不同的算法，一个类里不应包含它不支持的方法
3. 新增同类型的需求时，增加算法和调整现有算法都会变得很困难

1. 所有策略的主要流程是一致的
2. 个别不一致的环节可以独立实现
3. 通常配合工厂类一起使用

真的是这样么？

“我直接写，写完直接 FTP 传上去多省事儿啊！”

1. 文件多，难以确定哪些需要上传
2. 无法区分开发环境与生产环境
3. HTML/CSS/JavaScript 天生的缺陷

“遇到问题我登到 FTP 上改不就好了么？”

1. 版本管理的问题
2. 缓存的问题

批处理顺序

const sequence = require('run-sequence');
const del = require('del');

gulp.task('clear', () => {
  return del(['dist']);
});

gulp.task('default', callback => {
  sequence(
    'clear',
    ['other', 'task'],
    callback
  );
})

任务完成的判定依据：

1. callback()
2. 返回 gulp 流
3. 返回 Promise 对象

ESLint

1. 检查代码是否符合规范
2. 执行最重要，有没有分号不重要

Coding!

pre-commit

利用 Git pre-commit 钩子，检查代码，不合规不入库

现实中：

1. 从现在开始，先审查新代码
2. 如果重构，把重构的代码拿来一起审查

模块管理的起源

程序员的基础行为准则：

DRY = Don't Repeat Yourself

不要重复你自己。

早年的前端开发：

1. 以全局使用为主
2. 以复制粘贴为主

1. DOM 结构发生变化，代码失效
2. 修改了某段代码，其它页面失效
3. 不同代码容易冲突

模块管理 = 使用写好的代码

好处：

1. 节省开发时间
2. 节省测试时间
3. 可以使用更小的粒度
4. 可以版本管理

模块管理的发展

最早：

1. AMD => require.js
2. CMD => sea.js
3. CommonJS => Node.js
4. 全局，命名空间 => jQuery，Lodash/Underscore

接下来：

1. AMD vs CMD
2. Browserify
3. Webpack
4. UMD

最终胜出者：Webpack

优势：

1. 海量 NPM 资源
2. 打包所有资源，非常方便

package.json

1. version 版本
2. main 入口

.npmignore

1. 可以忽略，此时会使用 .gitignore
2. 如有，则忽略 .gitignore
3. 建议只包含必要的文件，或编译后的文件

关于作者

大家好，我是翟路佳。全栈工程师，编程爱好者，喜欢分享。

我今年的目标是做一名兴趣使然的分享者，多出内容，帮助尽可能多的同学获得进步。

我经常出没于：

• 博客：https://blog.meathill.com/
• 微博：https://weibo.com/meathill/
• SF：https://sf.gg/u/meathill

其它分享

https://github.com/meathill-lecture

UI 的发展

1. MVC
2. MVP
3. MVVM

MVC

1. 发明于1979年
2. 没有图形界面！
3. 主要输入方式是键盘甚至纸带

MVP

1. 发明于 1996 年
2. 此时，图形界面取得巨大发展
3. 鼠标成为最常用的输入工具
4. 显示器可以显示更复杂的图形，开始有抽象的“元件”

MVVM

1. 发表于 2005 年
2. 几乎都是图形界面
3. 标记语言大行其道
4. 以“双向绑定”为代表

1. 大部分你能找到的介绍这三种模式的文章都是错的
2. 理解内在原因比较重要
3. 在服务器端编程，MVC/MVP 仍然是主流

为什么选择 Vue？

vs React

React 优势：

1. 大厂背书
2. React Native

React 劣势：

1. 丑陋的 JSX，反标准，反历史进程
2. 学习曲线陡峭
3. 夹带私货的黑历史

vs Angular

Angular 优势：

1. 大厂背书
2. Angular 1 曾经是事实标准

Angular 劣势

1. Angular 2 之后重写了
2. 学习曲线非常陡峭
3. TypeScript

最终选择：Vue

1. 优秀的中文文档
2. 活跃的中文社区
3. 平缓的学习曲线
4. 富有美感的 API 设计

Vue 的组件开发

我假定各位：

1. 看过前面几节课，清楚前端工具体系
2. 具备 Vue 基础

组件分类：

1. 功能组件，如播放器、幻灯片
2. 表单组件，如文件上传、日历

表单组件核心：v-model

1. 负责传入数据
2. 负责回收数据

课后练习

1. 完成 RangeDatePicker 的重构
2. 把动画效果加回来
3. 使用 webpack 把所有资源放在一起

欢迎通过 PR 的方式提交作业：

https://github.com/meathill-freelance/date-picker

我承诺会及时 review 代码。通过后，送 ￥100 以内的书。

参考阅读：

工具篇

• NPM
• Stylus
• Babeljs
• Mocha
• Should.js
• Webpack
• ESLint | ESLint 中文

工具使用篇

• Using a package.json
• 阮一峰 测试框架 Mocha 实例教程
• Babel 设置
• Run npm scripts in a git pre-commit Hook

知识篇

• ES6
• Wiki ECMAScript
• 谈谈UI架构设计的演化
• Vue 组件基础
• Vue 单文件组件

图书篇

• JavaScript 设计模式

Debug 篇

• 一个超级诡异的 iOS Safari position: fixed 失效问题