利用dht11与Raspberry Pi构建温湿度监控平台

发表于 2019-09-09

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

硬件

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

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

树莓派引脚图

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

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

# 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，把数据传进网页，如下。

@app.route("/")
def hello():
    templateData=dht11();
    templateData={
    	'temperature' : 23,
    	'humidity' :30,
    }
    return render_template("index.html", **templateData)

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

后端

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

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

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

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

@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，再运行。

具体代码如下

@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)

# 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()

整个后端代码如下

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来写，界面如下

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

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);
},

定时浇灌的函数

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('发送浇灌信息失败,请再次尝试');
  });
},

温湿度监控报警

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

前端除虫记

发表于 2019-08-20

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

页面组件的结构如下

.
├── 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中有一个计算属性

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

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

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

在vue项目中尝试Mock.js

发表于 2019-08-19 | 更新于 2019-08-20

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

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

项目结构：

.
├── 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，内容为：

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这个地址

<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的引入注释掉，请求就不会被拦截了。

近况

发表于 2019-07-25 | 更新于 2019-08-16

讲讲最近的事情吧

阅读全文 »

JavaScript中的引用类型Array

发表于 2019-05-11 | 更新于 2019-05-13

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");

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

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的值，然后返回移除的项。

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()，可以像使用队列一样使用数组。

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()方法的是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的不是数组，这些值就会被简单地添加到结果数组的末尾。

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()方法不会影响原数组。

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”。

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。

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()函数利用指定的函数确定是否在返回的数组中包含某一项。

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()也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。

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循环迭代数组一样

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

归并方法

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

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

vue的生命周期

发表于 2019-05-06 | 更新于 2019-05-18

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中的循环与遍历

发表于 2019-05-01 | 更新于 2019-05-05

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

do-while语句

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

1
2
3

do{
    statement
}while(expression);

while语句

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

1	while(expression) statement

for语句

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

语法

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

示例

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

可以用while改写以上代码

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的值

绝对定位和相对定位

发表于 2019-04-29

先开个坑，写完作业再填。

行内元素和块元素

发表于 2019-04-15 | 更新于 2019-05-01

这几天在学长学姐的一个公司那边跟着学前端，基本都还是写一个界面为主，在写CSS的时候就碰到了行内元素和块元素这两个知识点，这里做个整理，方便以后回顾。

行内元素（inline）

内容决定所占空间的多少，内容多少就占多少空间
不能换行
不能设置宽高（默认宽高是0）
margin垂直方向无效（margin-top,margin-bottom）,若设置垂直方向用line-height属性
当多个行内元素排列在一起，他们之间会出现空格

常见行内元素有

a buttun span input label 等，具体可查阅行内元素

块级元素（block）

不管内容多少，块元素都会在浏览器中独占一行，即有多个块元素时，会从上至下排列
可设置宽高，如果不设置宽高那么它的宽度是100%，即占满父级元素一整行
相邻外边距会重叠，比如margin-bottom和margin-top重叠（可用padding或border解决）

常见的块级元素有

div h1-h6 p ul li 等，具体可查阅块级元素

行内块元素（inline-block）

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
不自动换行
能够识别宽高
默认排列方式为从左到右

我们可以通过设置display的属性，来操纵一个元素是哪类元素。

1
2
3

display:inline;
display:block;
display:inline-block;

阿里前端面试所感

发表于 2019-03-30

今天下午接到了阿里的面试电话，是一次严格意义上的技术面试了。虽然有提前通知过，我也认认真真地准备了一下，但有些方面还是答的不尽人意吧。

~~好了下面的不用看了，已经被拒了【2019.3.28】~~

面试过程

面试的形式也挺有意思的，面试官通过询问我之前的学习经历，刷过的题，来提出一些问题。我挑了一个JavaScript 使用循环语句查找通讯录，这道题当时因为怎么都通过不了，去百度查了一样的题，代码也一模一样，但就是无法Accept。他让我口述一下要如何去实现这一功能。我的思路是用for循环，遍历数组，然后通过对象的相关的操作，找到要返回的联系人的指定信息。找不到则返回“找不到该联系人”等信息。

这里他问了一个let、var的问题，简单来说就是var定义的变量会提升到作用域的顶部，而let不会。

此外，他还问了==与===，对于==，如果双方类型不同，就会进行强制类型转换，而===是直接判断二者的类型和值是否相同。

还有，比如当我访问的对象的属性不存在时会返回null还是undefined【这里我好像回答错了呃啊！】然后问可以用什么来判断变量的类型，这个问题刚好前几天看书有看到，typeof与instanceof，typeof对于原始类型，除了null都可以显示正确类型，对于对象类型，除了函数都会显示object。所以typeof并不能准确判断变量类型。

