JS 文件互轉、10 個 HTML 文件上傳技巧、Web 用戶體驗設計提高指南、奇怪的知識——位掩碼 | 思否技術週刊

今日分享提高工做幸福感的知識點，但願你們不要錯過這些好文~

一、JS 文件 base6四、File、Blob、ArrayBuffer 互轉

二進制互轉

1. file對象轉base64

let reader = new FileReader();
 reader.readAsDataURL(file[0])
 console.log(reader)

1. base64 轉成blob 上傳

function dataURItoBlob(dataURI) {  
    var byteString = atob(dataURI.split(',')[1]);  
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];  
    var ab = new ArrayBuffer(byteString.length);  
    var ia = new Uint8Array(ab);  
    for (var i = 0; i < byteString.length; i++) {  
        ia[i] = byteString.charCodeAt(i);  
    }  
    return new Blob([ab], {type: mimeString});  
}

1. blob 轉成ArrayBuffer

let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
    console.log(result);
}
reader.readAsArrayBuffer(blob);

1. buffer 轉成blob

let blob = new Blob([buffer])

1. base64 轉 file

const base64ConvertFile = function (urlData, filename) { // 64轉file
  if (typeof urlData != 'string') {
    this.$toast("urlData不是字符串")
    return;
  }
  var arr = urlData.split(',')
  var type = arr[0].match(/:(.*?);/)[1]
  var fileExt = type.split('/')[1]
  var bstr = atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], 'filename.' + fileExt, {
    type: type
  });
}

二、10 個 HTML 文件上傳技巧

上傳文件功能能夠說是項目常常出現的需求。從在社交媒體上上傳照片到在求職網站上發佈簡歷，文件上傳無處不在。在本文中，咱們將討論 HTML文件上傳支持的10種用法，但願對你有用。

1. 單文件上傳

咱們能夠將input 類型指定爲file，以在Web應用程序中使用文件上傳功能。

<input type="file" id="file-uploader">

input filte 提供按鈕上傳一個或多個文件。默認狀況下，它使用操做系統的本機文件瀏覽器上傳單個文件。成功上傳後，File API 使得可使用簡單的 JS 代碼讀取File對象。要讀取File對象，咱們須要監聽 change事件。

首先，經過id獲取文件上傳的實例:

const fileUploader = document.getElementById('file-uploader');

而後添加一個change 事件偵聽器，以在上傳完成後讀取文件對象， 咱們從event.target.files屬性獲取上傳的文件信息：

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  console.log('files', files);
});

在控制檯中觀察輸出結果，這裏關注一下FileList數組和File對象，該對象具備有關上傳文件的全部元數據信息。

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：

https://codepen.io/atapas/pen...

2. 多文件上傳

若是咱們想上傳多個文件，須要在標籤上添加 multiple 屬性：

<input type="file" id="file-uploader" multiple />

如今，咱們能夠上傳多個文件了，之前面事例爲基礎，選擇多個文件上傳後，觀察一下控制檯的變化：

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：

https://codepen.io/atapas/pen...

3.瞭解文件元數據

每當咱們上傳文件時，File對象都有元數據信息，例如file name，size，last update time，type 等等。這些信息對於進一步的驗證和特殊處理頗有用。

const fileUploader = document.getElementById('file-uploader');

// 聽更 change 件並讀取元數據
fileUploader.addEventListener('change', (event) => {
  // 獲取文件列表數組
  const files = event.target.files;
  // 遍歷並獲取元數據
  for (const file of files) {
    const name = file.name;
    const type = file.type ? file.type: 'NA';
    const size = file.size;
    const lastModified = file.lastModified;
    console.log({ file, name, type, size, lastModified });
  }
});

下面是單個文件上傳的輸出結果：

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：

https://codepen.io/atapas/pen...

4.瞭解 accept 屬性

咱們可使用accept屬性來限制要上載的文件的類型，若是隻想上傳的文件格式是 .jpg，.png 時，能夠這麼作：

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

在上面的代碼中，只能選擇後綴是.jpg和.png的文件。

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：

https://codepen.io/atapas/pen...

5. 管理文件內容

成功上傳文件後顯示文件內容，站在用戶的角度上，若是上傳以後，沒有一個預覽的，就很奇怪也不體貼。

咱們可使用FileReader對象將文件轉換爲二進制字符串。而後添加load 事件偵聽器，以在成功上傳文件時獲取二進制字符串。

