前端小知識10點（2019.6.25）

時間 2019-12-05

標籤前端知識 10點 2019.6.25 简体版

原文原文鏈接

前言：
這裏記錄我工做、學習中值得注意的小知識點，但願對你有所幫助。html

一、 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/學習

二、IE11導出excel表格和圖片（兼容性）spa

導出 excel：.net

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'>的outerHTMLprototype

導出圖片：excel

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格式。code

三、IE11在請求頭中設置 Cache-Control 來清除緩存

headers: {
      Authorization: requestToken,
      //ie11緩存問題
      'Cache-Control': 'no-cache, must-revalidate',
    },

若是沒效果的話，只能手動設置IE11，不使用數據緩存了。

四、for循環的語法（a; b; c）

//a在單次循環開始前執行
        //b是單次循環的條件（這裏即cur存在）
        //c是單次循環結束後執行
        for ( ; cur; cur = cur.parentNode ) {
          //xxx
        }

說明：
a在單次循環開始前執行；
b是單次循環的條件（這裏即cur存在）；
c是單次循環結束後執行。

五、類數組與數組的區別
類數組：

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屬性之外的東西

六、function(){} 默認返回 undefined
就是你不寫return xxx，它默認return undefined

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

 a()  //undefined

七、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()方法只能阻止冒泡

八、MVVM框架中，只要操做VM的數據，它就天然而然地同步到view，是利用什麼屬性同步的？
Object.defineProperty，Object.defineProperty的做用是將對象的某一個屬性，轉換一個setter與getter，咱們只要劫持這兩個方法，經過Pub/Sub模式就能偷偷操做視圖。

九、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）：

點擊#A（聚焦#A）：

十、js禁止excel格式轉化（重要！）
爲每一個<td>添加\xa0