前端小知识10点（2019.6.25）

摘要：前言这里记录我工作学习中值得注意的小知识点，希望对你有所帮助。循环的语法在单次循环开始前执行是单次循环的条件这里即存在是单次循环结束后执行说明在单次循环开始前执行是单次循环的条件这里即存在是单次循环结束后执行。

前言：
这里记录我工作、学习中值得注意的小知识点，希望对你有所帮助。

1、 moment.js将某年某周转为具体日期

举例：将2019年第二周转为具体日期

（1）关于ISO 8601时间标准对周的定义，请参考：
ISO 8601中周数的处理及 Joda-Time 的使用

（2）moment.js将某年某周转化为具体日期的方法，请参考：http://momentjs.cn/docs/#/get-set/iso-weekday/

2、IE11导出excel表格和图片（兼容性）

导出 excel：

const fileData = ["" + ("") + a.outerHTML + ""];
const blobObject = new Blob(fileData);
window.navigator.msSaveOrOpenBlob(blobObject, `${tableTitle}.xls`);

说明：
a.outerHTML是

导出图片：

 let dataURItoBlob = function(dataURI) {
    let binary = atob(dataURI.split(",")[1]);
    let array = [];
    for(let i = 0; i < binary.length; i++) {
       array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: "image/png"});
}

let blob = dataURItoBlob(picBase64Info);
window.navigator.msSaveOrOpenBlob(blob, "图片.png");

说明：
picBase64Info即图片的base64格式。

3、IE11在请求头中设置 Cache-Control 来清除缓存

  headers: {
      Authorization: requestToken,
      //ie11缓存问题
      "Cache-Control": "no-cache, must-revalidate",
    },

如果没效果的话，只能手动设置IE11，不使用数据缓存了。

4、for循环的语法（a; b; c）

        //a在单次循环开始前执行
        //b是单次循环的条件（这里即cur存在）
        //c是单次循环结束后执行
        for ( ; cur; cur = cur.parentNode ) {
          //xxx
        }

说明：
a在单次循环开始前执行；
b是单次循环的条件（这里即cur存在）；
c是单次循环结束后执行。

5、类数组与数组的区别
类数组：

  const arrayLike = { "1":1, "2":2, "3":3, "a":"a", "b":"b", length: 7}
  console.log(arrayLike.length) //7
  //直接使用数组的方法
  //{3: 3, 4: 2, 5: 1, a: "a", b: "b", length: 7}
  console.log(Array.prototype.reverse.call(arrayLike));
  //undefined
  console.log(Array.prototype.pop.call(arrayLike,4));
  //+++3+2+1
  console.log(Array.prototype.join.call(arrayLike,"+"));

区别：
（1）类数组对象具有数组的一些属性（如length）
（2）类数组对象，缺少从数组的原型对象上继承下来的内置方法(例如：pop()、reverse()等)
（3）类数组对象不关心除了数字索引和length属性以外的东西

6、function(){} 默认返回 undefined
就是你不写return xxx，它默认return undefined

let a=function () {
  //return undefiend
}

 a()  //undefined

7、stopImmediatePropagation()

有两个作用：
（1）阻止剩下的事件处理程序被执行

$("div").click(function(event){
    alert("点击了divOne");
    event.stopImmediatePropagation();
});
$("div").click(function(event){
    alert("点击了divTwo");
});

只显示点击了divOne

（2）阻止冒泡

    $("body").click(function(event){
        alert("body 被执行");
    });
    $("div").click(function(event){
        alert("事件句柄 1 被执行");
        event.stopImmediatePropagation();
    });

只显示点击了divOne

stopImmediatePropagation()与stopPropagation()的区别：
（1）stopImmediatePropagation()方法既可以阻止剩下的事件处理程序被执行，又可以阻止冒泡
（2）stopPropagation()方法只能阻止冒泡

8、MVVM框架中，只要操作VM的数据，它就自然而然地同步到view，是利用什么属性同步的？
Object.defineProperty，Object.defineProperty的作用是将对象的某一个属性，转换一个setter与getter， 我们只要劫持这两个方法，通过Pub/Sub模式就能偷偷操作视图。

9、tabindex属性，让div元素成为focusable（可获取焦点的）元素

  这是A

    

    这是C
    



  $("#A").on("focus" ,function (event) {
    console.log(event,"A被focus了")
  })

  $("#C").on("focus",function (event) {
    console.log(event,"C被focus了")
  })

注意：focus 不会冒泡！

点击#C（聚焦#C）：

点击#A（聚焦#A）：

10、js禁止excel格式转化（重要！）
为每个

xa0是不间断空白符 

注意：不要在number类型的列下这么做，不然用户不能在excel里进行数值计算

（完）

• 上一篇：[译文] JavaScript工作原理：V8引擎内部+5条优化代码的窍门
• 下一篇：Service Workers （PWA 初体验）

wangzy2019

男|高级讲师

我要关注 我要私信

TA的文章

阅读更多

• BREW SDK 版本的区别（上）

  阅读 3236·2021-11-22 14:44

• #双十一#CMIVPS：全场VPS终身5折，独立服务器9折优惠，香港CMI线路大带宽

  阅读 1085·2021-11-16 11:53

• 麻了，都是科班出身的，学弟月薪却是我的3倍。

  阅读 1224·2021-11-12 10:36

• 程序员的算法趣题Q54: 偷懒的算盘

  阅读 669·2021-10-14 09:43

• css隐藏移动端滚动条并且ios上平滑滚动

  阅读 3637·2019-08-30 15:55

• 4.css中的大于号('>')你可知？

  阅读 3372·2019-08-30 14:14

• 分支管理

  阅读 1710·2019-08-26 18:37

• 从 0 开始构建 webpack 项目【Webpack Book 翻译】

  阅读 3367·2019-08-26 12:12

最新活动