JavaScrip-tips Summary

2018-07-02

阅读量

1. Element.scrollIntoView()
让当前的元素滚动到浏览器窗口的可视区域内。
element.scrollIntoView({block: "end", behavior: "smooth"});
scrollIntoView(false)
参数布尔值是 dom 元素尽可能往可视区顶端(true)或底端靠近(false)

2. Set()

size：size属性将会返回Set对象中元素的个数。
add(value)：添加某个值，返回 Set 结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员

3. 获取对象的键值对操作

Object.values(obj)
Object.keys(obj)
Object.entries(obj)

4. tabindex
tabindex解决div获得焦点focus()和失去焦点blur()的问题

5. replac(function)
ECMAScript规定，replac()方法的参数replacement可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将替换文本使用。第一个参数表示匹配到的字符，第二个参数表示匹配到的字符最小索引位置（RegExp.index），第三个参数表示被匹配的字符串（RegExp.input）。

6. 测试代码消耗时间

1
2
3

console.time('timer')
// code
console.timeEnd('timer')

8. 清除字符串空格
str.replace(/\s/g, "")

9. 判断是否为空对象
JSON.stringify(obj)!='{}'

10. 使用递归实现深拷贝

deepCopy = (input) => {
  if (input instanceof Array) {
    let temp = [];
    for (let i = 0; i < input.length; ++i) {
      temp[i] = this.deepCopy(input[i]);
    }
    return temp;
  } else if (input instanceof Object) {
    var temp = {}
    for (let i in input) {
      temp[i] = this.deepCopy(input[i]);
    }
    return temp;
  } else {
    return input;
  }
}

11. 判断用户浏览器

navigator.userAgent.toLowerCase();
let Sys = {};
let UA = navigator.userAgent.toLowerCase();
let s;
(s = UA.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = UA.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = UA.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = UA.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = UA.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//以下进行测试
if (Sys.ie) console.log('IE: ' + Sys.ie);
if (Sys.firefox) console.log('Firefox: ' + Sys.firefox);
if (Sys.chrome) console.log('Chrome: ' + Sys.chrome);
if (Sys.opera) console.log('Opera: ' + Sys.opera);
if (Sys.safari) console.log('Safari: ' + Sys.safari);

12. 时间跨度

if (~~(moment(endTime - startTime)/ 1000 / 60 / 60 / 24 + 1) > 90) {
toast.show('搜索时间跨度不能超过90天', 'error');
return
}

13. upload 图片上传有关

// 1. 本地图片预览
let fileReader = new FileReader();
fileReader.readAsDataURL(e.target.files[0]);
fileReader.onload = function () {
  $(`<img src="${this.result}" width="100" height="100">`).appendTo("body");
}
// 2. 远程图片上传
let formData = new FormData();
formData.append('file', file);
uploadModel.url = URL;
uploadModel.contentType = false;// 不设置内容类型
uploadModel.setParam({
  body: formData
});
// 3.多图预览
change = (e) => {
  for (let i = 0; i < e.target.files.length; i++) {
    let reader = new FileReader();
    reader.readAsDataURL(e.target.files[i]);
    reader.onload = function (e) {
      $(`<img src="${this.result}" width="100" height="100">`).appendTo("body");
    }
  }
}
<input ref={el => this.inputRef = el} className="hidden" multiple="multiple" type="file" onChange={e => { this.change(e) }} />
<div className="box" onClick={() => { this.inputRef.click() }}>点击选择多张图片并预览</div>

14. switch 中的 break 阻碍后面的 case 执行

15. 重写原生方法

// overwrite scrollIntoView to solve fix head
const _scrollIntoView_ = Element.prototype.scrollIntoView;
Element.prototype.scrollIntoView = function() {
  _scrollIntoView_.apply(this, arguments);

  const $wrapper = $('.wrapper');
  const scroller = $wrapper && $wrapper[0] || document.body;
  const scrollTop = scroller.scrollTop;
  if (scrollTop) {
    scroller.scrollTo(0, scrollTop - 60); //fixed head height
  }
}

//返回到固定位置
//目标元素距离可视区的top + 外层元素相对滚动条的偏移
$('.wrapper').animate({scrollTop: ($(dom).offset().top + $('.wrapper').scrollTop() - 60)}, 150)

16. 四大家族

//可视区的 top 值
$(selector).offset().top

//最近父级元素的 top 值
$(selector).position().top

//函数用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移。
$(selector).scrollTop()

//获取目标元素距离顶层父级元素的位置：http://www.luuxii.com/571.html
getPos = (obj) => {
  let left = 0;
  let top = 0;
  while(obj){
    left += obj.offsetLeft; //取到定位父级的距离
    top += obj.offsetTop;  //取到定位父级的距离
    obj = obj.offsetParent;  //把obj的定位父级变成obj
  }
  return {left: left,top: top};
}