js文件中import中加{}和不加{}的区别

  • 参考网址
https://blog.csdn.net/baidu_38225647/article/details/104968662
  • 大括号的加与不加取决于import来源的js文件
- 如果来源js中export时明确指定export组件的名称，那么加大括号并且大括号中指定引用组件的名称

- 如果来源js是默认输出，那么引用时不用大括号，且名称随意
  • 不加"{}"
### A.js
export default aa;
export const A = 333;

### B.js
// B.js 引用 A.js
import A from './A'
import MA from './A'
import Something from './A'
  • 加"{}"
### A.js
// 定义了组件aa
export {aa};
// 或export aa;

### B.js
import {A} from './A.js'

filter 和 some 和every

  • 参考网址
- https://juejin.cn/post/6969129447223984136
  • 相同点:都是数组方法,检测元素是否符合某个特定条件
  • 不同点: 返回值不同
- filter: 返回符合条件的一个新的list
- some: 若有一个元素符合条件，则返回true，且后面的元素不会再检测
- every: 若有一个不满足条件，则返回false，后面的元素都不会再执行
  • 通俗理解some和every
- some: 对某些元素进行检测,若有一个元素符合条件，则返回true
- every: 对所有元素进行检测,若有一个不满足条件，则返回false
  • 示例: 筛选出arr1元素中,所有不同于arr2的列表集
var arr1 = [1,2,3,4,5,6]
var arr2 = [4,5,6,7,8,9]
var arr3 = arr1.filter(item=>{
	return arr2.every(item1=>{
	  return item != item1
	})
})
console.log(arr3) // [1, 2, 3]

如何禁止用户打开调试(防小白)

- 先建一个js文件，里面定一个function，内容只有debugger，如下：
	
	// 用的是VUE，为了调用方便，直接把方法赋给了window
	window.notAllowDebugger = function notAllow(){
      debugger;
    }
    
- 系统主页面引用该js文件

- 主页面定义一个计数器方法，先获取第一个时间戳time1，再调用notAllowDebugger，再获取第二个时间戳，比较两个时间戳，大于一定值就页   面跳转到"about:blank"
	setInterval(function (){
            let time1 = Date.now();
            notAllowDebugger();
            let time2 = Date.now()
            if(time2 - time1 >= 100){
              window.location.href="about:blank";
            }
     },1000)
  • 参考连接: https://www.zhihu.com/question/597286223/answer/3031606893

防抖和节流

  • 参考链接
- https://juejin.cn/post/6995454183239319582
  • 注意事项
- 使用elementUI的时候,注意写法上面,使用传统函数的写法(简写会导致功能不生效)

<el-button type="danger" icon="el-icon-plus" @click="debounceTestButton">测 试</el-button>
......
methods:{
  ......
  // 测试专用
  testButton() {
    console.log('xxx')
  },

  // 以下这种节流写法,不会生效
      // throttledFetchData(){
      //   throttle(()=>{
      //     this.testButton()
      //   },5000,{ trailing:true })
      // }

      // 防抖测试(会生效)
      debounceTestButton: debounce(function(){
        this.testButton()
      },500)
  
}
  • 防抖(debounce): 一定时间内,不管点多少次,以最后一次为准,触发逻辑
  • 节流(throttle ): 一定时间内,不管点多少次,以最早一次为准,触发逻辑
- 防抖用途: input输入框,显示匹配的输入内容情况
- 节流用途: 页面scroll滚动，或者窗口resize，或者防止按钮重复点击等情况
  • 示例
/*函数节流*/
function throttle(fn, interval) {
  var enterTime = 0;//触发的时间
  var gapTime = interval || 300 ;//间隔时间，如果interval不传，则默认300ms
  return function() {
    var context = this;
    var backTime = new Date();//第一次函数return即触发的时间
    if (backTime - enterTime > gapTime) {
      fn.call(context,arguments);
      enterTime = backTime;//赋值给第一次触发的时间，这样就保存了第二次触发的时间
    }
  };
}

/*函数防抖*/
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms
  return function() {
    clearTimeout(timer);
    var context = this;
    var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
    timer = setTimeout(function() {
      fn.call(context,args);
    }, gapTime);
  };
}

export default {
  throttle,
  debounce
};

// 使用如下
import tool from "../../until/tool.js";
Page({
   data:{
    win_scrollTop:0
   },
   onPageScroll: tool.throttle(function(msg){
      this.setData({
        win_scrollTop: msg[0].scrollTop
      });
   }),
   gotoUnlock: tool.debounce(function() {
      this.saveUserInfo();
   }),
   saveUserInfo:function(){
      console.log(111)
   }
})
  • 在vue中,按钮使用节流注意事项
- 参考网址: https://juejin.cn/post/7037752201787211784

- @click="demoClick" # 如果demoClick是一个方法名称,此时节流是不会生效的(定义成data中的一个变量,就会生效)

<script>
  // 先定义节流函数
  const throttle = (func, wait = 50) => {
      // 上一次执行该函数的时间
      let lastTime = 0;
      return function(...args) {
          // 当前时间
          let now = +new Date();
          // 将当前时间和上一次执行函数时间对比
          // 如果差值大于设置的等待时间就执行函数
          if (now - lastTime > wait) {
              lastTime = now;
              func.apply(this, args);
          }
      };
  };


  export default {
    name: 'Data',
    data() {
      return {
        ......
        throttleSearch:undefined // 初始化
      }
    },
    methods: {
      // 点击按钮后要执行的主逻辑
      search() {
        const value = this.keyword
        if (value === '' || /^\s*$/.test(value)){
          this.$message({
            type:'warning',
            message:'输入不能为空'
          });
          return
        }
        this.getPageList()
      },
    },
    created(){
      this.throttleSearch = throttle(this.search,1000)
    }
  }
</script>