朱阳星的日常 2026-06-20T07:58:44.787Z https://www.zhuyangxing.cn/ 朱阳星 Hexo 20180403_react受控组件与非受控组件区别 https://www.zhuyangxing.cn/2018/04/03/20180403_react%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E4%B8%8E%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E5%8C%BA%E5%88%AB/ 2018-04-03T15:44:21.000Z 2026-06-20T07:58:44.787Z 20180403_react受控组件与非受控组件区别

受控组件与非受控组件区别

受控组件：
受react控制组件，即该组件受setState()控制
在change时重新设置state的值为event.target.value(text,textarea,select)或event.target.checked(radio&checkbox)
通过state取值

非受控组件：
不受react控制组件，即该组件不受setState()控制与传统的HTML表单输入相似，input输入值即显示最新值,可以通过ref取值

]]> 20180403_react受控组件与非受控组件区别 20180402_使用react实现数据同步功能 https://www.zhuyangxing.cn/2018/04/02/20180402_%E4%BD%BF%E7%94%A8react%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E5%90%8C%E6%AD%A5%E5%8A%9F%E8%83%BD/ 2018-04-02T15:44:21.000Z 2026-06-20T07:58:44.787Z 20180402_使用react实现数据同步功能

要求如下

  1. 输入框输入内容数据长度大于0，展示出预览信息
  2. 光标离开关闭预览信息
  3. 预览信息每隔4位插入一个特殊字符_,输入内容不变
  4. 限制长度为13位
  5. 只允许输入数字（0-9）
    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
    // Zinput.js
    import React, {
      Component
    } from 'react';
    import './Zinput.css'

    // NOTE: 获取焦点事件 原生onFocus 即可
    // NOTE: 离开焦点事件 原生onBlur即可
    // NOTE: 输入框数据过滤 直接在change方法里进行过滤
    // NOTE: 条件处理 通过不同条件返回不同节点做条件处理
    class Zinput extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: '',
          showBig: false,
        };
        this.handleChange = this.handleChange.bind(this);
        this.inputOnFocus = this.inputOnFocus.bind(this);
        this.inputOnBlur = this.inputOnBlur.bind(this);
      }
      inputOnFocus() {
        if (this.state.value.length > 0) {
          this.setState({
            showBig: true
          })
        }
      }
      inputOnBlur() {
        this.setState({
          showBig: false
        })
        if(this.props.chanegNumber){
          this.props.chanegNumber(this.state.value)
        }
      }
      handleChange(event) {
        let val = event.target.value.substr(0, 13)
          .replace(/[^\d]/g, '')
        event.target.value = val
        this.setState({
          value: val,
          showBig: true,
        });
      }
      /**
       * 根据字符串没隔len位插入一个下滑杠，返回处理后的字符串
       * @method   getStr
       * @author 朱阳星
       * @datetime 2018-04-02T09:57:58+080
       * @email    zhuyangxing@foxmail.com
       * @param    {String} str 待处理字符串
       * @param    {Number} len 每隔位数插入下滑杠
       * @return   {String} 处理后的字符串
       */
      getStr(str, len) {
        let lenth = str.length
        let len1 = len - 1
        let newStr = ''
        for (var i = 0; i < lenth; i++) {
          if (i % len === len1 && i > 0) {
            newStr += str.charAt(i) + '_'
          } else {
            newStr += str.charAt(i)
          }
        }
        if (newStr.length % (len + 1) === 0) {
          // 解决最后一位为补充项问题
          newStr = newStr.substr(0, newStr.length - 1)
        }
        return newStr
      }
      render() {
        // NOTE return 需要用圆括号包住并处理
        // NOTE 条件语句里没有节点也要用空字符串进行处理 否则sonalint会报错，页面也会报错
        const showBig = this.state.showBig ? (
          <div className="big-show">{ this.getStr(this.state.value,4) }</div>
        ) : ''
        return (
          <div className="zInput">
            <input className="input" 
                    type = "text" 
                    onFocus={ this.inputOnFocus }
                    onBlur={ this.inputOnBlur }
                    value={ this.state.value } 
                    onChange={ this.handleChange }>
                    </input>
            {showBig}
          </div>
        )
      }
    }

    export default Zinput; // Don’t forget to use export default!
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!-- Zinput.css -->
    .zInput{
        position: absolute;
        top:80px;
        left:40px;
        
    }
    .input {
      position: absolute;
      top: 0;
      left: 0;
    }
    .big-show {
        position: relative;
        top: -40px;
        font-size: 36px;
        line-height: 40px;
        background-color: red;
    }
    功能虽然实现，但是肯定是作为某个节点的某个子组件使用的，父组件调用方法有两种

1.使用refs直接获取子组件state的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
constructor(props) {
  super(props);
  this.handerClick2 = this.handerClick2.bind(this);
}
handerClick2(){
  // NOTE 父组件通过refs获取子组件的state 
  console.log("使用ref获取子组件的值",this.refs.zinput.state.value)
}
render() {
  return (
    <div className="App">
      <Zinput ref="zinput"></Zinput>
      <input type="button" value="获取电话号码的值22" onClick={ this.handerClick2 }/>
    </div>  
  );
}