// FileReader 實例
const reader = new FileReader();
fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];
  reader.readAsDataURL(file);
  reader.addEventListener('load', (event) => {
    const img = document.createElement('img');
    imageGrid.appendChild(img);
    img.src = event.target.result;
    img.alt = file.name;
  });
});

若是你們看到這裏，有點激動，想手賤一下，能夠 CodePen 玩玩，地址：

https://codepen.io/atapas/pen...

文章後面還有五個技巧分享，分別是：

6.驗證文件大小

1. 顯示文件上傳進度
2. 怎麼上傳目錄上傳?
3. 拖拽上傳
4. 使用objectURL處理文件

能夠點擊標題連接，去原文章瀏覽所有技巧~

三、前端優秀實踐不徹底指南

本文應該叫，Web 用戶體驗設計提高指南。

一個 Web 頁面，一個 APP，想讓別人用的爽，也就是所謂的良好的用戶體驗，我以爲他可能包括但不限於：

• 急速的打開速度
• 眼前一亮的 UI 設計
• 酷炫的動畫效果
• 豐富的個性化設置
• 便捷的操做b
• 貼心的細節
• 關注殘障人士，良好的可訪問性
• ...

所謂的用戶體驗設計，實際上是一個比較虛的概念，是秉承着以用戶爲中心的思想的一種設計手段，以用戶需求爲目標而進行的設計。設計過程注重以用戶爲中心，用戶體驗的概念從開發的最先期就開始進入整個流程，並貫穿始終。

良好的用戶體驗設計，是產品每個環節共同努力的結果。

除去一些很難一蹴而就的，本文將就頁面展現、交互細節、可訪問性三個方面入手，羅列一些在實際的開發過程當中，積攢的一些有益的經驗。經過本文，你將能收穫到：

1. 瞭解到一些小細節是如何影響用戶體驗的
2. 瞭解到如何在儘可能小的開發改動下，提高頁面的用戶體驗
3. 瞭解到一些優秀的交互設計細節
4. 瞭解基本的無障礙功能及頁面可訪問性的含義
5. 瞭解基本的提高頁面可訪問性的方法

四、13個頂級免費所見即所得文本編輯器工具

CKEditor

CKEditor擁有10多年的開發經驗，你能夠徹底放心此文本編輯器的質量。它支持70多種語言，我認爲這是你網站的不錯選擇。它還能夠運行在許多不一樣的瀏覽器上，並能很好地與大多數前端框架，如reat，vue，angular......你可使用CDN直接嵌入到你的HTML頁面中......。目前它有兩個版本並行運行的CKEditor4和CKEditor5，根據不一樣的使用目的，你會選擇適合本身的編輯器。

Trumbowyg

Trumbowyg是針對HTML5優化的代碼編輯器，它支持大多數流行的瀏覽器，例如IE9 +，Firefox，Chrome等。據我所知，它包含用於文本編輯的全部工具，僅爲20Kb，它輕巧，將幫助你的網站更流暢地運行。此外，它還具備其餘支持插件來幫助你更好地工做，例如插入表情符號，其餘國家/地區的支持語言，添加聲音，插入特殊字符...

TinyMCE

TinyMCE 5是一款編輯器，它能讓你靈活地編輯、添加或刪除本程序中的部份內容。除了基本的編輯器，那麼我發現它還提供了不少支持，更好的用戶體驗，如添加評論，測試檢查路徑，提供優質的圖標和界面，檢查拼寫的內容...... 然而，這也是它的弱點，由於若是你想使用高級工具，你必須每個月支付約25美圓。

Quill

Quill是一個開放源代碼編輯器，所以能夠將其用於全部類型的商業或非商業網站。它有不少功能，如添加連接，圖像，視頻或添加代碼片斷的內容…關於Quill，我最喜歡的一點是它的簡單設置和顯示，能夠在多設備屏幕上的全部現代的、響應迅速的web瀏覽器上顯示，還有使用它的常見問題的詳細說明。

Trix

Trix是一個開源的編輯器，可讓你在Web中輕鬆地撰寫消息、寫評論、寫帖子......，並被良好編程的平板電腦使用。若是你只須要建立內容所需的功能，那麼Trix一樣是不錯的選擇。

Jodit Editor 3

Jodit Editor 3是一個用純TypeScript編寫的開源github編輯器，不使用任何其餘庫。它容許你以多種方式設置它，如經過npm、使用CDN......。我喜歡它的是，除了詳細的說明，還有一個程序，經過代碼讓咱們自由選擇哪些工具附加到Jodit Editor。

Summernote

