前端小知识10点（2019.6.25）

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

前端小知识10点（2019.6.25）

前言：

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

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

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

<script src="moment.js"></script>
<script>
  const year=2019
  const week=2

  const start = moment()
    //年
    .year(year)
    //周
    .week(week)
    //周一
    .isoWeekday(1)
    //日期格式
    .format('M.D');

  const end = moment()
    .year(year)
    .week(week)
    .isoWeekday(7)
    .format('M.D');
  
  //2019第2周
  //(1.7-1.13)
  console.log(`${year}第${week}周\n(${start}-${end})`) 

</script>

（1）关于 ISO 8601 时间标准对周的定义，请参考：

ISO 8601中周数的处理及 Joda-Time 的使用

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

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

导出 excel：

const fileData = ['' + ('<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-mic' + 'rosoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta cha' + 'rset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:Exce' + 'lWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>' + '</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></' + 'xml><![endif]--></head><body>') + a.outerHTML + '</body></html>'];
const blobObject = new Blob(fileData);
window.navigator.msSaveOrOpenBlob(blobObject, `${tableTitle}.xls`);

说明：

a.outerHTML 是 <table id='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，不使用数据缓存了。

前端小知识10点（2019.6.25）

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（可获取焦点的）元素

<div id="A" style="background-color: deeppink" tabindex="0">
  这是A

    <div id="C" style="background-color: aqua" tabindex="1">
    这是C
    </div>

</div>

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

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

注意：focus 不会冒泡！

点击 #C （聚焦 #C ）：

前端小知识10点（2019.6.25）

点击 #A （聚焦 #A ）：

前端小知识10点（2019.6.25）

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

为每个 <td> 添加 \xa0

<td key={id} >{value+ '\xa0' }</td>

\xa0 是不间断空白符  

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

前端小知识10点（2019.6.25）

（完）

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

马云现象的经济学分析：互联网经济的八个关键命题

胡晓鹏 / 上海社会科学院出版社 / 2016-11-1 / CNY 68.00

互联网经济的产生、发展与扩张，在冲击传统经济理论观点的同时，也彰显了自身理论体系的独特内核，并与那种立足于工业经济时代的经典理论发生显著分野。今天看来，“马云”们的成功是中国经济长期“重制造、轻服务，重产能、轻消费，重国有、轻民营”发展逻辑的结果。但互联网经济的发展却不应仅仅止步于商业技巧的翻新，还需要在理论上进行一番审慎的思考。对此，我们不禁要问：互联网经济驱动交易发生的机理是什么？用户基数和诚......一起来看看《马云现象的经济学分析：互联网经济的八个关键命题》这本书的介绍吧!

码农工具

RGB转16进制工具

RGB HEX 互转工具

RGB HSV 转换

RGB HSV 互转工具