2.每次子组件焦点离开时调用父组件传过来的方法，修改父组件state值

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
constructor(props) {
  super(props);
  this.state = {
    phoneNumber: '',
  };
  this.handerClick = this.handerClick.bind(this);
  this.changePhoneNumber = this.changePhoneNumber.bind(this);
}
changePhoneNumber(number){
  this.setState({
      phoneNumber: number,
  })
}
handerClick(){
  // NOTE 根据react的思想是在子组件处理完某件事的时候调用父组件的方法修改父组件的state值
  console.log("使用state获取值",this.state.phoneNumber)
}
render() {
  return (
    <div className="App">
      <Zinput ref="zinput" chanegNumber={this.changePhoneNumber}></Zinput>
      <input type="button" value="获取电话号码的值" onClick={ this.handerClick }/>
    </div>
  );
}
]]> 20180402_使用react实现数据同步功能 20180402_获取树形结构的所有节点 https://www.zhuyangxing.cn/2018/04/02/20180402_%E8%8E%B7%E5%8F%96%E6%A0%91%E5%BD%A2%E7%BB%93%E6%9E%84%E7%9A%84%E6%89%80%E6%9C%89%E8%8A%82%E7%82%B9/ 2018-04-02T15:44:11.000Z 2026-06-20T07:58:44.787Z 20180402_获取树形结构的所有节点

获取树形结构的所有节点

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
let tree = {
    "id": 1,
    "label": "一级 1",
    "children": [{
        "id": 3,
        "label": "二级 2-1",
        "children": [{
            "id": 4,
            "label": "三级 3-1-1"
        }, {
            "id": 5,
            "label": "三级 3-1-2",
            "disabled": true
        }]
    }, {
        "id": 2,
        "label": "二级 2-2",
        "disabled": true,
        "children": [{
            "id": 6,
            "label": "三级 3-2-1"
        }, {
            "id": 7,
            "label": "三级 3-2-2",
            "disabled": true
        }]
    }]
}
/**
 * 把树形结构拍平获取所有节点
 * @method   getNode
 * @param    {Object}                node 要拍平结构的树对象
 * @return   {Array}                      拍平后的节点数组，不包含节点的子节点信息
 * @author 朱阳星
 * @email  zhuyangxing@foxmail.com
 * @datetime 2018-04-01T16:42:52+080
 */
function getNode(node) {
    let result = []
    let _getNode = function (node) {
        let tmp =JSON.parse(JSON.stringify(node))
        delete tmp.children
        result.push(tmp) //移除拍平数组的子元素,只保留节点相关元素
        let child = node.children
        if (child != undefined && child.length > 0) {
            child.forEach(ele=>{
                arguments.callee(ele)
            })
        }
    }
    _getNode(node)
    _getNode=null
    return result
}
getNode(tree)
]]> 20180402_获取树形结构的所有节点 20180330_使用vue简单实现手机号银行卡的同步显示功能 https://www.zhuyangxing.cn/2018/03/30/20180330_%E4%BD%BF%E7%94%A8vue%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0%E6%89%8B%E6%9C%BA%E5%8F%B7%E9%93%B6%E8%A1%8C%E5%8D%A1%E7%9A%84%E5%90%8C%E6%AD%A5%E6%98%BE%E7%A4%BA%E5%8A%9F%E8%83%BD/ 2018-03-30T15:44:21.000Z 2026-06-20T07:58:44.787Z 20180330_使用vue简单实现手机号银行卡的同步显示功能

简单实现手机号银行卡的同步显示功能

这是某盟的一道面试题
难道不都是只要有了清晰的思路后边写边优化么
当时我就说了思路用计算属性根据输入框的内容计算出预览框的值
处理focus和blur事件即可
非要手写，手写根本写不出啊，然后面试官就认为我不会 无语了

要求如下

  1. 输入框输入内容数据长度大于0，展示出预览信息
  2. 光标离开关闭预览信息
  3. 预览信息每隔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
71
72
<template lang="html">
  <div class="zInput">
      <div class="big-show" v-show="showBig">{{txt2}}</div>
      <input type="text"
             @blur="handerBlur"
             @focus="handerFocus"
             v-model="txt">
  </div>
</template>

<script>
export default {
    name: 'z-input',
    data () {
        return {
            txt: '',
            showBig: false,
        }
    },
    computed: {
        txt2: function () {
            if (this.txt.length > 0) {
                this.showBig = true
            }
            return this.getStr(this.txt, 4)
        }
    },
    methods: {
        handerBlur () {
            this.showBig = false
        },
        handerFocus (evt) {
            if (evt.target.value.length > 0) {
                this.showBig = true
            }
        },
        getStr (str, len) {
            let lenth = str.length
            let len1 = len - 1
            let newStr = ''
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + '_'
                } else {
                    newStr += str.charAt(i)
                }
            }
            if (newStr.length % (len + 1) === 0) {
                // 解决最后一位为补充项问题
                newStr = newStr.substr(0, newStr.length - 1)
            }
            return newStr
        },
    }
}
</script>