Summernote是GitHub上的開源編輯器，得到了超過9K星。它是經過Bootstrap框架設計的，具備在你的網站上建立內容所需的全部功能。你只須要下載它的源文件css，js，再加上Bootstrap框架(也支持三、4兩個版本)就已經能夠爲你的網站服務了。

Editor.js

Editor.js是一個開源的塊狀編輯器，它不會像普通的編輯器那樣使用標籤HTML，將內容以JSON的形式輸出，使其更容易管理。它還支持經過使用API的插件，多虧了這一點，應該任何功能 任何開發者均可覺得這個程序貢獻更多有趣和有用的插件。

MediumEditor

MediumEditor是Medium的內置的開放源代碼編輯器，用於人們博客。它僅包含編輯器所需的基本實用程序，所以僅約28kB，這將有助於你的網站獲得優化。同時若是咱們想要添加其餘功能，爲了優化編輯，MediumEditor還提供了額外的外部實用工具，按期更新。

Wysihtml

Wysihtml是一個由Voog團隊構建的開源編輯器。它功能齊全，能夠幫助你輕鬆編輯文本，而且支持大多數現代屏幕瀏覽器的設備圖像。有不少工具我很喜歡它是自動轉換不合適的HTML標籤率，自動分析內容時從Word, PDF，顯示內容爲HTML…

ContentTools

ContentTools是內置的開源編輯器，可幫助你輕鬆地一種方式編輯HTML內容。它提供了用於編輯內容的各類實用程序，你還能夠輕鬆地將Message Institute和其餘實用程序添加到程序中（請參閱脫機API部分）。我還發現瞭如何設置，添加或刪除程序中的函數的文章…都是很是細緻的。

Froala

Froala是一個編輯器，能夠很容易地爲網站設置，並容許你根據預期用途打開普遍的功能。因爲它是用純JavaScript編寫的，所以你能夠將其用於當今的大多數現代前端框架。它還提供了許多有用的工具，以及編輯圖像，添加或編輯視頻，添加圖標，管理面板等。可是，若是你要使用該工具用於商業目的，則必須購買許可證。

Redactor

Redactor是一款功能齊全的編輯器，具備精美而簡單的設計。超過9年的發展，包括不少支持插件，我想這是一個很好的產品。另外它對程序員在使用程序的過程當中遇到的每個常見問題都有極其詳細的實例。可是，它也有一個缺點，當你將其用於商業目的時必須購買許可證。

五、奇怪的知識——位掩碼

假設咱們有一個權限系統，它經過 JSON 的方式記錄了某個用戶的權限開通狀況（姑且假設權限集是 CURD)：

const permission = {
  create: false,
  update: false,
  read: true,
  delete: false,
}

若是咱們把 false 寫成 0，true 寫成 1，那麼這個 permisson 對象能夠簡寫爲 0b0010。

const permission = {
  create: false,
  update: false,
  read: true,
  delete: false,
}
// 從左往右，依次爲 create, update, read, delete 所對應的值
const permissionBinary = 0b0010

對於 JSON 對象的權限集，若是咱們要查看或者修改該用戶的某些權限，只須要經過形如 permission.craete 的普通對象操做便可。那麼若是對於二進制形式的權限集，咱們又應該如何進行查看或者修改的操做呢？接下來咱們就開始使用奇怪的知識——位掩碼來進行了。

位掩碼

首先進行名詞解釋，什麼是」位掩碼「。

位掩碼（BitMask），是」位（Bit）「和」掩碼（Mask）「的組合詞。」位「指代着二進制數據當中的二進制位，而」掩碼「指的是一串用於與目標數據進行按位操做的二進制數字。組合起來，就是」用一串二進制數字（掩碼）去操做另外一串二進制數字「的意思。

明白了位掩碼的做用之後，咱們就能夠經過它來對權限集二進制數進行操做了。

一、查詢用戶是否擁有某個權限

已知用戶權限集二進制數爲 permissionBinary = 0b0010。若是我想知道該用戶是否存在 update 這個權限，能夠先給定一個位掩碼 mask = 0b1。

因爲 update 位於右數第三項，因此只須要把位掩碼向左移動兩位，剩餘位置補0。最後和權限集二進制數進行按位與運算便可獲得結果。

最後算出來的 result 爲 0b0000，使用 Boolean() 函數處理之便可獲得 false 的結果，也就是說該用戶的 update 權限爲 false。

