前端實用資源整理

時間 2019-12-05

標籤前端實用資源整理简体版

原文原文鏈接

CSS

`html5`中`a`的`download`屬性

定義和用法
download 屬性定義下載連接的地址或指定下載文件的名稱。文件名稱沒有限定值，瀏覽器會自動在文件名稱末尾添加該下載文件的後綴 (.img, .pdf, .txt, .html, 等)。

download 屬性是 HTML5中新增的 <a> 標籤屬性。

語法	屬性值	值描述
`<a download="filename">`	filename	指定文件名稱。

檢測瀏覽器是否支持download屬性css

'download' in document.createElement('a');

`1px`邊框(解決不一樣分辨率屏幕1px的寬窄不一樣)

縮放原理html

.border-1px {
  position relative
}
.border-1px:after {
    display block
    content ''
    position absolute
    left 0
    bottom 0
    width 100%
    border-top 1px solid #ccc
 }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) .border-1px::after {
      transform scaleY(0.7)
      -webkit-transform scaleY(0.7)
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border-1px::after {
      transform scaleY(0.5)
      -webkit-transform scaleY(0.5)
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
  .border-1px::after {
      transform scaleY(0.3333)
      -webkit-transform scaleY(0.3333)
}

隱藏移動端`ios/android`滾動條，使滾動流暢

隱藏滾動條，不影響滾動vue

::-webkit-scrollbar
  display none

流暢滾動html5

//在滾動元素`css`中添加
 -webkit-overflow-scrolling touch // IOS系統
    overflow-scrolling touch // 安卓系統

僞元素`（:或::均可以，::更準確，:兼容好）`與僞類`(只能:)`的區別

僞類與僞元素都是用於向選擇器加特殊效果

僞類與僞元素的本質區別就是是否抽象創造了新元素
僞類只要不是互斥能夠疊加使用
僞元素在一個選擇器中只能出現一次，而且只能出如今末尾
僞類與僞元素優先級分別與類、標籤優先級相同

僞類標籤只對能夠插入內容的標籤添加： div span

`Vue`中使用`less`根據分辨率給元素添加背景圖片

按照less官方文檔，url應當以下使用：android

URLs
// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

故而有了根據屏幕分辨率設置背景圖片代碼ios

.bg-image(@url) {
  background-image: url('@{url}@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url('@{url}@3x.png');
  }
}  // 報錯報錯 找不到路徑的

這裏要使用「~」符號來告訴less引號裏面的內容不須要編譯。

正確代碼：git

.bg-image(@url) {
    background-image:~"url('@{url}@2x.png')";
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: ~"url('@{url}@3x.png')";
    }
}

改變輸入框`input`，`textarea`的`placeholder`樣式，去除輸入框選中邊框高亮

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder  {
  //設置樣式
}
input:focus {    outline:none;}  /*  focus 標記*/

（原諒我一直沒找很完善的reset.css,這些在一些重置樣式文件自帶的有，你們有好的完善的也能夠告知我一下）github

`sticky` 屬性

在使用 position: sticky 的時候，若是不指定 top 屬性是不會有效果的。
這個屬性是用來實現滾動吸頂的，具體可瞭解position。web

`flex`佈局屬性中`inline-flex`

inline-flex 和 inline-block 同樣，對內部元素來講是個 display:flex 的容器，對外部元素來講是個 inline-block 的塊面試

JS

`addEventListener` `VS` `onclick`孰優孰劣

兩個均可以實現效果。
addEventListener 以及 IE 的 attachEvent能夠實現綁定多個事件，若是你有這方面的需求的話（奇怪的是你總會的）。
addEventListener的第三個參數能夠用來控制監聽器對於冒泡事件的響應，大部分狀況是false，若是置爲true，則響應事件的捕獲階段。事件的響應分區爲三個階段：捕獲、目標、冒泡階段。
onclick綁定的多個事件會被覆蓋，後者覆蓋前者。
考慮到兼容ie，能夠寫一個原生的事件綁定兼容方案：

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example
addEvent(
    document.getElementById('myElement'),
    'click',
    function () { alert('hi!'); }
);

參考連接：addEventListener 與 onclick

圖片上傳按鈕以及預覽（轉載+解析）

//代碼來源：https://www.jb51.net/article/120617.htm 這裏解析一下
<template>
 <div class="admin">
 <div class="admin-content">
  <div class="edit">
  <div class="avatar">
   <div class="img">
   <img :src="avatar" @click="setAvatar">
   <span>更改</span>
   </div>
   //圖片上傳按鈕
   <input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput">
  </div>
  <button type="button" @click="edit">確認修改</button>
  </div>
 </div>
 </div>
</template>
<script>
export default {
 data() {
     return {
      avatar: this.$store.state.administrator.avatar,
     }
 },
 methods: {
     edit() {
      // 肯定修改後上傳
      if (this.$refs.avatarInput.files.length !== 0) {
       var image = new FormData()
       image.append('avatar', this.$refs.avatarInput.files[0])
       this.axios.post('/avatar', image, {
           headers: {
            "Content-Type": "multipart/form-data"
           }
       })
      } 
     },
     setAvatar() {
      //觸發按鈕的上傳事件 也會用label綁定for屬性
      this.$refs.avatarInput.click()
     },
    
     changeImage(e) {
      //從事件對象裏獲取文件，利用文件流讀取
      var file = e.target.files[0]
      var reader = new FileReader()
      var that = this
      reader.readAsDataURL(file)
      reader.onload = function(e) {
          that.avatar = this.result
      }
     }
   }
}
</script>

對象數組排序

主要用到Array的sort()方法:

語法
arr.sort([compareFunction])
參數
compareFunction 可選
用來指定按某種順序進行排列的函數。若是省略，元素按照轉換爲的字符串的各個字符的Unicode位點進行排序。
返回值
排序後的數組。請注意，數組已原地排序，而且不進行復制，即數組已修改。

若是沒有指明 compareFunction ，那麼元素會按照轉換爲的字符串的諸個字符的Unicode位點進行排序。例如 "Banana" 會被排列到 "cherry" 以前。當數字按由小到大排序時，9 出如今 80 以前，但由於（沒有指明 compareFunction），比較的數字會先被轉換爲字符串，因此在Unicode順序上 "80" 要比 "9" 要靠前。

若是指明瞭 compareFunction ，那麼數組會按照調用該函數的返回值排序。即 a 和 b 是兩個將要被比較的元素：

若是 compareFunction(a, b) 小於 0 ，那麼 a 會被排列到 b 以前；
若是 compareFunction(a, b) 等於 0 ， a 和 b 的相對位置不變。備註： ECMAScript 標準並不保證這一行爲，並且也不是全部瀏覽器都會遵照（例如 Mozilla 在 2003 年以前的版本）；
若是 compareFunction(a, b) 大於 0 ， b 會被排列到 a 以前。
compareFunction(a, b) 必須老是對相同的輸入返回相同的比較結果，不然排序的結果將是不肯定的。

通俗點講，那數字排序爲例,return a - b: 從小到大；return b - a : 從大到小。
經常使用的是對象數組的排序，根據對象某一鍵值對排序，以下：

var compare = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        /*
        *異常處理，或者轉型處理字符串轉數字比較等
        */
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }            
    } 
}

