js日常积累

1. js中的~~是按位取反的意思
   https://www.cnblogs.com/tangjiao/p/9131993.html
   2.时间戳转2009-1-01 00:02

toDate(time){
	var t=new Date(time)
	const y=t.getFullYear();
	const m=t.getMonth()+1;
	const d = t.getDate();
	const h = t.getHours();
	const mm = t.getMinutes();
	console.log(`${y}-${m}-${add(d)} ${add(h)}:${add(mm)}`)
	function add(m){return m<10?'0'+m:m }
}

3.h5页面 避免手机直接home键退出时，背景音乐仍然播放
监听visibilitychange的变化，获取document的hidden属性，来判断页面是否显示

function audioAutoPlay(id){
//自动播放背景音乐
var audio1 = document.getElementById(id),
play = function(){
	audio1.play();
	document.removeEventListener("touchstart",play, false);
};
	audio1.play();
	document.addEventListener("WeixinJSBridgeReady", function () {//微信
	play();
	}, false);
	document.addEventListener('YixinJSBridgeReady', function() {//易信
	play();
}, false);
document.addEventListener("touchstart",play, false);
}

document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q
	// console.log(document.hidden,555)
	var audio2=document.getElementById('player1');
	if (document.hidden) { // 网页被挂起;
	audio2.pause();
	} else { // 网页被呼起
	audioAutoPlay('player1');
	}
}
)

4.Vue.js中使用debounce，throttle的解决方案
https://www.erlo.vip/news/15/18803.html
https://blog.csdn.net/chy555chy/article/details/80016919
在created或者mounted调用才有效，method内调用无效，原因未知，应该是method内不能劫持内存
并且附在this.$utils.debounce附在vue实例上也不能实现
//节流函数

utils.js（公共的方法）
export function debounce(func, delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}


export default{
	debounce
}

反抖动函数

export 
/**
*
* @param fn {Function}   实际要执行的函数
* @param delay {Number}  执行间隔，单位是毫秒（ms）
*
* @return {Function}     返回一个“节流”函数
*/

function throttle(fn, threshhold) {

  // 记录上次执行的时间
  var last

  // 定时器
  var timer

  // 默认间隔为 250ms
  threshhold || (threshhold = 1000)

  // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    var now = +new Date()

    // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
    // 执行 fn，并重新计时
    if (last && now < last + threshhold) {
      clearTimeout(timer)

      // 保证在当前时间区间结束后，再执行一次 fn
      timer = setTimeout(function () {
        last = now
        fn.apply(context, args)
      }, threshhold)

    // 在时间区间的最开始和到达指定间隔的时候执行一次 fn
    } else {
      last = now
      fn.apply(context, args)
    }
  }
}

a.vue中调用

import {debounce，throttle} from '../utils/baseFunction';
mounted(){
    this.$watch('cardId', debounce((newSearchText) => {
			console.log('执行了')
          }, 1000))
    },


this.$watch('cardId', throttle((newSearchText) => {
			console.log('执行了')
          }, 1000))
    },

5.有关JS中的0,null,undefined,[],{},’’’’’’’’,false之间的关系
https://www.jb51.net/article/105585.htm

0与其他值的关系
0==false 为true
0==''      为true
0==[]    为true

0==NaN   为false
0==undefined  为false
0==null     为false
0=={}    为false

''空值与一些值的比较
'' == false  为true‘
''==[]   为true

''==undefined  为false
''==null    为false
''==NaN  为false
''=={}     为false

6.一张图片加载的进度（大图）
注意http的图片在https通过ajax来加载有跨域问题

使用ajax-get请求图片，可以获取下载进度，等于100%再赋值到img的src，比如：
<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './1.jpg');
    xhr.onprogress = function (event) {
        if (event.lengthComputable) {
            console.log((event.loaded / event.total) * 100); // 进度
        }
    };
    xhr.send();
</script>

利用jquery中的ajax获取上传的进度

链接：https://www.imooc.com/article/39935

$.ajax({    url:'xxxx',
    ....,    //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
    xhr: function(){ 
        myXhr = $.ajaxSettings.xhr();          //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
        if(myXhr.upload){            //绑定progress事件的回调函数
            myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
        }    //xhr对象返回给jQuery使用
        return myXhr; 
      },    success:function(){}
});

//上传进度回调函数：
function progressHandlingFunction(e) {    if (e.lengthComputable) {       
 //e.loaded 上传大小
        //e.total 文件大小
        var percent = e.loaded/e.total;
    }
}

7.vue 中params和query的区别

8.vue路由的懒加载

10.避免chrome在注册页填充记住的账号密码
在账号和密码之间写2个隐藏的input

 <a-form-model-item label="手机" prop="phone">
        <a-input placeholder="手机" v-model.trim="formData.phone" />
      </a-form-model-item>
      <!-- 用于避免账号密码自动填充 -->
      <input
        style="width: 1px; height: 1px; position: absolute; border: 0px; padding: 0px;"
      />
      <input
        type="password"
        style="width: 1px; height: 1px; position: absolute; border: 0px; padding: 0px;"
        autocomplete="off"
      />
      <!-- 用于避免账号密码自动填充end -->
      <a-form-model-item label="密码" prop="password" has-feedback>
        <a-input-password
          placeholder="请输入"
          type="password"
          :maxLength="20"
          :visibilityToggle="false"
          v-model.trim="formData.password"
          v-if="!passwordShow"
          v-focus="focusSyncOne"
          @change="passwordInput"
          @focus="removePassword"
          @blur="addPassword"
        />
        <a-input
          placeholder="请输入"
          v-model="formData.password"
          v-if="passwordShow"
          v-focus="focusSyncTwo"
        />
      </a-form-model-item>