然后他又问了null和undefined的关系。null和undefined都表示值的空缺，但二者并不等价，undefined的类型就是undefined，null可能用typeof输出的是对象，但其实也是js的一个bug，在早前，js为了性能使用低位存储变量的类型信息，000开头代表对象，而null对应的是全0，所以也会错误地判断为object。

然后我们聊到了我最近看的Vue.js做过的一个购物车实战练习。我给他讲解了我是如何给购物车加上复选框，并只计算选中商品的价格。

然后他问了除了for (let i = 0; i < this.list.length; i++)这种类型的循环，还能用什么循环来遍历数组，我还以为是让我别用for，那用啥呀，while呀！后来想到是不是让我用for xxx in xxxArray这种形式。

后面是问我是怎么去获取实例中的数据还是啥，有点记不清了，反正我答的莫名其妙感觉。我只知道我那边是这么写var item = this.list[i];，我讲出来的时候还挺希望他问我this这个关键字的，因为前几天看书刚好看到过……

然后问我有什么方法可以去获取HTML中的DOM节点，利用原生JS获取DOM的节点，这个我只记得document.getElementById和document.getElementsByClassName，其实还有getElementsByName通过name属性、getElementsByTagName通过标签名、querySelector通过选择器获取一个元素、querySelectorAll通过选择器获取一组元素。然后问我通过document.getElementById得到会是一个什么类型的变量，我那时回答的是数组，因为我记得我以前用的时候后面会跟一个方框号去索引。聊完以后我自己打开控制台写了一下，返回的也的确是数组类型，长舒一口气……

此外的话还问了break、continue、return这三个会有什么功能，break会跳出循环，并执行循环之后的语句，continue会跳过循环内之后的语句，进入下一次循环，然后return我就回答的有点傻了，前后被他追问后把自己搞的自相矛盾了……return只能用在函数里，当遇到return后，会直接结束函数并返回值。

然后问了点数据结构相关的东西，用熟悉的语言描述一下怎么产生一个双链表，双链表怎么操作去替换中间的一个结点。由于这门课过去太久了，如何构造双链表的代码并不是记得很清，按着自己的思路大致的描述了一下。关于如何替换结点，思路也很清晰，先把新结点拉到链表里来，前后的关系都建立好，然后再把原阶段的前后指针指向空然后把内存释放掉。

然后他问了我的学习策略和学习路线。说实话这学期头也不回一脚扎进前端学东西，但并没有去仔细思考过自己到底要往那个技术栈发展，虽然很多人都吹嘘现在应该是全栈的时代了，但对个人而言也总得有个先后次序吧。小目标的话就是这学期能学完Vue.js以及另外一个前端框架，再看点Node.js，并找到一份相关的实习工作，在工作中进一步去学习，然后转行？创业？我尚不能想清楚，但未来该如何发展，是一个值得经常去思考的问题……
最后，技艺不精，甘拜下风，继续努力吧

思考

昨天看到自己Rejected时候，没有失落，倒觉得是意料之中，毕竟自己回答得也一般般，阿里也不是这么好进的。但我错误地将失败原因全部归结于自己的基础薄弱，项目经历少。今天在微博刷到两篇文章，阅读完毕后才后知后觉地知道，这一次失败有着多方面的因素。

先贴文章链接
为何面试时都会问你的职业规划呢？该如何回答呢？
我是如何拿到蚂蚁金服实习 offer 的

基础薄弱

基础还是不行，相关项目经历太少，数据结构与算法的知识也得开始回顾了，要制定一个学习计划并每天履行，要更加努力的学习并寻找项目机会，

没有清晰的职业规划

终于能理解学校开设大学生职业规划课的意义了。工作也得寻求发展，我不可能在一个职位上呆一辈子，总会寻找机会晋升或跳槽。但不应该只是泛泛而谈，比如“xx年后，要成为xx经理、总监”这种谁都会说的话，更多的得是“实习期的目标”，“今年的目标”，“未来三年、十年的目标”

没把握好提问的机会

最后他问我有什么问题的时候，我只问了刚刚有一道我没回答出来的题，但其实非常地愚蠢。我需要了解的有

公司内部的培训晋升机制（代表我们是否能迅速学到新东西）

对应岗位的成长路径（之前这个岗位的人去哪了？升职了？换团队了？）

直线经理对于这个岗位的成长预期（意味着他会花多少精力培养你，给你多少资源）

阿里面试的失败，是因为自己的幼稚、技艺不精。也正是因为此次失败，能让自己清楚地认识到自己的处境

~~下午还想了半天是不是滚去考研比较好，现在还是决定这条路继续走下去了~~

It’s a long way

硬件

软件

后端

前端

方法