一鍵複製功能

主要用到 document.execCommand

copy() {
      let  googleSecuritKey = document.getElementById('googleSecuritKey');
      googleSecuritKey.select();
      try{
        if(document.execCommand('copy', false, null)){
          document.execCommand('copy');
          //一個彈窗組件而已
          this.$alert({
            msg: '已複製至剪貼板！'
          }, true);
        }
      } catch (err){
        this.$alert({
          msg: '請選中後按command/ctrl+C或右鍵複製！'
        }, true);
      }
    },

該方法限制條件：

DOM元素要可編輯，好比input或者eidtable屬性的div；
不可有disabled屬性，input的type不能夠是hidden；
內容寬度不可爲0，至少爲1px；

那麼若是作一個只作信息展現的內容，容許用戶一鍵複製，怎麼作呢？

我這邊選擇用一個width：1px的input用定位移動到旁邊信息展現區下，用層級遮住。

<div class="text__strong">
    密鑰：<input id="googleSecuritKey" v-model="googleSecuritKey" type="text" style="width: 1px;border: none;position: relative; left: 2px; z-index: -1;"/>
    {{googleSecuritKey}}
    <span class="ui-btn ui-btn-default ui-btn-short float-r clearfix" @click="copy">複製</span>
</div>

解決科學計數法顯示數字問題

參考出處：JavaScript中科學計數法轉化爲數值字符串形式

如下兩種狀況，JavaScript 會自動將數值轉爲科學計數法表示

(1) 小於1且小數點後面帶有6個0以上的浮點數值：

JavaScript 代碼:
0.0000003    // 3e-7
0.00000033   // 3.3e-7
0.000003     // 0.000003

(2) 整數位數字多於21位：

JavaScript 代碼:
1234567890123456789012     //1.2345678901234568e+21
1234567890123456789012.1   //1.2345678901234568e+21
123456789012345678901      //123456789012345680000

解決方案：
JavaScript 代碼:

function toNonExponential(num) {
    var m = num.toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/);
    return num.toFixed(Math.max(0, (m[1] || '').length - m[2]));
}
toNonExponential(3.3e-7)     // "0.00000033"
toNonExponential(3e-7)       // "0.0000003"
toNonExponential(1.401e10)   // "14010000000"
toNonExponential(0.0004)     // "0.0004"

解析一下：

用.toExponential()將數字轉化爲科學記數法表示，匹配正則表達式/\d(?:\.(\d*))?e([+-]\d+)/,獲取科學記數法中小數點後的字符及冪指數（e 後面的值），這樣能夠肯定數字是幾位小數。再用toFixed() 轉換成數值表示。

大額數量轉換

需求：

數量保持最多5個字符。
當數量<1，展現爲0.003
當數量爲1-1000，展現爲1.234，12.34，123.4
當數量＞1000，帶上單位K，展現爲1.54K，15.4K，154K
當數量>1000000時，帶上單位M，展現爲1.23M，12.3M，123M
數值採用向下取數展現的方式。如實際數量爲15345，則展現爲15.3K

