防抖函数以及flex布局的使用

通常前端会有这种写法：

this.scroll && this.scroll.xxx

这样的写法的目的，是首先判断this.scroll是否为null，如果是，则不会执行后面的代码，如果不是，则会执行后面的代码，相比如下的写法，会更加简洁：

    if(this.scroll){
       this.scroll.xxx;
    }

防抖函数

对于refresh非常频繁的问题，进行防抖操作

• 防抖debounce，节流throttle
• 防抖函数起作用的过程：
  • 如果我们直接执行refresh，那么refresh函数会被直接（频繁）执行
  • 可以将refresh函数传入到debounce函数种，生成一个新的函数
  • 之后在调用非常频繁的时候，就使用新生成的函数
  • 新生成的函数并不会被频繁的调用，如果下一次执行来的非常快，会取消上一次的函数调用

    // 防抖函数参考代码
    mounted(){
        const refresh = this.debounce(this.$refs.scroll.refresh, 200);
        this.$bus.$on('itemImgLoad', () => {
            refresh();
        })
    },
    methods: {
        // 防抖函数
        debounce(func, delay){
            let timer = null;
            return function (...args){
                // 取消已有的定时器（其实可以理解为，取消了上一次的函数调用）
                if(timer) clearTimeout(timer);
                timer = setTimeout(() => {
                    func.apply(this, args);
                }, delay)
            }
        }
    }

flex布局

• flex-grow
• flex-shrink
• flex-basis
• flex:1，表示flex:1 1 auto
• 默认值为flex:0，表示flex:0 0 auto
• https://blog.csdn.net/weixin_43554584/article/details/113839778

Ngnix

• 正向代理
  就有点像vpnFQ，server不知道client是谁
• 反向代理
  负载均衡中常用到的，client不知道server是谁
• 负载均衡

Vue

切换淘宝的npm镜像

• npm install -g cnpm --registry=https://registry.npm.taobao.org

安装全局webpack

• npm install webpack -g

安装Vue脚手架

• npm install -g @vue/cli
• 注意以上脚本，是安装了vue3，如果也想用vue2，那么可以通过如下脚本，安装vue2桥接：
  • npm install -g @vue/cli-init

脚手架创建项目

• vue2创建项目
  • vue init webpack project_name
• vue3创建项目
  • vue create project_name
• 注意，如果在ide（如vscode）的终端使用vue的相关命令时报错，可能是脚本被禁止运行，使用管理员权限执行如下代码：
  • set-ExecutionPolicy RemoteSigned