<style lang="less">
.zInput{
    position: relative;
    .big-show {
        position: absolute;
        top: -40px;
        font-size: 36px;
        line-height: 40px;
        background-color: red;
    }
}
.zInput{
    top:50px;
}
</style>

如果再加入个长度限制，则以上方法就不合适了,更换实现方案
v-model其实是个语法糖
分开写为v-bind:value和v-on:input

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
<template lang="html">
  <div class="zInput">
      <div class="big-show" v-show="showBig">{{txt2}}</div>
      <input type="text"
             @blur="handerBlur"
             @focus="handerFocus"
             v-bind:value="txt"
             v-on:input="handerInput">
  </div>
</template>

<script>
export default {
    name: 'z-input',
    data () {
        return {
            txt: '',
            txt2: '',
            showBig: false,
        }
    },
    methods: {
        handerInput (evt) {
            let val = evt.target.value.substr(0, 13)
            // 限制长度13位
            this.txt = val
            evt.target.value = val
            if (this.txt.length > 0) {
                this.showBig = true
            }
            this.txt2 = this.getStr(this.txt, 4)
        },
        handerBlur () {
            this.showBig = false
        },
        handerFocus (evt) {
            if (evt.target.value.length > 0) {
                this.showBig = true
            }
        },
        getStr (str, len) {
            let lenth = str.length
            let len1 = len - 1
            let newStr = ''
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + '_'
                } else {
                    newStr += str.charAt(i)
                }
            }
            if (newStr.length % (len + 1) === 0) {
                // 解决最后一位为补充项问题
                newStr = newStr.substr(0, newStr.length - 1)
            }
            return newStr
        },
    }
}
</script>

限制只能输入数字
首先想到的是在keyup时把非数字过滤掉
但是事实是先执行keydown->handerInput->keyup

那就在keydown时处理呗，但是keydown修改evt.target.value后
在handerInput取到的evt.target.value依旧是未处理的所以说在keydown处理不起作用
必须要在handerInput时处理

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
<input type="text"
       @blur="handerBlur"
       @focus="handerFocus"
       @keyup="handerKeyup"
       @keydown="handerKeydown"
       v-bind:value="txt"
       v-on:input="handerInput">
<script>
       handerKeydown (evt) {
           console.log('handerKeydown')
           evt.target.value = evt.target.value.replace(/[^\d]/g, '')
           // 这里修改不起作用
       },
       handerKeyup (evt) {
           console.log('keyup')
           evt.target.value = evt.target.value.replace(/[^\d]/g, '')
           // 这里执行顺序靠后 修改无用
       },
       handerInput (evt) {
           let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, '')
           console.log('handerInput__val', val)
           //这里拿到的val是纯数字
           evt.target.value = val
           this.txt = val
           if (this.txt.length > 0) {
               this.showBig = true
           }
           this.txt2 = this.getStr(this.txt, 4)
       },
</script>

]]> 20180330_使用vue简单实现手机号银行卡的同步显示功能 20180330_论vue项目api相关代码的组织方式 https://www.zhuyangxing.cn/2018/03/30/20180330_%E8%AE%BAvue%E9%A1%B9%E7%9B%AEapi%E7%9B%B8%E5%85%B3%E4%BB%A3%E7%A0%81%E7%9A%84%E7%BB%84%E7%BB%87%E6%96%B9%E5%BC%8F/ 2018-03-30T15:44:21.000Z 2026-06-20T07:58:44.787Z 20180330_论vue项目api相关代码的组织方式

看了下项目组同事的代码，发现不同项目有不同的组织版本

版本一：

1
2
3
4
5
├─apis
│      a.api.js
│      b.api.js
│      b.api.js
│      d.api.js

每个api文件里都是这样的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// d.api.js
import axios from '@/utils/http'

export function editUser (Param) {
    return axios.post('url1', {
        ...Param
    })
}
export function deleteUser (Param) {
    return axios.post('url2', {
        ...Param
    })
}
// 调用方式如下
import {editUser} from '@/apis/d.api.js'

这种方法的缺点：

  1. 新增一个借口就新增一个方法
  2. 任何需要调用借口的地方都需要引入
  3. api文件里只有url和函数名不一样,其他都一样,应该封装到一起
  4. 查看所有接口需一个一个函数去看,麻烦

版本二：
干脆不把api统一到一起，把axios挂载到vue对象上只在需要的地方写

1
this.$axios.post(url,params).then()

这种方法缺点：

  1. 如果修改url路径,需要全局搜索替换改动地方较多
  2. 无法查看所有接口，不便于全局掌控

版本三:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// apis/index.js
// 把所有api的url统一在一起并挂在到vue对象上
// 所有接口都在一个文件里会比较大
// 可以按功能模块分组编写
let ENV = {
    name1: 'url1', 
    // 用户相关接口
    name2: 'url2', 
    // 积分相关接口
    name3: 'url3',
    // 产品相关接口
    name4: 'url4', 
}
export default ENV
1
2
3
// src/main.js
import api from '@/apis/index.js'
Vue.prototype.$api = api
1
2
//需要调用接口的js文件
this.$axios.post(this.$api.name1,params).then()