項目中使用vue過濾器作的處理：

export default (vol) => {
  const val = parseFloat(vol) + '';
  if (isNaN(val)) return vol;
  let num = val.indexOf('.') ? val.split('.')[0].length : val.length;
  const getFiv = function(v) {
    let a = v.indexOf('.') ? v.substring(0, 5) : v;
    let b = a.replace(/[.]$/, '');
    return b;
  };
  if (num < 4) {
    let v = val + '';
    return getFiv(v);
  } else if (num < 7) {
    let v = val / 1000 + '';
    return getFiv(v) + 'K';
  } else {
    let v = val / 1000000 + '';
    return getFiv(v) + 'M';
  }
};

能夠抽取方法的，調整5相關，能夠獲取指定位數的縮寫。

含有變量的正則表達式

value = value.replace(new RegExp(`^(\\-)*(\\d+)\\.(\\d{${count}}).*$`), '$1$2.$3');//只能輸入count位小數

好比count爲4：

value = value.replace(/^(\-)*(\d+)\.(\d{4}).*$/, '$1$2.$3');//只能輸入4位小數

`Blob`文件下載借鑑

把請求responseType設置爲 blob,在response.body中拿數據（例子中使用了封裝過的axios，data處理過）；

const { data } = await http({
    method: 'POST',
    headers: defaultHeaders,
    url: ...,
    responseType: 'blob',
    data: ...
  });

把接受的data處理成blob對象，關於Blob
```
let blob = new Blob([data], { type: data.type });
```
如下來自MDN

語法	參數
`var aBlob = new Blob( array, options );`	`array` 是一個由`ArrayBuffer`, `ArrayBufferView`, `Blob`, `DOMString` 等對象構成的 `Array` ，或者其餘相似對象的混合體，它將會被放進 `Blob`。`DOMStrings`會被編碼爲`UTF-8`。
	`options` 是一個可選的`BlobPropertyBag`字典，它可能會指定以下兩個屬性：
	- `type`，默認值爲 ""，它表明了將會被放入到`blob`中的數組內容的`MIME`類型。
	- `endings`，默認值爲"`transparent`"，用於指定包含行結束符n的字符串如何被寫入。它是如下兩個值中的一個： "`native`"，表明行結束符會被更改成適合宿主操做系統文件系統的換行符，或者 "`transparent`"，表明會保持blob中保存的結束符不變

建立url

//URL.createObjectURL()方法會根據傳入的參數建立一個指向該參數對象的URL. 這個URL的生命僅存在於它被建立的這個文檔裏. 新的對象URL指向執行的File對象或者是Blob對象.
let url = window.URL.createObjectURL(blob);
let fileName = '分析師列表.xlsx';

建立a標籤實現自動下載或者手動下載

```
    if ('download' in document.createElement('a')) {
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      URL.revokeObjectURL(a.href);
      document.body.removeChild(a);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  ```

純函數 (Pure Function)

純函數是指不依賴於且不改變它做用域以外的變量狀態的函數。

ES6及以上經常使用的方法

Array.from()

Array.from() 方法從一個 相似數組或 可迭代對象中建立一個新的數組實例。

Array.from(arrayLike[, mapFn[, thisArg]])
- 第一個必選參數類數組對象
- 每一個元素的回調函數
- this對象
返回新數組

常見用法，很少說：

Array.from('string');     // ["s", "t", "r", "i", "n", "g"]
Array.from({a: 'a', b: 'b'});     // []
Array.from({1: 'a', 2: 'b'});     // []
Array.from([1, 2, 3], x => x + x));          // [2, 4, 6]

Array.from() 能夠經過如下方式來建立數組對象：

僞數組對象（擁有一個 length 屬性和若干索引屬性的任意對象）
可迭代對象（能夠獲取對象中的元素,如 Map和 Set 等）

擁有一個 length 屬性這是我一直忽略的，這一點仍是蠻有技巧性的，有時候能簡化很多步驟

先看使用中的多種狀況：

Array.from({1: 'a', 2: 'b', length: 2});     // [undefined, "a"]
Array.from({1: 'a', 2: 'b', length: 3});     // [undefined, "a", "b"]
Array.from({a: 'a', b: 'b',length: 3});      // [undefined, undefined, undefined]

還算比較智能。

看一下應用，來自Daily-Interview-Question2019-04-16的面試題：

第 55 題：某公司 1 到 12 月份的銷售額存在一個對象裏面，以下：{1:222, 2:123, 5:888}，請把數據處理爲以下結構：[222, 123, null, null, 888, null, null, null, null, null, null, null]。

我最開始直接來了個基本的遍歷法...還在new Array(13)或者[].length=13

簡化版：

// 13長度的數組對應進去保持了key與索引一致，最終去除掉第一個元素就好

Array.from({1:222, 2:123, 5:888, length: 13}).slice(1).map(e => e || null);

let obj = {1:222, 2:123, 5:888};
Array.from({length: 12}).fill(null).map((e, index) => obj[index +1] || null);

相比起來，Array.fill()沒有什麼容易忽略的地方。

未完待續