DAY 8. JavaScript and Me

本篇內容分為兩個部分

• 個人學習方式
• 個人常用的utils

其內容受眾屬於比較出階開發人員
但若您是資深前輩，小弟也深深希望可以看看我寫的內容，指點指點。

第一部分 - 學習方式

瞭解你所用到的 API

以前我會再遇到問題時候去找範例程式碼來參考修改，這樣的方式雖然可能解決眼前的問題
但事實上淺在很大的危險，若我們只參考眼前的程式碼，沒有對該程式碼裡面的每個API去深入瞭解
那其實就是用了一支半解的程式在我們專案當中，有的時候使用這樣東西比使用笨方法解決問題更糟糕
因此熟悉我們專案中每個API是非常重要的，花時間去把文件仔細地琢磨很重要！

驗證知識，知識補全

我們常會在網上聽到或看到一些技術的文章，常會介紹一些新潮有趣的內容
更棒的是很多人樂於分享他們的所學，所以將他們寫成文章並分享在網路上
但是人畢竟有可能出錯，所以當我們看到一個新的知識點，不仿跟同學、同事討論一下
接著更加深入的去找相關知識的真正來源，且最好可以打開編輯器手動玩一下新的所學

知識縫合

知識縫合是個簡單的概念，我是在某個Youtuber口中聽到的
它的意思是指，當我們接收到一個新的知識，不管是聽到、看到貨時其他任何形式
如果我們要真正的吸收它，就必須把知識與自己做一個縫合

寫部落格就是一個最簡單也非常有效的方式
我們可以藉由做筆記的時候梳理我們的知識內容，當在寫範例給自己看或給別人看時
可以立即的驗證到腦中的東西是否正確，因為我們必須將東西呈現給讀者之前好好的先驗證過執行結果。
而在這麼一個過程中，我們能夠將知識與自己做一個縫合，這能使我們提高學習的效率。

網路上的學習資源真的很多，但是如果我們只是光看不練習部筆記，很多時候其實那個時間是白花了
因為很容易在短時間內將它忘記，因此刻意練習將自己所得到的知識與自己縫合其實是最關鍵的。

第一部分總結

把握住以下三個重點

• 徹底了解自己所使用的 API
• 驗證與討論自己所得到的知識正確性
• 將知識與自己縫合

第二部分 - utils

utils主要用來定義在應用程式中不特別屬於某個模組且有很多時候會用到的方法。
以上這句話提到的模組、方法雖然不是本張的重點，但若對這兩個名詞不太熟悉
希望你不管是在讀這篇文章的前後，可以去了解一下他們真正的意義
本章主要分享我個人常用的utils，希望對你有幫助

另外也希望，若有更資生的前輩們閱讀到此文
可以過目一下並指點我程式中的不合理亦或是提供其他好用的utils

utils

/* 
 | 模仿jQuery，回傳的是單一Node
 */
window.$ = function (selector) {
  return document.querySelector(selector)
}
/*
 | 模仿jQuery行為，回傳的是NodeList
 */
window.$$ = function (selector) {
  return document.querySelectorAll(selector)
}
/*
 | 檢查使用者設備是否屬於 mobile
 | 可以自行添加條件，例如偵測裝置寬度
 */
window.isMobile = function () {
    return (
        navigator.userAgent.match(/Android/i)
        || navigator.userAgent.match(/webOS/i)
        || navigator.userAgent.match(/iPhone/i)
        || navigator.userAgent.match(/iPad/i)
        || navigator.userAgent.match(/iPod/i)
        || navigator.userAgent.match(/BlackBerry/i)
        || navigator.userAgent.match(/Windows Phone/i)
    )
}
/*
 | load image 屬於異步事件，在此將這個行為使用Promise封裝
 | 配合 async/await 用起來更棒！
 */
window.loadImage = function (url) {
    const image = new Image()
    return new Promise(resolve => {
        image.addEventListener("load", event => resolve(image))
        image.crossOrigin = 'anonymous'
        image.src = url
    })
}
/*
 | 建立一個符合裝置像素渲染比例的canvas元素
 */
window.ratioCanvas = function (width, height) {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const devicePixelRatio = window.devicePixelRatio || 1
    const backingStoreRatio = (
        ctx.webkitBackingStorePixelRatio
        || ctx.mozBackingStorePixelRatio
        || ctx.msBackingStorePixelRatio
        || ctx.oBackingStorePixelRatio
        || ctx.backingStorePixelRatio
        || 1
    )
    const ratio = devicePixelRatio / backingStoreRatio
    canvas.style.width = width + 'px'
    canvas.style.height = height + 'px'
    canvas.width = width * ratio
    canvas.height = height * ratio
    ctx.scale(ratio, ratio)
    return canvas
}

/*
 | 接受一個canvas元素與寬高，並回傳一個指定寬高的新canvas元素
 */
window.canvasResize = function (srcCanvas, width, height) {
    if (!srcCanvas.constructor.name === 'HTMLCanvasElement' {
        throw Error('first argument should instance of HTMLCanvasElement.')
    }
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = width
    canvas.height = height
    canvas.style.width = width + 'px'
    canvas.style.height = height + 'px'
    ctx.drawImage(srcCanvas, 0, 0, canvas.width, canvas.height)
    return canvas
}

/*
 | 懶人專用綁定事件
 */
Element.prototype.on = function(eventName, handler) {
  this.addEventListener(eventName, handler)
}

說明
以上是我個人的utils內容分享，每個函示的用途已經註解於程式碼中在此不多做贅述
其實在一些common的library或是framework的src或是core裡通常也會有這支檔案
若大家對自己所使用到的工具有興趣不妨去研究研究。