缺点：

  1. 暂时没想到
    优点:
  2. 更改url时只需要改动一个地方
  3. 可以在一个地方查看所有接口
]]> 20180330_论vue项目api相关代码的组织方式 20180327_vueDevtool 崩溃解决方案 https://www.zhuyangxing.cn/2018/03/27/20180327_vueDevtool%20%E5%B4%A9%E6%BA%83%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/ 2018-03-27T15:44:21.000Z 2026-06-20T07:58:44.787Z 20180327_vueDevtool 崩溃解决方案

关闭vuex的recording和event的recording,仅在需要的时候打开

]]> 20180327_vueDevtool 崩溃解决方案 20180327_字段B的校验规则根据字段A的值发生改变实现方案 https://www.zhuyangxing.cn/2018/03/27/20180327_%E5%AD%97%E6%AE%B5B%E7%9A%84%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99%E6%A0%B9%E6%8D%AE%E5%AD%97%E6%AE%B5A%E7%9A%84%E5%80%BC%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88/ 2018-03-27T15:44:21.000Z 2026-06-20T07:58:44.787Z 20180327_字段B的校验规则根据字段A的值发生改变实现方案

文本域的校验规则根据另一个字段的值发生改变，如左侧为身份证号与护照，则右侧对应输入框分别用不同的校验规则

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!-- 动态设置校验规则 -->
<template>
<el-dialog title="动态设置校验规则"
         :visible.sync="dialogVisible"
         size="small"
         :close-on-click-modal="false"
         :close-on-press-escape="false"
         :show-close="false">
  <el-form ref="form"
           :model="form"
           :rules="rules"
           label-width="80px">
      <el-form-item label="证件信息"
                    required>
          <el-row>
              <el-col :span="8">
                  <el-form-item prop="certificateType">
                      <el-select v-model="form.certificateType"
                                 clearable
                                 @change="changeHander"
                                 placeholder="请选择证件类型">
                          <el-option label="身份证"
                                     value="id"></el-option>
                          <el-option label="护照"
                                     value="passPort"></el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col class="line"
                      :span="1">&nbsp;</el-col>
              <el-col :span="15">
                  <el-form-item label=""
                                ref="certificateNum"
                                :rules="certificateNumRule"
                                prop="certificateNum">
                      <el-input placeholder="请输入证件号"
                                v-model="form.certificateNum"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
      </el-form-item>
  </el-form>
  <div slot="footer"
       class="dialog-footer">
      <el-button @click="cancelDialog('form')"
                 size="small">取 消</el-button>
      <el-button type="primary"
                 @click="saveDialog('form')"
                 size="small">确 定</el-button>
  </div>
</el-dialog>
</template>

<script>
export default {
  props: {
      visible: {
          type: Boolean,
          default: true,
      },
  },
  computed: {
      dialogVisible: {
          set (newValue) {
              this.$emit('update:visible', newValue)
          },
          get () {
              return this.visible
          },
      },
  },
  data () {
      return {
          certificateNumRule: [],
          form: {
              certificateType: '',
              certificateNum: '',
          },
          rules: {
              id: [{
                  required: true,
                  min: 18,
                  max: 18,
                  message: '请输入长度18位的身份证号',
                  trigger: 'blur',
              }, ],
              passPort: [{
                  required: true,
                  min: 6,
                  max: 6,
                  message: '请输入长度6位的护照号',
                  trigger: 'blur',
              }, ],
              certificateType: [{
                  required: true,
                  message: '请选择证件类型',
                  trigger: 'blur,change',
              }, ],
          },
      }
  },
  methods: {
      changeHander (val) {
          if (val === 'id') {
              this.certificateNumRule = this.rules.id
          } else if (val === 'passPort') {
              this.certificateNumRule = this.rules.passPort
          } else {
              this.certificateNumRule = []
          }
          this.$nextTick(() => {
              this.$refs.certificateNum.resetField()
              // 清空原来的校验结果
              this.$refs.certificateNum.resetField()
          })
      },
      cancelDialog (formName) {
          this.$refs[formName].resetFields()
          this.dialogVisible = false
          this.$emit('cancel')
      },
      saveDialog (formName) {
          this.$refs[formName].validate(valid => {
              if (valid) {
                  console.log('校验通过')
              } else {
                  console.log('校验失败')
              }
          })
      },
  },
}
</script>

]]> 20180327_字段B的校验规则根据字段A的值发生改变实现方案 20180327_elementui用resetFields()无法清空表格原因 https://www.zhuyangxing.cn/2018/03/27/20180327_elementui%E7%94%A8resetFields()%E6%97%A0%E6%B3%95%E6%B8%85%E7%A9%BA%E8%A1%A8%E6%A0%BC%E5%8E%9F%E5%9B%A0/ 2018-03-27T15:44:20.000Z 2026-06-20T07:58:44.787Z 20180327_elementui用resetFields()无法清空表格原因

