JavaScript - 一群棒子

JavaScript

設計模式 Mediator

當同一個物件，之間會有頻繁交互作用時，透過中間人與參與者來進行溝通是一個很適合使用情境。例如：多個玩家與計分板、聊天室與多名使用者。只要是需要中間一個協調者來參與都是中介者模式的好時機。

JavaScript

設計模式 Strategy

當面對很多不同境境時採取不同的策略，例如：根據距離決定使用何種交通工具、不同的運送快遞有不同的金額計算方式、甚至是複雜點的表單驗證器、回合制戰鬥設計等，這個時候可以使用策略模式來設計物件。

JavaScript

設計模式 Singleton

筆記設計模式 singleton 的實作方式，用 JavaScript 來撰寫範例 code 未來有機會用到時可以回來看。

JavaScript

Jest 如何 mock localStorage

在撰寫測試經常會需要 mock window class 的操作，例如預期呼叫 alert 啦，呼叫 localstorage 等，那麼為何只是說要呼叫呢？因為很多時候要測試的是有沒有預期的執行，而不是執行過後的結果是什麼，例如 alert 期望他被呼叫到，而結果是啥並不重要

JavaScript

JavaScript hoisting

重新複習一下 JavaScript 一些奇怪的機制，例如 hoisting，很多面試題目照著直覺下去寫答案往往都沒有跟想像中一樣簡單，所以就來重新了解一下 hoisting 機制。

JavaScript

JavaScript undefined 與 null 的區別

紀錄一下 JavaScript undefined 與 null 的區別

JavaScript

運用 JavaScript ES6 的 Map Object 寫錯誤 mapping 表

如何潮到飛起的運用 JavaScript map object 製作一個錯誤訊息的 mapping 表，優雅的管理錯誤訊息。

JavaScript

JavaScript replace a file input with a Blob

JavaScript 使用 Blob 物件，取代 file input 檔案的實作方式。

JavaScript

JavaScript 瀏覽器端產生 csv 檔案

撰寫一個簡單的物件，在瀏覽器端處理資料並且下載 csv 檔案的筆記。

JavaScript

使用 Node.js 套件 Puppeteer 撰寫爬蟲

