发表于 | 更新于

栈

栈是一个线性结构，在计算机中是一个相当常见的数据结构。

栈的特点是只能在某一端添加或删除数据，遵循先进后出的原则

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Stack {
  constructor() {
    this.stack = []
  }
  push(item) {
    this.stack.push(item)
  }
  pop() {
    this.stack.pop()
  }
  peek() {
    return this.stack[this.getCount() - 1]
  }
  getCount() {
    return this.stack.length
  }
  isEmpty() {
    return this.getCount() === 0
  }
}

队列

队列也是一个线性结构，特点是在某一端添加数据，在另一端删除数据，遵循先进先出的原则。

单链队列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Queue {
  constructor() {
    this.queue = []
  }
  enQueue(item) {
    this.queue.push(item)
  }
  deQueue() {
    return this.queue.shift()
  }
  getHeader() {
    return this.queue[0]
  }
  getLength() {
    return this.queue.length
  }
  isEmpty() {
    return this.getLength() === 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
class Node {
  constructor(v, next) {
    this.value = v
    this.next = next
  }
}
class LinkList {
  constructor() {
    // 链表长度
    this.size = 0
    // 虚拟头部
    this.dummyNode = new Node(null, null)
  }
  find(header, index, currentIndex) {
    if (index === currentIndex) return header
    return this.find(header.next, index, currentIndex + 1)
    //通过递归不断比对当前下标和目标下标，返回目标下标的Node对象
  }
  addNode(v, index) {
    this.checkIndex(index)
    // 当往链表末尾插入时，prev.next 为空
    // 其他情况时，因为要插入节点，所以插入的节点
    // 的 next 应该是 prev.next
    // 然后设置 prev.next 为插入的节点
    let prev = this.find(this.dummyNode, index, 0)
    prev.next = new Node(v, prev.next)
    this.size++
    return prev.next
  }
  insertNode(v, index) {
    return this.addNode(v, index)
  }
  addToFirst(v) {
    return this.addNode(v, 0)
  }
  addToLast(v) {
    return this.addNode(v, this.size)
  }
  removeNode(index, isLast) {
    this.checkIndex(index)
    index = isLast ? index - 1 : index
    let prev = this.find(this.dummyNode, index, 0)
    let node = prev.next
    prev.next = node.next
    node.next = null
    this.size--
    return node
  }
  removeFirstNode() {
    return this.removeNode(0)
  }
  removeLastNode() {
    return this.removeNode(this.size, true)
  }
  checkIndex(index) {
    if (index < 0 || index > this.size) throw Error('Index error')
  }
  getNode(index) {
    this.checkIndex(index)
    if (this.isEmpty()) return
    return this.find(this.dummyNode, index, 0).next
  }
  isEmpty() {
    return this.size === 0
  }
  getSize() {
    return this.size
  }
}

双向链表的实现

双向链表和单向链表相比多了个prior节点，并且在增加节点和删除节点时，需要注意节点操作的顺序。

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
class Node {
  constructor(v, prior, next) {
    this.prior = prior
    this.value = v
    this.next = next
  }
}
class LinkList {
  constructor() {
    // 链表长度
    this.size = 0
    // 虚拟头部
    this.dummyNode = new Node(null, null, null)
  }
  find(header, index, currentIndex) {
    if (index === currentIndex) return header
    return this.find(header.next, index, currentIndex + 1)
    //通过递归不断比对当前下标和目标下标，返回目标下标的Node对象
  }
  addNode(v, index) {
    this.checkIndex(index)
    // 当往链表末尾插入时，prev.next 为空
    // 其他情况时，因为要插入节点，所以插入的节点
    // 的 next 应该是 prev.next
    // 然后设置 prev.next 为插入的节点
    let prev = this.find(this.dummyNode, index, 0)
    prev.next = new Node(v, prev, prev.next)
    this.size++
    return prev.next
  }
  insertNode(v, index) {
    return this.addNode(v, index)
  }
  addToFirst(v) {
    return this.addNode(v, 0)
  }
  addToLast(v) {
    return this.addNode(v, this.size)
  }
  removeNode(index, isLast) {
    this.checkIndex(index)
    index = isLast ? index - 1 : index
    let prev = this.find(this.dummyNode, index, 0)
    let node = prev.next
    prev.next = node.next
    if(!isLast) {
      prev.next.prior = prev
    }
    // node.next = null
    node=null
    this.size--
    return node
  }
  removeFirstNode() {
    return this.removeNode(0)
  }
  removeLastNode() {
    return this.removeNode(this.size, true)
  }
  checkIndex(index) {
    if (index < 0 || index > this.size) throw Error('Index error')
  }
  getNode(index) {
    this.checkIndex(index)
    if (this.isEmpty()) return
    return this.find(this.dummyNode, index, 0).next
  }
  isEmpty() {
    return this.size === 0
  }
  getSize() {
    return this.size
  }
}

发表于

一个老生常谈的问题，一个面试时很大概率出现的问题。

虽然网上也有很多这种文章，这里自己写一篇。一是为了亲自过一遍加深理解和记忆，二是留个档，以便日后回顾。

大致流程

  1. URL 解析
  2. DNS 查询
  3. TCP 连接
  4. 处理请求
  5. 接受响应
  6. 渲染页面

URL解析

首先浏览器会判断你输入的是一个合法的URL还是一个带搜索的关键词，并且根据输入的内容自动完成自动匹配，字符编码等操作。

DNS查询

  1. 浏览器缓存
    浏览器会先检查是否在缓存中，没有则调用系统库函数进行查询。
  2. 操作系统缓存
    操作系统也有自己的 DNS缓存，但在这之前，会向检查域名是否存在本地的 Hosts 文件里，没有则向 DNS 服务器发送查询请求。
  3. 路由器缓存
    路由器也有自己的缓存。
  4. ISP DNS 缓存
    ISP DNS 就是在客户端电脑上设置的首选 DNS 服务器，它们在大多数情况下都会有缓存。
  5. 根域名服务器查询
    在前面所有步骤没有缓存的情况下，本地 DNS 服务器会将请求转发到互联网上的根域
什么是dns劫持？

dns劫持是一种互联网攻击，通过攻击域名解析服务器（DNS），或伪造域名解析服务器（DNS）的方法，把目标网站域名解析到错误的地址从而实现用户无法访问目标网站的目的。

DNS-Prefetch是什么？

DNS预解析是一种前端优化的手段。为了帮助浏览器对某些域名进行预解析，我们可以在html标签中添加

1
<link rel="dns-prefetch" href="//domain.com">

TCP连接

  1. 应用层：发送 HTTP 请求
    在前面的步骤我们已经得到服务器的 IP 地址，浏览器会开始构造一个 HTTP 报文，其中包括：

请求报头（Request Header）：请求方法、目标地址、遵循的协议等等
请求主体（其他参数）

  1. 传输层：TCP 传输报文
    传输层会发起一条到达服务器的 TCP连接，为了方便传输，会对数据进行分割（以报文段为单位），并标记编号，方便服务器接受时能够准确地还原报文信息。

在建立连接前，会先进行 TCP三次握手。

什么是三次握手？

第一次握手：Client将标志位SYN置为1，随机产生一个值seq=J，并将该数据包发送给Server，Client进入SYN_SENT状态，等待Server确认。
第二次握手：Server收到数据包后由标志位SYN=1知道Client请求建立连接，Server将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给Client以确认连接请求，Server进入SYN_RCVD状态。
第三次握手：Client收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给Server，Server检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入ESTABLISHED状态，完成三次握手，随后Client与Server之间可以开始传输数据了。

  1. 网络层：IP协议查询Mac地址
    将数据段打包，并加入源及目标的IP地址，并且负责寻找传输路线。

判断目标地址是否与当前地址处于同一网络中，是的话直接根据 Mac 地址发送，否则使用路由表查找下一跳地址，以及使用 ARP 协议查询它的 Mac 地址。

  1. 数据链路层：以太网协议
    以太网协议
    根据以太网协议将数据分为以“帧”为单位的数据包，每一帧分为两个部分：

标头：数据包的发送者、接受者、数据类型
数据：数据包具体内容

处理请求

当数据包到达服务端后，它也通过数据链路层、网络层、传输层、应用层。通过层层解析，服务端拿到客户端发送的http报文，对内容进行解析、处理，并将所需要的静态文件等，通过刚刚的路径传回客户端。

接受响应

浏览器接收到来自服务器的响应资源后，会对资源进行分析。

首先查看 Response header，根据不同状态码做不同的事（比如上面提到的重定向）。

然后，对响应资源做缓存。

接下来，根据响应资源里的 MIME 类型去解析响应内容（比如 HTML、Image各有不同的解析方式）。

渲染页面

浏览器会解析HTML文件生成DOM树，解析CSS文件生成CSS规则树，然后二者会合并成一颗渲染树。

渲染树会忽略那些不需要渲染的节点，比如设置了display:none的节点。

计算
通过计算让任何尺寸值都减少到三个可能之一：auto、百分比、px，比如把rem转化为px。

级联
浏览器需要一种方法来确定哪些样式才真正需要应用到对应元素，所以它使用一个叫做specificity的公式，这个公式会通过：

  • 标签名、class、id
  • 是否内联样式
  • !important

然后得出一个权重值，取最高的那个。

渲染阻塞

当遇到一个script标签时，DOM 构建会被暂停，直至脚本完成执行，然后继续构建 DOM 树。
但如果 JS 依赖 CSS 样式，而它还没有被下载和构建时，浏览器就会延迟脚本执行，直至 CSS Rules 被构建。
所有我们知道：

  • CSS 会阻塞 JS 执行
  • JS 会阻塞后面的 DOM 解析

为了避免这种情况，应该以下原则：

  • CSS 资源排在 JavaScript 资源前面
  • js 放在 HTML 最底部，也就是 前

布局与绘制

确定渲染树种所有节点的几何属性，比如：位置、大小等等，最后输入一个盒子模型，它能精准地捕获到每个元素在屏幕内的准确位置与大小。

然后遍历渲染树，调用渲染器的 paint() 方法在屏幕上显示其内容。

回流与重绘

回流(reflow)

当浏览器发现某个部分发现变化影响了布局时，需要倒回去重新渲染，会从html标签开始递归往下，重新计算位置和大小。
reflow基本是无法避免的，因为当你滑动一下鼠标、resize 窗口，页面就会产生变化。

重绘(repaint)

改变了某个元素的背景色、文字颜色等等不会影响周围元素的位置变化时，就会发生重绘。
每次重绘后，浏览器还需要合并渲染层并输出到屏幕上。
回流的成本要比重绘高很多，所以我们应该尽量避免产生回流。

比如：

display:none 会触发回流，而 visibility:hidden 只会触发重绘。

JavaScript 编译执行

1.词法分析

JS 脚本加载完毕后，会首先进入语法分析阶段，它首先会分析代码块的语法是否正确，不正确则抛出“语法错误”，停止执行。
几个步骤：

分词，例如将var a = 2，，分成var、a、=、2这样的词法单元。
解析，将词法单元转换成抽象语法树（AST）。
代码生成，将抽象语法树转换成机器指令。

2.预编译

JS 有三种运行环境：

  • 全局环境
  • 函数环境
  • eval

每进入一个不同的运行环境都会创建一个对应的执行上下文，根据不同的上下文环境，形成一个函数调用栈，栈底永远是全局执行上下文，栈顶则永远是当前执行上下文。
创建执行上下文
创建执行上下文的过程中，主要做了以下三件事：

  • 创建变量对象
    • 参数、函数、变量
  • 建立作用域链
    • 确认当前执行环境是否能访问变量
  • 确定 This 指向

3.执行

虽然 JS 是单线程的，但实际上参与工作的线程一共有四个：

其中三个只是协助，只有 JS 引擎线程是真正执行的

  • JS 引擎线程：也叫 JS 内核，负责解析执行 JS 脚本程序的主线程，例如 V8 引擎
  • 事件触发线程：属于浏览器内核线程，主要用于控制事件，例如鼠标、键盘等，当事件被触发时，就会把事件的处理函数推进事件队列，等待 JS 引擎线程执行
  • 定时器触发线程：主要控制setInterval和setTimeout，用来计时，计时完毕后，则把定时器的处理函数推进事件队列中，等待 JS 引擎线程。
  • HTTP 异步请求线程：通过XMLHttpRequest连接后，通过浏览器新开的一个线程，监控readyState状态变更时，如果设置了该状态的回调函数，则将该状态的处理函数推进事件队列中，等待JS引擎线程执行。

宏任务

分为：

  • 同步任务：按照顺序执行，只有前一个任务完成后，才能执行后一个任务
  • 异步任务：不直接执行，只有满足触发条件时，相关的线程将该异步任务推进任务队列中，等待JS引擎主线程上的任务执行完毕时才开始执行，例如异步Ajax、DOM事件，setTimeout等。

微任务

微任务是ES6和Node环境下的，主要 API 有：Promise，process.nextTick。
微任务的执行在宏任务的同步任务之后，在异步任务之前。

发表于

这次学校短学期的课题是利用dht11与树莓派做一个温湿度监控平台，要求能实现实时显示，查询历史，定时浇灌，报警等功能。

硬件

dht11是一款有已校准数字信号输出的温湿度传感器。 其精度湿度+-5%RH， 温度+-2°C，量程湿度20-90%RH， 温度0~50°C。

首先我们要从dht11上读出温湿度，dht11分别有3个引脚，分别为VCC、GND和DOUT，DOUT为数据输出的引脚。

树莓派引脚图

树莓派引脚图

我们将DOUT接在物理引脚7脚上，代码如下

因为我们选了BCM模式，所以代码中的引脚编号是4

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
# dht11.py
import time
import RPi.GPIO as GPIO


def calTemp():
    channel = 4
    data = []
    j = 0

    GPIO.setmode(GPIO.BCM)

    time.sleep(1)

    GPIO.setup(channel, GPIO.OUT)
    GPIO.output(channel, GPIO.LOW)
    time.sleep(0.02)
    GPIO.output(channel, GPIO.HIGH)
    GPIO.setup(channel, GPIO.IN)

    while GPIO.input(channel) == GPIO.LOW:
        continue
    while GPIO.input(channel) == GPIO.HIGH:
        continue

    while j < 40:
        k = 0
        while GPIO.input(channel) == GPIO.LOW:
            continue
        while GPIO.input(channel) == GPIO.HIGH:
            k += 1
            if k > 100:
                break
        if k < 8:
            data.append(0)
        else:
            data.append(1)

        j += 1

    humidity_bit = data[0:8]
    humidity_point_bit = data[8:16]
    temperature_bit = data[16:24]
    temperature_point_bit = data[24:32]
    check_bit = data[32:40]

    humidity = 0
    humidity_point = 0
    temperature = 0
    temperature_point = 0
    check = 0

    for i in range(8):
        humidity += humidity_bit[i] * 2 ** (7 - i)
        humidity_point += humidity_point_bit[i] * 2 ** (7 - i)
        temperature += temperature_bit[i] * 2 ** (7 - i)
        temperature_point += temperature_point_bit[i] * 2 ** (7 - i)
        check += check_bit[i] * 2 ** (7 - i)

    tmp = humidity + humidity_point + temperature + temperature_point

    if check == tmp:
        # print "temperature :", temperature, "*C, humidity :", humidity, "%"
		    return {'datetime':int(time.time()),'temperature' : temperature,'humidity' :humidity,}
    else:
        # print "wrong"
        # print "temperature :", temperature, "*C, humidity :", humidity, "% check :", check, ", tmp :", tmp
		    return {'datetime':int(time.time()),'temperature' : temperature,'humidity' :humidity,'error':1}

    GPIO.cleanup()

软件

好了，温度读取完成了，该思考怎么把数据反馈到网页上了，老师建议我们用Flask来做，并给了我们一份材料。材料中给的范例是在拿到温湿度数据后，利用render_template，把数据传进网页，如下。

1
2
3
4
5
6
7
8
@app.route("/")
def hello():
    templateData=dht11();
    templateData={
    	'temperature' : 23,
    	'humidity' :30,
    }
    return render_template("index.html", **templateData)

这时我想，既然都用到Flask了，为何不能做一下前后端分离呢？

后端

上网查了一下利用Flask架设后端服务器的相关知识，写了一个获取温湿度数据的接口。

1
2
3
4
@app.route("/getData", methods=['GET'])
def home():
    response=dht11.calTemp()
    return jsonify(response)

历史查询功能，乍一想可能需要上个数据库，但无奈技艺不精，选择了将数据保存在json文件中去进行反复的读写。

同时新增了一个历史查询的接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@app.route("/getData", methods=['GET'])
def home():
    list=[]
    response=dht11.calTemp()
    with open("./data.json",'r+') as f:
        if os.path.getsize('./data.json')==0:
            list.append(response)
            json.dump(list,f)
        else:
            list=json.load(f)
            list.append(response)
            f.seek(0)
            f.truncate()
            json.dump(list,f)
    return jsonify(response)

@app.route("/getHistory", methods=['GET'])
def history():
    with open("./data.json",'r+') as f:
        res=json.load(f)
    return jsonify(res)

还有一个定时浇灌的功能，我们用led灯去模拟浇灌系统，由前端传一个时间戳和浇灌时间，然后进入一个死循环，去判断设定时间和当前时间是否相等，再进行浇灌。

这里涉及到一个问题，进入死循环后，其他操作无法进行，整个程序会卡死在这一步直到到达预定的时间，一开始以为可以用多线程来解决，就去看了一下thread，后来操作了一下发现还是无解。之后经老师指点，建议我使用多进程试一试，便用了multiprocessing实现多进程，可以在进入死循环的同时，其余功能也正常运行。

之后这里还有一个小问题，传回来的时间戳和python自己获取当前时间的时间戳貌似很难相等，猜测应该是程序本身运行也需要时间，无法做到如此精确，便更改了一下设计思路，前端传回设定时间和当前时间的时间差，然后进入程序后先sleep，再运行。

具体代码如下

1
2
3
4
5
6
7
8
9
10
11
12
@app.route("/lightLed",methods=['GET'])
def light():
    sleepTime=request.args.get("sleepTime")
    lightTime=request.args.get("lightTime")
    p=multiprocessing.Process(target=led.lightLED,args=(sleepTime,lightTime,))
    p.start()
    response={
        'light':'true',
        'sleeptime':sleepTime,
        'lighttime':lightTime,
    }
    return jsonify(response)
1
2
3
4
5
6
7
8
9
10
11
12
13
# led.py
import time
import RPi.GPIO as GPIO

def lightLED(sleepTime,lightTime):
    GPIO.setmode(GPIO.BCM)
    time.sleep(float(sleepTime)
    GPIO.setup(27, GPIO.OUT)
    GPIO.output(27, GPIO.HIGH)
    time.sleep(float(lightTime))
    GPIO.output(27, GPIO.LOW)
    time.sleep(1)
    GPIO.cleanup()

整个后端代码如下

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
from flask import Flask, render_template, jsonify, request
from flask_cors import CORS
import datetime
import dht11
import led
import json
import time
import os
import multiprocessing
app = Flask(__name__)
CORS(app, resources={r"/getData": {"origins": "*"}})
CORS(app, resources={r"/lightLed": {"origins": "*"}})
CORS(app, resources={r"/getHistory": {"origins": "*"}})

@app.route("/getData", methods=['GET'])
def home():
    list=[]
    response=dht11.calTemp()
    with open("./data.json",'r+') as f:
        if os.path.getsize('./data.json')==0:
            list.append(response)
            json.dump(list,f)
        else:
            list=json.load(f)
            list.append(response)
            f.seek(0)
            f.truncate()
            json.dump(list,f)
    return jsonify(response)

@app.route("/getHistory", methods=['GET'])
def history():
    with open("./data.json",'r+') as f:
        res=json.load(f)
    return jsonify(res)

@app.route("/lightLed",methods=['GET'])
def light():
    sleepTime=request.args.get("sleepTime")
    lightTime=request.args.get("lightTime")
    p=multiprocessing.Process(target=led.lightLED,args=(sleepTime,lightTime,))
    p.start()
    # led.lightLED(lightTime)
    response={
        'light':'true',
        'sleeptime':sleepTime,
        'lighttime':lightTime,
    }
    return jsonify(response)

if __name__ == '__main__':
    app.run(host='0.0.0.0',port=5000,threaded=True)

后端和前端运行在同一个路由器下，所以运行在0.0.0.0地址，这样前端可以直接用树莓派所在的ip访问到。

前端

前端用了自己比较擅长的vue来写，界面如下



向后端请求数据的相关操作如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
methods: {
  async getData() {
    let res = await this.$http.get('http://172.20.10.4:5000/getData');
    this.obj=res.body;
    // this.obj.data=this.obj.data*1000;
    this.tableData.unshift(res.body);
    this.tempOptions.series[0].data[0].value = res.body.temperature * 2.7;
    this.tempOptions.series[0].data[0].name = res.body.temperature + '°C';
    this.tempOptions.series[0].data[1].value = (100 - res.body.temperature) * 2.7;
    this.humiOptions.series[0].data[0].value = res.body.humidity * 2.7;
    this.humiOptions.series[0].data[0].name = res.body.humidity + '%';
    this.humiOptions.series[0].data[1].value = (100 - res.body.humidity) * 2.7;
  },
}
created() {
  this.timer = setInterval(this.getData, 5000);
},
beforeDestroy() {
  clearInterval(this.timer);
},

定时浇灌的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
async lightLed() {
  let now = new Date().getTime()
  let setTime = this.setTime.getTime();
  let sleepTime = (setTime-now)/1000;
  let lightTime = this.lightTime;
  await this.$http.get(`http://172.20.10.4:5000/lightLed?sleepTime=${sleepTime}&lightTime=${lightTime}`).then(res => {
    this.$message({
      message: '成功发送浇灌信息',
      type: 'success'
    });
    this.lightTime = '';
  },
  err => {
    this.$message.error('发送浇灌信息失败,请再次尝试');
  });
},

温湿度监控报警

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
watch: {
  'obj': function(obj){
    if(obj.temperature>37){
      this.$notify({
        title: '警告',
        message: '温度过高！',
        type: 'warning'
      });
    };
    if(obj.humidity>70){
      this.$notify({
        title: '警告',
        message: '湿度过高！',
        type: 'warning'
      });
    }
  }
},

GitHub地址：dht11-flask-vue

发表于

前几天，在工作中遇到了一个业务上的bug，具体情境就是，在一个页面对表格进行还原数据后，切换到表格页，依旧显示还原前的数据，刷新一下才会正常。

页面组件的结构如下

1
2
3
4
5
6
7
.
├── ReportStep.vue
│   └── Profile.vue
│       └── Profile.vue
│           └── PubVerCard.vue
└── TableStep.vue
    └── TableDesigner.vue

其中在ReportStep中创建了一个Vuex实例，Profile中也创建了一个Vuex实例。

还原数据的操作在PubVerCard中，还原后会执行this.$store.commit('init',response.body)

表格在TableStep页面中的TableDesigner中，TableDesigner中有一个计算属性

1
2
3
4
computed: mapState({
            columnConfigs: state => state.table.config.columnConfigs,
            tableConfig: state => state.table.config
          }),

Profile创建的实例将ReportStep中的实例覆盖了，导致PubVerCard中还原的数据只把Profile中的数据还原了，而表格的数据是从ReportStep中获取的，所以只是在切换路由的时候，不会触发ReportStep中的created，故切换回去时，数据还是还原之前的数据。

当刷新时，ReportStep重新加载，触发created，使整个页面从后台重新获取数据，导致数据又恢复正常。

发表于 | 更新于

再也不想撸完页面然后摸鱼半天只为了等后端的数据了，咱们自己也可以造数据！

安装方法什么的就不讲了，都知道的，我贴一下如何配置吧。

项目结构：

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
.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── mock
│   │   └── index.js
│   ├── router
│   │   └── index.js
│   └── test.vue
└── static

在 src 文件夹下新建一个mock文件夹，再在文件夹里新建一个index.js，内容为：

1
2
3
4
5
6
7
8
9
import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
 
let data = {
    'sstr': Random.string(2,10),
    'nnum': Random.integer(1,100)
}

Mock.mock('/data/index', 'get', data) // 根据数据模板生成模拟数据

再在main.js中加一条require('./mock');

再在页面中，请求/data/index这个地址

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
<template>
  <div>
    <div>
      <span>{{obj.sstr}}</span>
      <span>{{obj.nnum}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj:{
        sstr:'',
        nnum:0
      }
    }
  },
  methods:{
    async getInfo(){
      let res= await this.$http.get('/data/index');
      console.log(res);
      this.obj=res.body;
    }
  },
  created(){
    this.getInfo();
  }
}
</script>

效果如下，Mock成功拦截此次请求，然后返回自己生成的模拟数据。
tryMock

还有一种操作是利用cross-env创建一个dev环境，一个mock环境，不过在配置的时候总有莫名的报错，遂放弃。目前这种方法在前后端联调的时候可以把main.js中对mock的引入注释掉，请求就不会被拦截了。

发表于 | 更新于

js数组的每一项可以保存任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，第二个位置来保存数组，用第三个位置保存对象。并且，数组的大小是可以动态调整的。

创建数组的基本方式有两种。第一种是使用Array构造函数

1
var colors=new Array();

若预先知道数组要保存的项目的数量，也可给构造函数传递Length的值。

1
var colors=new Array(20);

也可以向Array函数传递数组中应该包含的项

1
var colors=new Array("red","blue","green");

当然，给构造函数传递一个值，也可以创建数组，但情况会比较复杂。

1
2
var colors=new Array(3); //创建一个长度为3的空数组
var names=new Array("grey");

第二种方法是使用数组字面量表示法，数组字面量由一对包含数组项的方括号去表示，多个数组项之间以逗号隔开。

1
2
3
4
var colors=new Array["red","blue","green"];
var names=[];
var values=[1,2,]; //Don't do this 这样会创建一个2或3项的数组
var options=[,,,,,]; //Don't do this 这样会创建一个5或6项的数组

方法

转换方法

数组继承的toLocaleString()、toString()和valueOf()方法，在默认情况下会以逗号分隔的字符串的形式返回数组项。而如果使用join()方法，则可以使用不同的分隔符来构建这个字符串。
join()方法只接收一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。

1
2
3
var colors=["red","green","blue"];
console.log(colors.join(",")); //red,green,blue
console.log(colors.join("||")); //red||green||blue
栈方法

数组可以表现得像栈一样。栈是一种LIFO（Last-In-First-Out）的数据结构。栈中项的插入和移除只发生在一个位置——栈的顶部。

push()方法可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后的数组的长度。
pop()方法则从数组末尾移除最后一项，减少数组Length的值，然后返回移除的项。

1
2
3
4
5
6
7
8
var colors=new Array();
var count=colors.push("red","green");
console.log(count); //2
count=colors.push("black");
console.log(count); //2
var item=colors.pop();
console.log(item); //"black"
console.log(colors.length); //2
队列方法

栈数据结构的访问规则是LIFO。而队列数据结构的访问规则是FIFO（First-In-First-Out）。队列在列表末端添加项，从列表的前端移除项。
shift()方法能够移除数组中的第一个项并返回该项，同时将数组长度减1。结合push()和shift()，可以像使用队列一样使用数组。

1
2
3
4
5
6
7
8
var colors=new Array();
var count=colors.push("red","green");
console.log(count); //2
count=colors.push("black");
console.log(count); //3
var item=colors.shift();
console.log(item); //"red"
console.log(colors.length); //2

同时还有一个unshift()方法，它能在数组前端添加任意个项并返回新的数组长度。因此，同时使用unshift()和pop()方法，可以从相反的方向来模拟队列，即在数组的前端添加项，从数组末端移除项。

小结

push()方法从数组末端添加项，可一次性添加多个，并返回修改后数组的长度
pop()方法从数组末端移除项，一次只可移除一个并返回移除的项的值
unshift()方法从数组前端添加项，可一次性添加多个，并返回修改后数组的长度
shift()方法从数组前端移除项，一次只可移除一个并返回移除的项的值

操作方法

concat()方法可以基于当前数组中的所有项创建一个新数组。具体来说，这个方法会先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本。如果传给concat()方法的是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的不是数组，这些值就会被简单地添加到结果数组的末尾。

1
2
3
4
var colors=["red","green","blue"];
var colors2=colors.concat("yellow",["black","brown"]);
console.log(colors); //red,green,blue
console.log(colors2); //red,green,blue,yellow,black,brown

slice()方法能够基于当前数组中的一个或多个项创建一个新数组。slice()方法可以接受一个或两个参数，即要返回项的起始和结束位置。
在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项。注意！slice()方法不会影响原数组。

1
2
3
4
5
6
var colors=["red","green","blue","yellow","purple"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
console.log(colors); //"red", "green", "blue", "yellow", "purple"
console.log(colors2); //"green", "blue", "yellow", "purple"
console.log(colors3); //"green", "blue", "yellow"

splice()方法有多种用法。其主要用途是向数组的中部插入项，但使用这种方法的方式则有如下3种。

  • 删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2)会删除数组中的前两项。
  • 插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如，splice(2,0,”red”,”green”)会从当前数组的位置2开始插入字符串”red”和”green”。
  • 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice(2,1,”red”,”green”)会删除当前数组位置2的项，然后再从位置2开始插入字符串”red”和”green”。
1
2
3
4
5
6
7
8
9
10
var colors=["red","green","blue"];
var removed=colors.splice(0,1);
console.log(colors); //"green", "blue"
console.log(removed); //"red"
removed=colors.splice(1,0,"yellow","orange");
console.log(colors); //"green", "yellow", "orange", "blue"
console.log(removed); //空数组
removed=colors.splice(1,1,"red","purple");
console.log(colors); //"green", "red", "purple", "orange", "blue"
console.log(removed); //"yellow"
位置方法

有两个位置方法，indexOf()和lastIndexOf()。这两个方法都接收两个参数：要查找的项和表示查找起点位置的索引（可选）。其中indexOf()方法从数组的开头开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。
这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

迭代方法

数组有5个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和运行该函数的作用域对象——影响this的值（可选）。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响方法的返回值。以下是5个迭代方法。

  • every():对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
  • filter():对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。
  • forEach():对数组中的每一项运行给定函数，这个方法没有返回值。
  • map():对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
  • some():对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。
    以上方法都不会修改数组中的包含的值

对every()来说，传入的函数必须对每一项都返回true，这个方法才返回true；否则，它就返回false。而some()方法则是只要传入的函数对数组中的某一项返回true，就会返回true。

1
2
3
4
5
6
7
8
9
var numbers=[1,2,3,4,5,4,3,2,1];
var everyResult=numbers.every(function(item,index,array){
    return (item>2);
});
console.log(everyResult);
var someResult=numbers.some(function(item,index,array){
    return (item>2);
});
console.log(someResult);

filter()函数利用指定的函数确定是否在返回的数组中包含某一项。

1
2
3
4
5
var numbers=[1,2,3,4,5,4,3,2,1];
var filterResult=numbers.filter(function(item,index,array){
    return (item>2);
});
console.log(filterResult);

map()也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。

1
2
3
4
5
var numbers=[1,2,3,4,5,4,3,2,1];
var mapResult=numbers.map(function(item,index,array){
    return item*2;
});
console.log(mapResult);

forEach()方法对数组中的每一项运行传入的函数。这个方法没有返回值，本质上与使用for循环迭代数组一样

1
2
3
4
var numbers=[1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
    //执行某些操作
});
归并方法