el-form-item必须要有prop才能有用
详见官方文档

]]> 20180327_elementui用resetFields()无法清空表格原因 20180327_如何在文本框blur时,写业务逻辑 https://www.zhuyangxing.cn/2018/03/27/20180327_%E5%A6%82%E4%BD%95%E5%9C%A8%E6%96%87%E6%9C%AC%E6%A1%86blur%E6%97%B6,%E5%86%99%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91/ 2018-03-27T15:44:20.000Z 2026-06-20T07:58:44.787Z 20180327_如何在文本框blur时,写业务逻辑
1
<el-input @blur="idBlurHander"></el-input>
]]> 20180327_如何在文本框blur时,写业务逻辑 20180327_对象数组根据某属性过滤对象 https://www.zhuyangxing.cn/2018/03/27/20180327_%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84%E6%A0%B9%E6%8D%AE%E6%9F%90%E5%B1%9E%E6%80%A7%E8%BF%87%E6%BB%A4%E5%AF%B9%E8%B1%A1/ 2018-03-27T15:44:19.000Z 2026-06-20T07:58:44.787Z 20180327_对象数组根据某属性过滤对象

对象数组根据某属性过滤对象

自己写了个包放npm了 在这里

对象数组根据某个属性的值返回该对象，或者返回该对象另一个属性的某个值

自己写了个包放npm了 在这里

对象数组根据某属性进行排序显示

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
var infoObj = [
  {
    name: "张三",
    sex: 'female',
    age: 30,
  },
  {
    name: "李四",
    sex: 'male',
    age: 20,
  },
  {
    name: "王五",
    sex: 'female',
    age: 40,
  }];
 
function compare(propertyName) {
  return function (object1, object2) {
    var value1 = object1[propertyName];
    var value2 = object2[propertyName];
    return value1 - value2
  }
}
infoObj.sort(compare("age"))
]]> 20180327_对象数组根据某属性过滤对象 20180327_点击tab页切换数据，不同tab页出现数据混乱问题 https://www.zhuyangxing.cn/2018/03/27/20180327_%E7%82%B9%E5%87%BBtab%E9%A1%B5%E5%88%87%E6%8D%A2%E6%95%B0%E6%8D%AE%EF%BC%8C%E4%B8%8D%E5%90%8Ctab%E9%A1%B5%E5%87%BA%E7%8E%B0%E6%95%B0%E6%8D%AE%E6%B7%B7%E4%B9%B1%E9%97%AE%E9%A2%98/ 2018-03-27T15:44:18.000Z 2026-06-20T07:58:44.787Z 20180327_点击tab页切换数据，不同tab页出现数据混乱问题

前提条件：
一个页面有3个tab,点击不同tab分别加载不同数据，每次点击都会从服务端重新加载一次数据

问题：
tab分别为A,B,C 点击A时发送请求,在请求返回结果时判断当前选中的是哪个tab
根据当前tab把返回值填充到哪个tab的data数据里
聪明如你，可能已经发现这种设计的问题了
如果快速切换先点A立马再点B可能返回A的数据但填充的是B的表格，就很容易造成数据错乱

解决方案：

  1. ajax请求时把a,b,c作为冗余项传给服务端，服务端可以不作处理，返回结果根据该冗余项给A,B,C的某个tab的data进行赋值，确保tab与数据不混乱
  2. 判断ajax请求结果是否可缓存，如果可缓存则只需要请求3次缓存数据即可大大减少请求数据
]]> 20180327_点击tab页切换数据，不同tab页出现数据混乱问题 20180327_element-ui单独调用某一个字段的校验功能 https://www.zhuyangxing.cn/2018/03/27/20180327_element-ui%E5%8D%95%E7%8B%AC%E8%B0%83%E7%94%A8%E6%9F%90%E4%B8%80%E4%B8%AA%E5%AD%97%E6%AE%B5%E7%9A%84%E6%A0%A1%E9%AA%8C%E5%8A%9F%E8%83%BD/ 2018-03-27T15:44:11.000Z 2026-06-20T07:58:44.787Z 20180327_element-ui单独调用某一个字段的校验功能
1
this.$refs[ruleFormName].validateField('checkPass');

直接调用表单需要校验的某个prop即可(问了两个同事都不知道有这个方法)，官方示例

]]> 20180327_element-ui单独调用某一个字段的校验功能 20180327_el-checkbox选中之后保存key显示value https://www.zhuyangxing.cn/2018/03/27/20180327_el-checkbox%E9%80%89%E4%B8%AD%E4%B9%8B%E5%90%8E%E4%BF%9D%E5%AD%98key%E6%98%BE%E7%A4%BAvalue/ 2018-03-27T15:44:01.000Z 2026-06-20T07:58:44.786Z 20180327_el-checkbox选中之后保存key显示value

官方demo里全部只有一个label

1
<el-checkbox label="选中值">显示值</el-checkbox>

]]> 20180327_el-checkbox选中之后保存key显示value 20180326_如何让一个数组的内容扩充为原来的10倍 https://www.zhuyangxing.cn/2018/03/26/20180326_%E5%A6%82%E4%BD%95%E8%AE%A9%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E7%9A%84%E5%86%85%E5%AE%B9%E6%89%A9%E5%85%85%E4%B8%BA%E5%8E%9F%E6%9D%A5%E7%9A%8410%E5%80%8D/ 2018-03-26T15:44:18.000Z 2026-06-20T07:58:44.786Z 20180326_如何让一个数组的内容扩充为原来的10倍
1
2
3
4
5
6
7
let a =[1,2,3]
let b =JSON.parse(JSON.stringify(a))
// 原来数组已存在,只需要重复9次即可
for(let i=0;i<9;i++){
  a.push(...b)
}
console.log(a.length,a)
]]> 20180326_如何让一个数组的内容扩充为原来的10倍 论`<el-upload>`的正确使用方法 https://www.zhuyangxing.cn/2018/03/13/20180313_%E8%AE%BAel-upload%E7%9A%84%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95/ 2018-03-13T15:44:18.000Z 2026-06-20T07:58:44.786Z 论<el-upload>的正确使用方法

