0%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
const _String = Object.prototype.toString;

// 获取类型
function getType(item) {
return _String.call(item).slice(8, -1);
}
// 判断类型
function isType(item, type) {
return item && type && item === type;
}

// 考虑值是否是简单对象
// 1,该对象的返回原先必须是对象原型链,就是他自身
// 2.是否为window对象
// 3.是否object类型
function isPlianObejct(obj) {
return (
Object.getPrototypeOf(obj) === Object.prototype &&
isWindow(obj) &&
isType(obj, 'Object')
);
}
// 考虑window是否为window(undefined)的情况
function isWindow(obj) {
return obj != null && obj === obj.window;
}

// 拓展方法
function extend() {
let target = arguments[0] || {},
i = 1,
lens = arguments.length,
deep = false;

let options, //待拷贝容器
name, // 待拷贝容器的子项名称
src, // 目标的子项内容
copy, // 待拷贝容器的子项拷贝对象
copyIsArr, // 拷贝对象是否为数组
clone; // 需要再拷贝的内容

// 如果参数第一个布尔值的话,则判断是否需要深拓展拷贝
if (typeof target === 'boolean') {
deep = target;
// 将被拷贝值往后退一位
target = arguments[1];
// 同时被拷贝的项也往后推一位
i++;
}
// 如果目标值不是对象,而且也不是方法的话,必须初始化为对象。
if (typeof target !== 'object' && isType(target, 'Function')) {
target = {};
}

// 如果参数长度等于初始化值的话
// 待拷贝目标属于自身,同时将被拷贝内容序号往前推一位。
if (i === lens) {
target = this;
i--;
}

// 开始正式拷贝
for (; i < lens; i++) {
// 将被拷贝对象赋值给otpions,同时必须保证对象不能为null
if ((options = arguments[i]) != null) {
// 循环options对象赋值给target
for (name in options) {
src = target[name];
copy = options[name];

// 如果拷贝对象和被拷贝的相等 则跳过该阶段的迭代,走一轮
if (src === copy) {
continue;
}

// 如果存在copy的值,且是深拷贝模式,且copy属于简单对象or属于数组对象
if (
deep &&
copy &&
isPlianObejct(copy || (copyIsArr = isType(copy, 'Array')))
) {
if (copyIsArr) {
// 如果为数组对象,则判断src是否为数组对象,
// 如果是则赋值,不是则初始化数组[]
clone = src && isType(src, 'Array') ? src : [];
} else {
// 同理
// 如果src为简单对象,则判断src是否为数组对象,
// 如果是则赋值,不是则初始化数组[]
clone = src && isPlianObejct(obj) ? src : {};
}
// 递归该方法,不断往里面拷贝拓展
target[name] = extend(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
}
阅读全文 »

  • 400

    • 原因
      • 前后端的约定格式不同
      • 前后端的约定字段不同
    • 解决方法
      • 对照约定字段,保持保持一致性
      • 如果格式不同,可以使用JSON.Stringfy()将 JSON 序列化,或者JSON.parse(),将字符串转为 JSON
  • 401

    • 原因
      • 当前请求需要验证
    • 解决方法
      • 前端是否越过登录请求?
      • Unauthorized 是否授权,检查 token
  • 403

    • 原因:
      • 服务器接收到了,但是拒绝执行
    • 解决方法
      • 你的 IP 被列入黑名单
      • 后端检查是否有执行权限
      • 是否https,检查SSL是否正确
      • 配置文档
      • ….这个 403 问题原因,需要具体检查 (查看)[https://www.jianshu.com/p/d6252144bf1a]

什么是 BOM?

BOM(Browser Object Model)即浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象。由于 BOM 主要用于管理窗口与窗口之间的通讯,因此其核心对象是 window。

相关方法(属性)

弹出框

1
window.alert()

URL 的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 当前 HTML 的 URL
location.href
// https://www.baidu.com/lastpath/go?name=zhangshan&id=89785#index

// 查询字符串部分
location.search
// ?name=zhangshan&id=89785

// #号后面的值
location.hash
// #index

// 域名
location.host
// www.baidu.com

// 主域名
location.hostname
// baidu.com

// 主域名后面部分/路径
location.pathname
// lastpath/go

// 端口号
location.port
// 80(默认端口号)

// 协议部分
location.protocal
// https:

// 加载指定的URL
location.assign()

// 替换指定的URL,不同于assgin,无法返回
location.replace()

// 刷新
location.reload()
阅读全文 »

apply

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Function.prototype.myApply = function(context,args){
// 如果是调用自己,则返回undefined
if(this===Function.prototype) return false;

context=context || window;

var fn = Symbol(),
result;

context[fn]=this;

if(Array.isarray(args)){
result = context[fn](...args);
}else{
result = context[fn]();
}

delete context[fn];
return result;
}
阅读全文 »

Promise的基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let promise = new Promise((resolve, reject) => {
console.log(1)
// 如果执行失败,则调用reject()
// reject('fail')

console.log(2)

// 如果执行成功,则调用resolve()
resolve('success')
})

// 如果执行成功,则继续调用then方法
promise.then(res => {
// console.log(res)
console.log(3)
})

// 如果执行失败,则用catach捕获失败
promise.catch(err => {
console.log(err)
console.log(4)
})
阅读全文 »

什么是解构?

按照一定的模式从数组或者对象中取值,对变量进行赋值的过程称为「解构」

在 ES5 中,为变量赋值只能直接指定值:

1
2
3
4
var a=1,b=2,c=3
a; // 1
b; // 2
c; // 3

但是在 ES6 中,我们可以被允许写成:

1
2
3
4
var [a,b,c]=[1,2,3];
a; // 1
b; // 2
c; // 3
阅读全文 »

定义一些工具函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let _toString = Object.prototype.toString
// 类型库
let map = {
array: 'Array',
object: 'Object',
function: 'Function',
string: 'String',
null: 'Null',
undefined: 'Undefined',
boolean: 'Boolean',
number: 'Number'
}

// 获取类型
let getType = item => {
// console.log(_toString.call(item))
// [object Number]

return _toString.call(item).slice(8, -1) // Number
}

// 判断类型是否相同
let isType = (item, type) => map[type] && map[type] === getType(item)
阅读全文 »

什么是生命周期?

每个 Vue 实例在被创建时都经过了一系列的初始化过程

  • 设置数据监听
  • 编译模板
  • 将实例挂载到 DOM
  • 数据变化时更新 DOM

在这一系列过程中,也会运行一些「生命周期钩子」的函数,用在给开发者在不同阶段添加自己的代码的机会。

「created」钩子,在一个实例被创建后执行代码

1
2
3
4
5
6
7
8
9
10
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
阅读全文 »

  • content
    {:toc}

什么是 Express.js?

它是一个基于 Node.js 平台,快速、开放、极简的 web 开发框架。
在 Express 中就是一个重点:API。这让我们更加注重业务的功能和开发效率。

如何使用 Express.js

1.安装

1
2
cd myproejct
npm install express --save
阅读全文 »

$emit(eventNanme,[…args])

  • 参数:
    • {string} eventName 触发事件名字
    • […args] 附加的参数
  • 用法:
    • 触发当前实例上的事件。附加参数都会传给监听器回调。
  • 使用场景
    • 子组件调用父组件的方法并且传递数据

注意:子组件标签中的时间也不区分大小写要用“-”隔开

阅读全文 »