reduce()和reduceRight()两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中reduce()方法从数组的第一项开始，逐个遍历到最后。而reduceRight()则从数组的最后一项开始，向前遍历到第一项。
这两个方法都接收两个参数：一个在每一项上调用的函数和作为归并基础的初始值（可选）。传给reduce()和reduceRight()的函数接收四个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

1
2
3
4
5
var values=[1,2,3,4,5];
var sum=values.reduce(function(prev,cur,index,array){
    return prev+cur;
});
console.log(sum);

发表于 | 更新于

vue生命周期图示

  • beforeCreate:在实例初始化之后，数据观测和初始化事件还未开始
  • created:在实例创建完成后被立即调用，完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来，http请求建议在此生命周期内进行，localStorage的操作也最好在这里进行
  • beforeMount:在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
  • mounted:在el被新创建的vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
  • beforeUpdate:在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
  • updated:在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
  • beforeDestroy:在实例销毁之前调用。实例仍然完全可用。
  • destroyed:在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

发表于 | 更新于

前一个相对定位和绝对定位的坑还没动笔，然后昨天自己整理了一下js里的循环

do-while语句

后测试循环语句，只有在循环体中的代码执行之后，才会测试出口条件，即无论如何，循环体中的代码都会执行一次。

1
2
3
do{
    statement
}while(expression);