Puppeteer [https://github.com/GoogleChrome/puppeteer] 是 Google 開源的網路爬蟲工具，說明文黨一開始就提到 > Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. 主要是以 Chrome 當作核心個人使用起來感覺，就是使用程式去操作瀏覽器而已。範例 const puppeteer = require("puppeteer") exports.getPageTitle = async url => { const browser = await puppeteer.

JavaScript

JavaScript HTMLCollection / NodeList 轉 Array 的方法

如果習慣用 jQuery 的朋友某天改使用 Vanilla JS 選擇器一定會先矇一下，怎麼很多方法不能使用，錯誤訊息為.forEach is not a function 例如範例 document.getElementsByTagName('h3').forEach((el)=>{ console.log(el) }) 如果你看仔細一點其實會發現 document.getElementsByTagName 其實是 HTMLCollection 又或是 document.querySelectorAll('h3') 會給你 NodeList HTMLCollection 與 NodeList 差別那你會問兩個差別在哪？簡單來說 HTMLCollection 會是隨著 DOM 改變而一起變動，NodeList 則不一定，

JavaScript

JavaScript 使用 Web Speech Recognition 語音辨識

最近工作上有實作到語音辨識輸入這功能，不過在文件上並不是那麼清楚所以寫一篇筆記來紀錄事件觸發的順序。瀏覽器支援度可以用 Can I use [https://caniuse.com/#search=Speech%20Recognition] 這個網站看看瀏覽器的支援度，恩..基本上只有 Chrome 有辦法使用。手機更不用說了 iOS 全滅只有 Android 手機有辦法使用。判斷是否有支援語音辨識可以用以下程式碼 window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition if(!window.SpeechRecognition){ return } const recognition = new SpeechRecognition() 如果你直接 new SpeechRecognition() 就會 Uncaught ReferenceError: SpeechRecognition is not defi

JavaScript

JavaScript 非同步大亂鬥

大家都知道 js 的非同步特性，這是一把雙面刃有時一些奇怪的 bug 也是因為非同步的問題，現在 es6 的語法已經讓我們可以很簡單的去操作避免掉非同步的一些問題，回過頭來還是必須要去深入理解基本功這件事情。同步與非同步同步(Synchronous) 與非同步(Asynchronous) 這兩個名詞大家一定不陌生，以下用自己的認知來闡述這兩件事情，我們以一個餐廳的服務生當做例子。非同步：餐廳內的一個服務生可以點餐完將菜單交給廚房的廚師，並且接著服務下一桌客人等到廚房將餐點準備好可以出菜時再回來將餐點送到顧客的桌上。同步：餐廳內的一個服務生點餐完之後將菜單交給廚房，就在廚房等待廚師將餐點準備完畢將菜送到顧客桌上，才會再繼續服務下一桌的客人。看出來了嗎？兩著的差別在於服務生點餐完之後是否有繼續服務下一桌客人，以 Node 來講就是 Single Thread 可以一次處理多個 Request 不須等待第一個 Request 處理完再去處理下一個 Request。常遇到的問題範例再來看看下面這些範例，這些也是面試時很常見到的考古題。 console.log('Be

JavaScript

CKEditor 修改 upload request

CKEditor 相信大家都已經耳熟能詳，功能強大而且插件也多對於所見即所得編輯器是一個很好的選擇，編輯器內可以直接上傳圖檔或檔案的功能也很常見，今天你要在上傳多帶額外的資訊就沒有那麼簡單了，官方文檔你懂的… 前置作業在這之前你應該已經開啟了上傳功能，如果你還沒開啟可以參考本站文章 Laravel CKEditor 整合 Laravel file manager [https://bonze.tw/laravel-ckeditor-with-laravel-file-manager/] 整合 Laravel file manager 的部分，或是 File Manager Integration [https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browse_upload.html] TL;DR 如果你有看過官方文檔 [https://ckeditor.com/docs/ckeditor4/latest/guide/

JavaScript

ES6 學習筆記（二）箭頭函數的 this

那麼在先前已經學習過了箭頭函數的寫法，有沒有又覺得自己又潮了一點，箭頭函數並不只是單純寫法上的改變，另一個好處是箭頭函數的 this 是綁定父級作用域的，這麼說不太清楚不如直接看程式碼比較快。範例先來一段常常會見到的錯誤範例 const person = { name: 'jimmy', skills: ['html', 'css', 'php', 'js', 'vue', 'drupal', 'wordpress', 'laravel'], getSkills: function () { this.skills.map(function (skill) { // console.log(this)

JavaScript

ES6 學習筆記（一）箭頭函數

寫碼容易讀碼難，在 JavaScript ES6 中有一個語法叫做箭頭函數（arrow function）他的語法讓程式碼更加的簡短，以下是一段簡單的程式碼範例。範例 const arr = [1,3,5,7,9] const double = arr.map(function(arr){ return arr*2 }) console.log(double) // [2, 6, 10, 14, 18] //箭頭函數 const arr = [1,3,5,7,9] const double = arr.map((arr) => { return

JavaScript

JavaScript 何謂物件原型 (prototype)

何謂物件原型 (prototype) 每個 JavaScript 物件都會有第二個 JavaScript 的物件與之關聯，而這個第二個的 JavaScript 物件就被稱呼為 “物件原型” > 而第一個物件就是從這個原型來繼承特性參考方式： JavaScript 中我們使用下列方式來參考原型物件 Object.prototype 且像是 ECMADscript 定義的 Native(原生)物件：Object() 、 Date() 、 Array() … 也都具有著 prototype 的原型物件而當我們使用 new 與建構式（constructor）所產生的新物件： new Date(); 其原型就為建構式（constructor）的 prototype 特性，也就是： Date.prototype 另外一提： Object.