表单里有上传控件
看遗留代码是这么用的 

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
<el-form :model="ruleForm"
         ref="ruleForm">
    <el-form-item label="上传文件">
        <el-upload class="upload-demo"
                   :on-success="successUpload"
                   :action="mixinUploadUrl"
                   :on-remove="handleRemove"
                   :file-list="fileList">
            <el-button size="small"
                       type="primary">点击上传</el-button>
        </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button type="primary"
                   @click="submitForm('ruleForm')">导出</el-button>
    </el-form-item>
</el-form>
<script>
export default {
  data () {
      return {
          fileList: [],
          ruleForm: {
              fileList: []
          },
      }
  },
  methods: {
    handleRemove (file, fileList) {
        // 删除时在表单的某个字段里移除一个值
        let tmp = this.ruleForm.fileList
        let url = file.response.result[0].url
        if (tmp.includes(url)) {
            tmp.splice(tmp.findIndex(item => {
                return item === url
            }), 1)
        }
    },
    successUpload (response, file, fileList, $event) {
      // 上传成功在表单的某个字段里加一个值
        this.ruleForm.fileList.push(file.response.result[0].url)
    },
    submitForm (formName) {
        let fileList = this.ruleForm.fileList
        // 使用fileList与服务端交互 该字段只包含服务端数据
    },
  }
}
</script>

其实successUpload和handleRemove没有必要使用，只需要在提交的时候获取到已经上传到服务端的文件相关信息(如服务端保存路径，唯一标识等)即可

观察fileList在文件上传前后没有任何变化，说明该字段不是动态的
推测应该有个字段保存着服务端返回数据列表仔细查看后发现的确如此
其实el-upload组件有个属性uploadFiles是会根据上传文件结果进行动态处理的，上传成功增加一个移除掉一个，提交表单时只需要处理该字段即可

更好的使用流程如下：

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
<el-form :model="ruleForm"
         ref="ruleForm">
    <el-form-item label="上传文件">
        <el-upload ref="uploada"
                   :action="mixinUploadUrl"
                   :file-list="fileList">
            <el-button size="small"
                       type="primary">点击上传</el-button>
        </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button type="primary"
                   @click="submitForm('ruleForm')">导出</el-button>
    </el-form-item>
</el-form>
<script>
export default {
  data () {
      return {
          fileList: [],
      }
  },
  methods: {
    submitForm (formName) {
        //包含上传的文件信息和服务端返回的所有信息都在这个对象里
        this.$refs.uploada.uploadFiles
    },
  }
}
</script>
]]> 论`<el-upload>`的正确使用方法 如何理解redux的middleware中间件 https://www.zhuyangxing.cn/2018/03/09/20180309_%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3redux%E7%9A%84middleware%E4%B8%AD%E9%97%B4%E4%BB%B6/ 2018-03-09T15:44:18.000Z 2026-06-20T07:58:44.786Z 如何理解redux的middleware中间件

如果需要在dispatch前后分别打印出action,和action后的state，我们需要怎么做
实现方案如下：
首先我们想到在前后分别添加console,每次调用都在调用前后加console

  1. 在每次dispatch前后加console 

    1
    2
    3
    console.log("start ",action)
    store.dispatch(action)
    console.log("end ",store.getState())

    但是这样每一次调用都要多写两行代码,总的来说会出现很多console，最容易想到的就是把这段代码封装到一个函数里，每次需要的时候调用函数即可

  2. 定义成方法，在需要dispatch时调用方法

    1
    2
    3
    4
    5
    function dispatchAndLog(store,action){
      console.log("start ",action)
      store.dispatch(action)
      console.log("end ",store.getState())
    }

    调用dispatch的地方改为调用如下代码

    1
    dispatchAndLog(store,action)

    这样来说貌似可以了,但是每次都调用一个非api方法，新人不易理解，还是应该调用原有api,然后又有了修改默认dispatch的方案

  3. 修改默认的dispatch方法
    在以后的调用中直接调用store.dispatch即可

    1
    2
    3
    4
    5
    6
    7
    const next = store.dispatch
    store.dispatch = fuction dispatchAndLog(store,action){
      console.log("start ",action)
      let result = next(action)
      console.log("end ",store.getState())
      return result
    }

    这样看起来蛮好的，但是如果我现在不仅需要这一个打印日志的功能还需要一个能提供报错信息的功能
    我们可能想到如下方案

  4. 添加出错报告功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function patchStoreToAddLog(store,action){
  const next = store.dispatch
  store.dispatch = function dispatchAndLog(store,action){
    console.log("start ",action)
    let result = next(action)
    console.log("end ",store.getState())
    return result
  }
}

