Yapei Li

rollup

rollup打包类库时使用，打包文件比较纯粹；启动服务还是webpack

开发项目使用webpack

1
2
3
4

npm init -y

//                  rollup和babel的桥梁  babel核心模块  es6转es5            启动webpack服务
npm install rollup rollup-plugin-babel @babel/core  @babel/preset-env rollup-plugin-serve -D

安装

1

npm install axios

基础使用

结合 vue-axios使用

man.js

1
2
3
4

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

组件中：

1
2
3
4
5
6
7

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
}

axios 改写为 Vue 的原型属性

main.js

1
2

import axios from 'axios'
Vue.prototype.$http= axios

在组件中:

1
2
3
4
5
6

this.$ajax.get('api/getNewsList')
.then((response)=>{
    this.newsList=response.data.data;
}).catch((response)=>{
    console.log(response);
})

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

解决问题：

1、多个视图依赖于同一状态。
2、来自不同视图的行为需要变更同一状态。

工作原理图

组件内store.dispatch(‘actionsName’)一个 actions -> actions内context.commit(‘mutationName’)一个mutations ->mutations内 直接改变state

不使用actions(不包含异步操作)：组件内store.commit(‘mutationName’)一个mutations ->mutations内 直接改变state

使用双重断言，先断言成兼容所有类型的 any，再断言为别的类型可以避免编译器将不会报错:const element = (event as any) as HTMLElement

null和undefined是所有类型的子类型。 就是说可以把 null和undefined赋值给number类型的变量

类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以

对象字面量会被特殊对待而且会经过 额外属性检查，当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何“目标类型”不包含的属性时，会得到一个错误

TypeScript支持两种索引签名：字符串和数字

当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。也就是用 100（一个number）去索引等同于使用”100”（一个string）去索引，因此两者需要保持一致

接口描述了实现类的公共部分，而不是公共和私有两部分；不会帮你检查类是否具有某些私有成员

类类型的只是很重要

默认为 public 类的外部可访问

private类的外部不能访问

protected 在派生类（继承类）内部可以访问

构造函数也可以被标记成 protected,这意味着这个类不能在包含它的类外被实例化(不能 new)，但是能被继承

返回值类型是函数类型的必要部分，如果函数没有返回任何值，也必须指定返回值类型为 void而不能不写。

剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个；编译器创建参数数组，名字是在省略号（…）后面给定的名字，可以在函数体内使用这个数组

泛型:在调用函数时确定入参与出参的类型,达到返回值的类型与传入参数的类型相同，的目的

绕开额外的属性检查：

1
2
3
4
5

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;  //会带有任意数量的其它属性[propName: string]: any;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//接口
interface SquareConfig {
  color?: string;
  width?: number;
}
                        // 入参类型限定          //返回值限定
function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 泛型定义
function identity<T>(arg: T): T {
    return arg;
}

//泛型使用 确定T类型
let output = identity<string>("myString");  // type of output will be 'string'
let output = identity("myString");  // type of output will be 'string'


//泛型函数loggingIdentity，接收类型参数T和参数arg，参数arg是类型是T的数组，并返回元素也是类型是T的数组
function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

//另一种实现
function loggingIdentity<T>(arg: Array<T>): Array<T> {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

1
2
3
4
5
6
7
8
9
10
11
12

//函数类型 接口
interface SearchFunc {
                            //入参： 返回值
  (source: string, subString: string): boolean;
}

//对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

1
2
3
4
5
6
7
8
9

// 断言
interface Foo {
  bar: number;
  bas: string;
}

const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

挂载阶段的组件生命周期

把 React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载 这是一个从无到有的过程

React.js 控制组件在页面上挂载和删除过程里面几个方法：

1. componentWillMount：组件挂载开始之前，也就是在组件调用 render 方法之前调用。

   17 版本会被抛弃，避免在此方法中引入任何 side-effects（例如，数据获取或动画） 或 subscriptions(订阅)。 对于这些用例，请改用componentDidMount()。

   建议使用 constructor() 来代替初始化状态

2. componentDidMount：组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。

3. componentWillUnmount：组件对应的 DOM 元素从页面中删除之前调用。

1、defaultProps 用来设置类的默认 props
2、forceUpdate() 强制渲染组件
3、cloneElement() 克隆并返回一个新的 React 元素
4、isValidElement() 验证对象是否是一个 React 元素
5、unmountComponentAtNode() 从 DOM 中移除已装载的 React 组件
6、findDOMNode() 用于访问真实 DOM 节点的接口

上下文(Context) : React.createContext

上下文(Context) 提供了一种通过组件树传递数据的方法，无需在每个级别手动传递 props 属性。

不必在树的每个层级显式传递一个 prop

Context 旨在共享一个组件树内可被视为 “全局” 的数据

适用于 组件直接将数据传递给 孙子级组件

当一些数据需要在不同的嵌套级别上被许多组件访问时，首先考虑使用 Context

两个概念：Provider（提供者）Consumer（消费者）

代码拆分

打包

打包(Bundling) 是一个处理过程，跟踪导入的文件并将其合并到单个文件：“包” 。

然后，这个包文件可以包含到网页上，这样可以一次性加载整个应用程序。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// app.js
import { add } from './math.js';

console.log(add(16, 26)); // 42
// math.js
export function add(a, b) {
  return a + b;
}

//打包后的包文件:
function add(a, b) {
  return a + b;
}

console.log(add(16, 26)); // 42

代码拆分

代码拆分： 可以帮助你 “懒加载(lazy-load)” 用户当前需要的东西，这可以显著提高应用程序的性能。

虽然没有减少应用程序中的代码总量，但是已经避免了加载用户可能不需要的代码，并且减少了初始加载过程中的代码量。