while语句

前测试循环语句，在循环体内的代码初执行之前，就会对出口条件求值

1
while(expression) statement

for语句

前测试循环语句，但它具有在执行循环前初始化变量和定义循环后要执行的代码的能力。

语法

1
for(initializationl;expression;post-loop-expression) statement

示例

1
2
3
4
var count=10;
for(var i=0;i<count;i++){
    console.log(i);
}

可以用while改写以上代码

1
2
3
4
5
6
var count=10;
var i=0;
while(i<count){
    console.log(i);
    i++;
}

while循环做不到的，for循环一样做不到。for循环只是把与循环有关的代码集中在了一个位置。

for语句的初始化表达式、控制表达式、循环后表达式都是可选的。若全省略便会创建一个无限循环。

for-in语句

它是一种精准的迭代语句，可以用来枚举对象的属性。

1
for(property in expression) statement

它会一直持续到所有属性都被枚举一遍，若要迭代的对象的变量值为null或undefined，for-in会抛出错误。

在ES5中更正了这一行为，对这种情况不再抛出错误，而只是不执行循环体。

for-of语句

在可迭代对象上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值，执行语句。

for-in与for-of

for-in语句以原始插入顺序迭代对象的可枚举属性，for-of语句遍历可迭代对象定义要迭代的数据。

使用for-in会遍历数组所有可枚举属性，包括原型。而for-of适用于遍历数组对象、字符串、map、set等拥有迭代器对象的集合。

forEach方法

该方法属于引用类型Array的一个迭代方法

前段时间在大行星2.0开发的时候用到过这个方法，所以这里提一下

其余迭代方法可参考MDN

语法：

1
arr.forEach(callback [, thisArg]);
  • callback:为数组中每个元素执行的函数，该函数接收三个参数
    • currentValue:数组中正在处理的当前元素
    • index:数组中正在处理的当前元素的索引
    • array:forEach()正在操作的数组
  • thisArg:可选参数，当执行回调函数时，用作this的值