function patchStoreToAddCrashReporting(store,action){
  const next = store.dispatch
  store.dispatch = function dispatchAndCrashReporting(store,action){
    try {
      return next(action)
    } catch (err) {
      console.error('Caught an exception!', err)
      // 把错误信息发送到其他监控系统
       throw err
    }
  }
}

这样即要日志，又要报错的时候依次调用两个函数即可

1
2
patchStoreToAddLog(store,action)
patchStoreToAddCrashReporting(store,action)

这样还是原来问题每次调用都要写两个，麻烦
更好方案如下：

  1. 使用一个功能返回一个函数,返回的函数用于处理插件的逻辑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function logger(store) {
  const next = store.dispatch
  // Previously:
  // store.dispatch = function dispatchAndLog(action) {
  return function dispatchAndLog(action) {
    console.log('dispatching', action)
    let result = next(action)
    console.log('next state', store.getState())
    return result;
  }
}
function crashReporting(store){
  const next = store.dispatch
  return function dispatchAndCrashReporting(action){
    try {
      return next(action)
    } catch (err) {
      console.error('Caught an exception!', err)
      // 把错误信息发送到其他监控系统
       throw err
    }
  }
}

调用方法如下

1
2
logger(store)(action)
crashReporting(store)(action)

仔细观察其实是有规律的,可以写一个函数来遍历执行所有的插件
1
2
3
4
5
6
7
8
function applyMiddlewareByMonkeypatching(store, middlewares){
   middlewares = middlewares.slice()
   middlewares.reverse() //确保卸载后面的插件包在里面，后面执行
   middlewares.forEach(middleware=>
    //每一个middleware都可以直接调用前一个 middleware 包装过的 store.dispatch
     store.dispatch = middleware(store)
   )
}

调用如下
1
applyMiddlewareByMonkeypatching(store,[logger,crashReporting])

等于如下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// according to https://redux.js.org/api-reference/store#dispatch
// store.dispatch(action) 返回新的state 即新的store
store.dispatch = logger(crashReporting(store))
//也就等同于如下代码
store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action)
  let result = function dispatchAndCrashReporting(action){
    try {
      return next(action)
    } catch (err) {
      console.error('Caught an exception!', err)
      // 把错误信息发送到其他监控系统
       throw err
    }
  }
  console.log('next state', store.getState())
  return result;
}

这种方法已经很好了，但是它依旧是修改原来的store.dispatch方法,我们可以想办法不修改默认的store.dispatch方法

  1. 更进一步
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
function logger(store) {
  return function wrapperDispatchAndLog(next){
    return function dispatchAndLog(action) {
      console.log('dispatching', action)
      let result = next(action)
      console.log('next state', store.getState())
      return result;
    }
  }
}
// es6写法
const logger = store => next => action => {
      console.log('dispatching', action)
      let result = next(action)
      console.log('next state', store.getState())
      return result;
    }
  }
}
// 修改遍历函数
function applyMiddleware (store, middlewares){
  middlewares = middlewares.splice()
  middlewares.reverse()
  let dispatch = store.dispatch
  middlewares.forEach(middleware=>{
    dispatch = middleware(store)(dispatch)
  })
  return Object.assign({},store,dispatch)
}
// 调用方法 
// 返回经过middleware包装过的含有新dispatch的store
applyMiddleware(store,[logger,crashReporting])
]]> 如何理解redux的middleware中间件 vue-router前端权限控制问题 https://www.zhuyangxing.cn/2018/03/08/20180308_vue-router%E5%89%8D%E7%AB%AF%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6%E9%97%AE%E9%A2%98/ 2018-03-08T15:44:18.000Z 2026-06-20T07:58:44.786Z vue-router前端权限控制问题

前提纲要：
1.用户A和用户B有不同的权限。
页面分左侧菜单部分和右侧内容部分，右侧内容可能有不同路径的不同内容
最简单例子为点击左侧用户管理
右侧显示用户列表
点击某条内容详情
右侧显示某一用户的详细内容
2.用户A可以访问路径权限如下：

1
2
3
a/list
a/detail/:id
a/list/:id

用户B可以访问路径权限如下：

1
2
3
b/list
b/detail/:id
b/list/:id

3.正常用户登陆进去可以看到自己的菜单，
点击菜单右侧内容部分发生变化，然后在右侧操作,更改页面url，左侧菜单不变，右侧内容页发生变化

碰到问题如下：
用户B登陆进去点击菜单进入b/detail/:id然后保存为书签（即保存该路径）退出
然后用户A登陆点击保存的标签页，正常获取左侧菜单权限，左侧菜单正常显示，但是右侧却根据url显示了自己权限外的b/detail/:id的内容(暂不考虑跟服务端交互问题，虽说服务端可以再掉用接口时给出无权限返回，前端再根据返回进行逻辑处理，但即便这样前端页面显示依旧不正常)

