当前微信小程序运行框架为mpvue1.0.12版本
测试工具：单元测试、功能测试、性能测试、安全测试
MVC架构模式
MVC框架
视图 <---> C <---> web <— 浏览器
React依赖于一个庞大的技术栈：比如转译Javascript代码需要Babel，模块打包工具需要webpack，定制build过程需要grunt或者gulp，技术栈各自需要配置文件
JSX使我们在Javascript中像HTML一样编写，e.g ReactDOM.render的第一个参数
最顶端DOM节点添加一个事件处理函数，使用事件委托（event delegation）方式处理，所有点击事件被事件处理函数捕获，
然后根据具体组件分配给特定函数
1 | //webpack.config.dev.js |
所有以js或者jsx为扩展名的文件，都由babel处理
jQuery逻辑：1.根据CSS规则找到id为clickCount按钮;2.挂上一个匿名事件处理函数；3.事件处理函数中选中需要修改的DOM元素；4.读取文本值并加以修改；5.修改这个DOM元素
缺点：项目庞大时代码容易纠缠
关注于“我想要显示什么”，UI = render(data)
React通过重复渲染来实现用户交互，每次渲染只重复渲染最少的DOM元素
第五章关注对比过程
JSX会被Babel解析为一条条创建React组件或者HTML元素的语句
DOM树是对HTML的抽象，Virtual DOM是对DOM树的抽象；DOM不触及浏览器的部分，只存在于Javascript空间的树形结构
事件 –> render –> Virtual DOM –> DOM修改
组件设计原则：高内聚、低耦合
prop为组件的对外接口，state为组件的内部状态
prop属性不限于纯，数据prop的类型不是字符类型时，JSX中必须用{}把prop包住，所以style两层{}
1 | //外层{},JSX语法；内层{},代表对象常量 |
constructor函数
给this.props赋值是React.Component构造函数的工作之一
定义super(props)，进而类实例的所有成员函数可以通过this.props访问父组件传递的props值
解构赋值
1 | const {caption} = this.props |
propType检查：组件声明接口规范
propTypes能够发现开发阶段问题，不建议在产品阶段，e.g babel-react-optimize
1 | Counter.propTypes = { |
getInitialState和getDefaultProps
getInitialState：只有在React.createClass方法创造的组件中才能初始化组件的this.state
getDefaultProps: 返回值作为props初始值
1 | //ES6 在构造函数中通过this.state赋值完成状态的初始化 |
render：纯函数（根据this.props和this.state）
render并不做实际的渲染动作，只是返回一个JSX描述的结构，最终由React来操作渲染过程
服务器端js：Node.js
componentDidMount:render函数调用完之后，componentDidMount函数并不会立即调用，componentDidMount被调用的时候，render函数返回的东西已经引发了渲染，组件已经“装载”到DOM树上，只在浏览器端被调用
d3.js已经支持了丰富的绘制图表的功能
React+jQuery:利用componentDidMount函数，此时React的DOM组件对应的DOM已经存在，所有的事件处理函数已经设置好，可以调用jQuery在已经绘制号的DOM基础上增强新的功能
this.setState方法不会触发这个过程，因为函数会根据新的props值来计算是不是要更新内部状态state，更新内部状态的方法就是this.setState,若调用就形成死循环
（2）在JSX中直接把匿名函数赋值给onclick，并不提倡，每次渲染都会创造一个新的匿名对象，可能会引发子组件不必要的重新渲染1
<button onclick = { () => this.forceUpdate() }></button>
（3）nextProps代表着一次渲染传入的props的值，this.props代表的是上一次渲染的props值，只有两者有变化时才有必要调用this.setState更新内部状态
componentWillUnmount： 和componentDidMout有关，把创造的DOM元素清理掉
函数是一等功名，函数本身可以被看做一种对象
每个Counter组件由自己的状态记录当前计数，而父组件ControlPanel也有一个状态来存储所有Counter计数总和，即数据重复
把数据源放在React组件之外形成全局状态，把各个组件保持和全局状态一致
1 | AppDispatcher.dispatch({ |
(3)Store：为一个对象，每一个Store都是一个全局惟一的对象，存储应用状态，同时还要接受Dispatcher派发的动作，根据动作决定是否要更新应用
Store只有注册到Dispater实例上才能真正发挥作用
注册过程：把CounterStore注册到全局惟一的Dispatcher上。Dispatcher有一个函数为register，接受一个回调函数作为参数，返回值为token，token可用于Store之间的同步，保存在dispathchToken字段上。
2
3
})
当通过register函数把一个回调函数注册到Dispatcher之后，所有派发给Dispatcher的action对象，都会传递到这个回调函数中来，回调函数要做的，就是根据action对象来决定该如何更新自己的状态
（4）View
存在于Flux框架中的React组件需要实现以下的功能：
a.创建时读取Store上状态来初始化组件内部状态
b.当Store上状态发生变化，组件立即同步更新内部状态保持一致
c.View如果改变Store状态，必须且只能派发action
1 | reducer(state,action) |
React的Rudex只负责计算状态，不负责存储状态
React和Redux是两个独立的产品，Redux中每个构造函数都返回一个action对象，Flux中的Dispatcher简化为Store上的一个dispatcher，state是由Store管理的
容器组件：负责和Redux Store打交道，读取、监听store的状态，派发action对象，通过props将状态传递给展示组件
傻瓜组件（展示组件）：负责渲染界面的组件，没有state
解决问题：解决需要一层层传递props
解决方法：让一个树状组件所有组件都能访问一个共同的对象，创建特殊React组件（Provider）为Context提供者
Provider的render函数简单的把子组件渲染出来
childContextTypes属性，getChildContext函数，两者相互对应，子组件才能访问到context
1 | Provider.childContextType = { |
子组件通过this.context访问context对象
1 | super(props,context) |
1 | export default connect(mapStateToProps,mapDispatchToProps)(Counter) |
connect函数具体工作:把Store上的状态转化为内层傻瓜函数的prop(mapStateToProps);把内层傻瓜组件中的用户动作转化为派送给Store的动作(mapDispatchToProps)
范式化：传统的关系型数据库对数据结构进行的操作，其实就是去除数据的冗余，对数据结构的处理和关系型数据库正好相反，通过数据冗余来减少读取数据库时的数据关联工作
- 树形结构扁平
你还是需要架设一个Web服务器，然后以http://开头的地址来正常
（2）布尔值
（3）字符串：多行字符串（` `使用反引号）
连接字符串（用${ },也可以用+）
字符串不可变
返回不用的字符串，实际上并不改变原来的字符串：toUpperCase，toLowerCase，indexOf，substring
注意：NaN与任何数值都不相同，包括自己，只能使用isNaN（）
比较浮点数：注意计算机会产生小数点
null表示一个空的值，而undefined表示值未定义
（3）相关函数：slice（）截取Array的部分元素，返回一个新的Array
Unshift(),shift():如果要往Array的头部添加若干元素，
object.prop或者xiaohong['middle-school']（单引号）
添加或者删除：xiaoming.age; // undefined
判断属性是否存在：in（要判断一个属性是否是xiaoming自身拥有的，
变量：动态变量：var（一个变量名称只能用var声明一次，用var声明后，可
以不用var再定义一个名称相同的变量，前后的数据类型
可以不痛）
静态变量：int等定义，前后数据类型必须相同
strict模式：强制性用var定义，不用var定义就会是全局变量，会在同一个页
面的不同的JavaScript文件中出错，未使用var申明变量就使用
的，将导致运行错误
‘use strict’;
（2）Set和Map类似，也是一组key的集合，但不存储value
Array、Map和Set都属于iterable类型。
为什么要使用for……of?和for…..in有什么区别？
for … of循环则完全修复了这些问题，它只循环集合本身的元素
1 | var a = ['A', 'B', 'C']; |
iterable类型，在Array，Set，Map等都可以使用函数forEach
1 | var a = ['A', 'B', 'C']; |
函数：foo(); // 直接调用foo()
let i=0
1 | var xiaoming = { |
调用方法：（错误）因为有this，不能在外部调用
修改方法：（1）var that = this;1
2
3
4
5
6
7
8
9
10
11var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var that = this; // 在方法内部一开始就捕获this
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - that.birth; // 用that而不是this
}
return getAgeFromBirth();
}};
（2）用apply修复getAge()调用
getAge.apply(xiaoming, [])：第一个参数就是需要
绑定的this变量，第二个参数是
Array，表示函数本身的参数。
（3）call（）函数
call()把参数按顺序传入
E.g Math.max.call(null, 3, 5, 4);
arr.map(pow);
arr.map（function（str）{
return x*y;});
//运算
1 | var results = count(); |
使用闭包的格式:在内部函数中定义：定义后会立即执行
对：(function (x) {
return x x;
})(3);
错：function (x) { return x x } (3);
使用闭包的好处：（1）闭包就是携带状态的函数
（2）闭包还可以把多参数的函数变成单参数的函数。例如，要计算x^y可以用Math.pow(x, y)函数，不过考虑到经常计算x2或x3，我们可以利用闭包创建新的函数pow2和pow3：1
2
3
4
5
6
7
8function make_pow(n) {
return function (x) {
return Math.pow(x, n);
}
}
// 创建两个新函数:var pow2 = make_pow(2);var pow3 = make_pow(3);
pow2(5); // 25
pow3(7); // 34
经典例子1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16'use strict';
// 定义数字0:
var zero = function (f) {
return function (x) { return x;
}
};
// 定义加法:
function add(n, m) {
return function (f) {
return function (x) {
return m(f)(n(f)(x));
}
}
}
// 计算数字2 = 1 + 1:
var two = add(one, one);
箭头函数：相当于简化函数
1 | fn = () => new Date().getFullYear() - this.birth; // this指向obj对象 |
修改前面函数中this的问题
- 不要使用new Number()、new Boolean()、new String()创建包装对象
- 通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {…}
- 函数内部判断某个变量是否存在用typeof myVar === ‘undefined’
- Date
（1）月份范围用整数表示是0~11，0表示一月，1表示二月
（2）创建一个指定日期和时间的Date对象
第二种创建方法是解析一个符合ISO 8601格式的字符串1
2
3
4var d = Date.parse('2015-06-24T19:49:22.875+08:00');
d; // 1435146562875 -------时间戳
var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
\w 字母或者数字
\d 字母
. 任意字符
转义（\） 特殊符号
个数：*为任意个数
+一个
{n,m}n-m个字符
{n}n个字符
[0-9a-zA-Z\_]+可以匹配至少由一个数字、字母或者下划线组成的字符串，比如'a100'，'0_Z'，'js2015'等等；
*，{0,19}。。。。。。
A|B可以匹配A或B
^表示行的开头，^\d表示必须以数字开头。
1 | var re = /^(\d{3})-(\d{3,8})$/; |
exec()方法在匹配成功后，会返回一个Array，第一个元素是正则表达式匹配到的整个字符串，后面的字符串表示匹配成功的子串。1
2var re = /^(\d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']
？用来表示：取消正则化的贪婪匹配
（5）全局匹配：/…../g 即可以多次执行exec（）函数来多次匹配
（6）验证一个Email地址：
var re = /^[a-zA-Z0-9.]+@\w+.\w+$/;（进行分析）
[]内字符之间不需要用+或者其他符号表示不同
后面的+号表示至少匹配一个字符
@不是转义字符，直接用@就好，不用\@
\w+表示@后面的字符
.表示Email的.
\w+表示com、cn等字符
注意添加（），（）用来分组，区分不同的字符串
参数1：对象序列
参数2：A.Array定义想要显示的键[‘’,‘’....]
默认为null
B.传入函数，将每个键值对都会被函数先处理
（key,value）
参数3： ' '按缩进输出
1 | toJSON: function () { |
(4)反序列化：直接用JSON.parse()把它变成一个JavaScript对象
（Student为var定义）通过原型定义
（2）方式二：
1 | // 原型对象:var Student = { |
new Student创建方法从原型上获取了一个constructor属性，指向Student函数本身1
2
3
4
5
6
7
8
9
10
11
12xiaoming ↘
xiaohong -→ Student.prototype ----> Object.prototype ----> null
xiaojun ↗
function Student(name) { //构造函数
this.name = name;
this.hello = function () {
alert('Hello, ' + this.name + '!'); //不需要return
}
}
var xiaoming = new Student('小明'); //使用关键字new
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!
(4)1
2
3
4
5
6
7
8
9
10
11
12
13
14function Student(props) {
this.name = props.name || '匿名'; // 默认值为'匿名'
this.grade = props.grade || 1; // 默认值为1
}
Student.prototype.hello = function () {//将hello函数调出
alert('Hello, ' + this.name + '!');
};
function createStudent(props) { //防止忘记写new
return new Student(props || {})
}
var xiaoming = createStudent({
name: '小明'
});
xiaoming.grade; // 1
原型继承
1 | function inherits(Child,Parent) |
Class继承
需要一个工具把class代码转换为传统的prototype代码，可以试试Babel这个工具。
1 | class Student { |
document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点
1 | <!-- HTML --><form id="login-form" method="post" onsubmit="return checkForm()"> |
（4）提交文件：
< input type=”file”> 选择本地文件
当一个表单包含< input type=”file”>时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。
ts的配置文件tsconfig.json,包含输入文件列表和编译选项
教程地址
TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。
1 | //greeter.ts |
编辑器运行1
tsc greeter.ts
接口 interface
1 | interface Person { |
类：支持基于类的面向对象编程，可定义一个构造函数和一些公共字段
构造函数的参数上使用public等同于创建了同名的成员变量
类和接口可以一起共同作用
- 运行Typescript应用
2
<script src="greeter.js"></script>
Augular 应用
1 | 入口文件为/dist/main.js |
gulp1
![avatar]("../picture/gulp1.png")
node dist/main.js1
2
3
4
5
6返回运行结果
### 向代码里添加模块
导入模块：构建代码后再添加一些混入的模块
1. 在tsconfig.json中file添加模块src/greet.ts
2. 导入模块
import { sayHello } from “./greet”;1
2
3
4
5
### Browserify：把所有的模块捆绑成一个Javascript文件
~支持Node.js的CommonJS模块~
1. 安装Browserify，tsify和vinyl-source-stream
tsify为Browserify的一个插件,访问Typescript编译器；vinyl-source-stream将Browserify的输出文件适配成gulp能够解析的格式
//gulpfile.js
gulp.task(“default”, [“copy-html”], function () { //默认先调用copy-html，作为default的依赖项
return browserify({
basedir: ‘.’,
debug: true,
entries: [‘src/main.ts’],
cache: {},
packageCache: {}
})
.plugin(tsify） //使用tsify插件调用Browserify
.bundle()
.pipe(source(‘bundle.js’)) //source为vinyl-source-stream别名，输出文件为bundle.js
.pipe(gulp.dest(“dist”)); //文件生成在dist文件夹中
});1
2
3
4
5
6
7
8
9
10
112. 调试 gulp
### Watchify，Babel，Uglify
Watchify：；Babel：；Uglify：；
1. Watchify：启动Gulp并保持运行状态，自动编译
执行gulp
2. Babel为编译器，将ES2015及以上的版本转换为ES5和ES3
类似于Uglify，Babelify也会混淆代码，所以需要vinyl-buffer和gulp-sourcemap，需要将.ts添加到Babelify选项
更改tsconfig.json中compilerOptions-target为ES2015，compilerOptions-target定义的为Typescript生成的格式，Babel会将Typescript生成的ES2015编译为es5
3. Uglify压缩代码
Uglify用以混淆代码，安装vinyl-buffer和gulp-sourcemaps来支持sourcemaps
gulp.task(“default”, [“copy-html”], function () {
return browserify({
basedir: ‘.’,
debug: true,
entries: [‘src/main.ts’],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source(‘bundle.js’))
.pipe(buffer()) //调用自身buffer
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write(‘./‘))
.pipe(gulp.dest(“dist”));
});1
2
3```
gulp //检查bundle.js是否被压缩
cat dist/bundle.js ////# sourceMappingURL=bundle.js.map
ts文件放在src文件夹下，通过ts编译器变异，经webpack处理，生成bundle.js文件放在dist目录
webpack将所有代码和可选择地将依赖捆绑为一个单独的.js文件
react
react-dom
@types/react
@types/react-dom
后两个为前两个的声明文件，并非所有的包都包含了声明文件，所以ts会检查
awesome-typescript-loader
source-map-loader
第一个让webpack使用(ts的标准配置文件)tsconfig.json编译ts代码
第二个使用ts输出的sourcemap文件来告诉webpack什么时候生成自己的sourcemaps
import组件使用相对路径，否则ts只会在node_modules中寻找
创建webpack.config.js
create-react-app my-app –scripts-version=react-scripts-ts
使用create-react-app安装：react-script-ts是一系列适配器1
create-react-app project_name --scripts-version=react-scripts-ts
当前webpack 的最新稳定版本为 3.10.0。
当前项目是一个空文件夹，在项目根目录的命令行中执行：yarn add -D webpack，将会生成与 webpack 相关的必要文件。
新建 src/index.html
1 | //src/index.html |
新建 src/index.js
1 | // src/index.js |
新建 webpack.config.js
1 | // webpack.config.js |
项目根目录命令行下执行：webpack，在 src 文件夹下生成 bundle.js 文件，用浏览器打开 src/index.html，可以在浏览器的命令行中看到 Hello World! 输出。
项目根目录命令行下执行：
1 | yarn add -D clean-webpack-plugin |
修改 webpack.config.js
1 | // webpack.config.js |
删除 src/index.html 中 1
2
3
4
5
6
7
# webpack-dev-server
1. 在项目根目录的命令行中执行：```yarn add -D webpack-dev-server```。
2. 在项目根目录的命令行中执行：```node_modules/.bin/webpack-dev-server```，可以进入 webpack 的开发者模式。
# npm 脚本
在 package.json 中添加：
{
…
“scripts”: {
“build”: “webpack”,
“start”: “node_modules/.bin/webpack-dev-server”
}
…
}1
2
3
4
5在项目根目录的命令行中可以使用 yarn build 代替 webpack 进行编译；可以使用 yarn start 代替 node_modules/.bin/webpack-dev-server 进入开发者模式。
# 用 typescript 代替 javascript 进行开发
1. 在项目根目录的命令行中执行：```yarn add -D typescript ts-loader ```安装必要的包。
2. 在项目根目录下新建 tsconfig.json
// tsconfig.json
{
“compilerOptions”: {
“outDir”: “./dist/“,
“noImplicitAny”: true,
“module”: “es6”,
“target”: “es5”,
“jsx”: “react”,
“allowJs”: true
}
}1
23. 将 src/index.js 修改成 src/index.ts。
4. 修改 webpack.config.js
// webpack.config.js
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
module.exports = {
entry: ‘./src/index.ts’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
plugins: [
new CleanWebpackPlugin([‘dist’]),
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘src/index.html’
})
],
module: {
rules: [
{
test: /.tsx?$/,
use: ‘ts-loader’,
exclude: /node_modules/
}
]
}
};
`