// 從左往右，依次爲 create, update, read, delete 所對應的值
const permissionBinary = 0b0010
// 因爲 update 位於右數第三位，所以只須要讓掩碼向左移動2位便可
const mask = 0b1 << 2
const result = permissionBinary & mask
Boolean(result) // false

二、修改用戶的某個權限

當咱們明白瞭如何用位掩碼來查詢權限後，要修改對應的權限也就手到擒來了，無非就是換一種位運算。假設仍是 update 權限，若是我想把它修改爲 true，咱們能夠這麼幹：

只須要把按位與改成按位異或便可，代碼以下：

// 從左往右，依次爲 create, update, read, delete 所對應的值
const permissionBinary = 0b0010
// 因爲 update 位於右數第三位，所以只須要讓掩碼向左移動2位便可
const mask = 0b1 << 2
const result = permissionBinary ^ mask
parseInt(result).toString(2) // 0b0110

通過上面的內容，相信你已經基本掌握了位掩碼的知識，同時你確定還有不少問號，好比說這麼複雜又很差閱讀的代碼，真的有意義嗎？

髒數據記錄

前文例子中的權限系統僅有區區4個數據的處理，位掩碼技術顯得複雜又小題大作。那麼有沒有什麼場景是真的適合使用位掩碼的呢？髒數據記錄就是其中一個。

假設咱們存在着一份原始數據，其值以下：

let A = 'a'
let B = 'b'
let C = 'c'
let D = 'd'

給定一個二進制數，從左往右分別對應着 A/B/C/D 的狀態：

let O = 0b0000 // 十進制 0

則數據一旦發生了修改，均可以用對應的比特位來表示

// 當且僅當 A 發生了修改
O = 0b1000 // 十進制 8
// 當且僅當 B 發生了修改
O = 0b0100 // 十進制 4
// 當且僅當 C 發生了修改
O = 0b0010 // 十進制 2
// 當且僅當 D 發生了修改
O = 0b0001 // 十進制 1

同理，當多個數據發生了修改時，則能夠同時表示

// 當 A 和 B 發生了修改
O = 0b1100 // 十進制 12
// 當 A/B/C 都發生了修改
O = 0b1110 // 十進制 14

經過這個思路，應用排列組合的思想，能夠很快知道只須要僅僅 4 個比特位，就能夠表達 16 種數據變化的狀況。因爲二進制和十進制能夠相互轉化，所以只須要區區 16 個十進制數，就能夠完整地表達 A/B/C/D 這四個數據的變化狀況，也就是髒數據追蹤。舉個例子，給定一個髒數據記錄 14，二進制轉換爲 0b1110，所以表示 A/B/C 的數據被修改了。

Svelte 這個框架，就是經過這個思路來實現響應式的：

if ( A 數據變了 ) {
  更新A對應的DOM節點
}
if ( B 數據變了 ) {
  更新B對應的DOM節點
}
/** 轉化成僞代碼 **/
if ( dirty & 8 ) { // 8 === 0b1000
  更新A對應的DOM節點
}
if ( dirty & 4 ) { // 4 === 0b0100
  更新B對應的DOM節點
}

老鼠喝毒藥

除了用來作髒數據記錄之外，位掩碼也可以用來處理經典的」老鼠喝毒藥「的問題。

有 1000 瓶水，其中有一瓶有毒，小白鼠只要嘗一點帶毒的水24小時後就會死亡，問至少要多少隻小白鼠才能在24小時內鑑別出哪瓶水有毒？

咱們簡化一下問題，假設只有 8 瓶水，其編號用二進制表示：

接着按照圖示的方式對水瓶的水進行混合，獲得樣品 A/B/C/D，取4只老鼠編號爲 a/b/c/d 分別喝下對應的水，獲得以下的表格：

在 24 小時候，統計老鼠的死亡狀況，彙總後能夠獲得表格和結果：

答案呼之欲出，因爲 8 瓶水能夠兌出 4 份樣品，所以只須要 4 只老鼠便可在 24 小時後肯定到底哪一瓶水是有毒的。回到題目，若是是 1000 瓶水，只須要知道第 1000 號的二進制數 0b1111101000便可。該二進制數一共有 10 個比特位，意味着 1000 瓶水能夠兌出 10 份樣品，也就是說只須要 10 只老鼠，就能夠完成測試任務。

尾聲

關於位掩碼技術的探索就到這裏。相信在認真讀完這篇文章之後，你們內心已經創建起對位掩碼技術的概念。這是一種很是特別的問題解決思路，也許在將來的某一天你真的會用上它。

---