解决方案：
在路由进入之前，根据路由的meta属性的某一字段比对所有的可访问权限(这个在登录时已经获取了，可以存在localstorage里)，如果能找到则进去否则跳转到某个固定页，这样就解决了权限问题

]]> vue-router前端权限控制问题 对于oop面向对象编程的理解 https://www.zhuyangxing.cn/2018/03/06/20180306_%E5%AF%B9%E4%BA%8Eoop%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B%E7%9A%84%E7%90%86%E8%A7%A3/ 2018-03-06T15:44:18.000Z 2026-06-20T07:58:44.786Z 对于oop面向对象编程的理解

OOP(Object Oriented Programming)面向对象编程
这个东西好几年之前就知道
继承，封装，多态全都知道
时间久全忘记了，最近群里有朋友讲起就再次重新回顾下

目标：重用性，灵活性，扩展性
特征：封装性，继承，多态

封装性：
人有以下几个公共特征可以封装在一起,作为一个正常的对象叫人
姓名
身份证号
会说话
会写字

继承性
学生是人，老师也是人
所以学生对象可以继承自人，教师对象也可以继承自人

多态性
执行的是相同的事情但是获取到的是不同的结果
现在有3个人，张三，李四，王五分别获取他们的职业，可能会得到不同的结果如”工人”，”农民”，”老师”等。这就属于多态。当然获取身份证号也不一样 这也算多态

]]> 对于oop面向对象编程的理解 对于`Promise`部分属性的理解 https://www.zhuyangxing.cn/2018/03/05/20180305_%E5%AF%B9%E4%BA%8E%60Promise%60%E9%83%A8%E5%88%86%E5%B1%9E%E6%80%A7%E7%9A%84%E7%90%86%E8%A7%A3/ 2018-03-05T15:44:19.000Z 2026-06-20T07:58:44.786Z 对于Promise部分属性的理解

对于Promise.then()和Promise.catch()的理解

今天碰到问题是这样子的:
调试bug的时候发现axios走了then也走了有catch,在我印象里是走了then就不该走catch(后来发现是我理解错了)
代码是这样的

1
2
3
4
5
6
7
8
9
this.axios.post('/user/login', params)
    .then(res => {
        console.log('response', res)
    })
    .catch(err => {
      // 这个catch catch的是then里的异常，then里如果有任何异常都会被catch捕获
        console.log('catch')
        console.error(err.message)
    })

仔细看了Promise.catch()MCDN是这样解释的

The catch() method returns a Promise and deals with rejected cases only. It behaves the same as calling Promise.prototype.then(undefined, onRejected) (in fact, calling obj.catch(onRejected) internally calls obj.then(undefined, onRejected)).

简单来讲调用Promise.catch()等于调用Promise.prototype.then(undefined, onRejected)
由于Promise.then()返回的是一个Promise对象，返回值解释如下：

throws an error, the promise returned by then gets rejected with the thrown error as its value;

如果抛出异常返回一个执行rejected的Promise对象即相当于调用返回Promise的Promise.then(undefined, onRejected)

对于Promise.catch()的返回值是这样解释的：

The Promise returned by catch() is rejected if onRejected throws an error or returns a Promise which is itself rejected; otherwise, it is resolved.

如果Promise.catch()又抛出异常则相当于又调用Promise.then(undefined, onRejected)
如果未抛出异常则相当于调用Promise.then(onResolved,undefined)

promise.all()是顺序开始,异步执行,顺序返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 示例代码
const getRandom = () => +(Math.random()*1000).toFixed(0);

const asyncTask = taskID => new Promise(resolve => {
    let timeout = getRandom();
    console.log(`taskID=${taskID} start.`);
    setTimeout(function() {
        console.log(`taskID=${taskID} finished in time=${timeout}.`);
        resolve(taskID)
    }, timeout);
});

Promise.all([asyncTask(1),asyncTask(2),asyncTask(3)])
.then(resultList => {
    console.log('results:',resultList);
});

详见这里

]]> 对于`Promise`部分属性的理解 自定义组件分类 https://www.zhuyangxing.cn/2018/03/05/20180305_%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E5%88%86%E7%B1%BB/ 2018-03-05T15:44:18.000Z 2026-06-20T07:58:44.786Z 自定义组件分类

组件分两种

  1. 容器组件(存储状态及状态逻辑,不考虑显示问题)
  2. 显示组件(只做显示使用，不存储任何状态)

虽然这个概念来源于react,但用在vue组件里也是一样

容器组件仅仅做数据提取，然后渲染对应的子组件(显示组件)
显示组件可以高效的复用，甚至可以废掉重新做一个显示组件,而不需处理任何业务逻辑。
因为任何逻辑都已经在容器组件里处理过了,在业务逻辑不变的情况下，如果要改页面只需修改显示组件即可

Q1:容器组件和显示组件中间的数据映射，该如何处理?

如容器组件里保存的是code如0,1
而显示组件需要显示的是name如男,女

A1:其实两种方式均可，建议如下

  1. 如果是固定数量的值建议放在显示组件里：
    如男女，已婚未婚这种前后端协商好的甚至是可以硬编码到代码里的字段建议放在显示组件处理
  2. 如果不是固定数量的值建议放在容器组件里：
    如需根据服务端返回的数据字典(该字典可通过其他渠道维护非硬编码在代码里)查找对比后显示的
    因需要与服务端交互就不能作为显示组件处理
]]> 自定义组件分类