Skip to main content

1-12

<input> autocomplete 屬性​

  • 跟表單輸入相關的標籤可以使用 autocomplete 屬性決定是否自動填入。
  • 在 FF & Safri 下可以填 off / on 來開啟或關閉自動填入功能。
  • 但在 chrome 下目前無法關閉自動填入帳密功能，它總是會判斷目前欄位若是帳密的話都會自動填入無法關閉。

JavaScript 測驗​

arguments

  • function arguments 是一個類陣列物件，只有 length 屬性，其餘的陣列屬性或方法都沒有。
  • 可用解構陣列寫法 ... 或 Array.from() 轉換成陣列。

字串與 undefined 相加

  • “!!” + undefined = “!!undefined”

bind、apply、call

  • 皆為 function 底下的方法。
  • 都是改變執行函式時的 this 指向，第一個參數皆為要綁定的 this 指向，如不需要綁定給 null 即可。
  • apply 第二個參數必須為陣列，陣列內值會傳入該綁定的函式內。sendMsg.apply(null, [1,"2",3])
  • call 第二個參數開始可傳入任意個，會傳入該綁定的函式內。sendMsg.call(null, 1, "2", 3)
  • bind 會回傳綁定好 this 之後的函式，之後若再接 apply 或 call 皆不會改變。
  • bind 也能預先綁定參數，第二個參數開始可傳入任意個作為綁定的參數，之後呼叫 bind 後的函式只要給剩下的參數即可：
function sendText (type, content, from) {...};
const sendHelloMsg = sendText.bind(null, ‘message', ‘hello’);
sendHelloMsg('jason');

class、super、this、constructor

Vue .sync 修飾子​

  • 用於父傳子時，v-bind.sync，使子組件能以 $emit(‘update:XXX, value’) 的方式更改父傳來的 props。
  • 算是一種語法糖，等同於寫 @xxx=“xxx” @update:xxx=“xxx = $event”。
  • 使閱讀程式碼時看到 .sync 即可知道此 props 能被子組件修改。

Nuxt & Tailwind CSS​

  • 預設會查找下列路徑文件，如果沒有則用預設配置。./assets/css/tailwind.css & ./tailwind.config.js
  • nuxt.config.js 也可寫 tailwind 配置，但最終合併時，tailwind.config.js 優先級最高。

Nuxt transitions​

  • 有全局 layout, page 可設定，亦可在每個 page 頁面做客製，單獨頁面設定的 transition 優先套用。

Tailwind CSS 語法檢查​

// stylelint.config.js
module.exports = {
  extends: ['stylelint-config-standard'],
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'variants',
          'responsive',
          'screen'
        ]
      }
    ],
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null
  }
}

prefers-color-scheme​

  • @media (prefers-color-scheme: dark) {}
  • 如同螢幕斷點一樣，此 media 屬性能抓取目前裝置的暗或亮色主題，有 light、dark 兩種值。
  • 搭配 CSS 變數，就能做到以原生 CSS 快速切換主題。

window.matchMedia(mediaQueryString)​

  • window.matchMedia(‘(prefers-color-scheme: dark)’)
  • mediaQueryString: 如 (prefers-color-scheme: dark) (max-width: 1440px)
  • 會返回一個包含是否符合條件的物件， .maches 可取得 Boolean 值。

Nuxt 載入動態圖片​

  • :src=“require(.....)”，需使用 require 語法。

Window-reflecting body element event handler set

  • https://medium.com/@mingjunlu/window-onscroll-vs-document-body-onscroll-9c331bb8d298
  • 兩種方法設置網頁監聽事件，addEventListener()、onevent handler。
  • onevent handler，有兩種寫法設置，寫在 html 上: <button **onclick**="doSomeCoolStuff()">Click me</button>、用 JS : el.onclick = function () {...}
  • onevent handler 重複設置的話，後面會蓋掉前面。
  • addEventListener() 則會一直加上去。
  • ║ onblur ║ onerror ║ onfocus ║ onload ║ onresize ║ onscroll ，為 Window-reflecting body element event handler set，如：設置 window.onscroll 等同於 document.body.onscroll
  • 在 window 設置上述會映射的事件，在 document.body 也會有。(document 和其他 html 元素則不會 )

WebP Image​

<picture> // 讀取順序由上而下，未支援 webp 或 picture 標籤的瀏覽器將會使用 img
    <source srcset="good.webp" type="image/webp">
    <source srcset="good.jp2" type="image/jp2">
    <source srcset="good.jxr" type="image/vnd.ms-photo">
    <img src="fallback.jpg" alt="404">
</picture>

背景圖設置 webP 的話：

  • 透過撰寫 CSS 設置不同背景圖：.webp .xxx-background {...}、.no-webp .xxx-background {}
  • 接著用 JS 去偵測是否支援 webP，支援則在 html 增加 .webp class，以觸發上述寫的 CSS。
  • JS 偵測可用套件也可自己寫一個：監聽 DOMContentLoaded 事件 → 載入一張 1×1 像素的迷你 WebP 圖 → 成功就在 html 增加 .webp，否則加 .no-webp。

文章中還有提供瀏覽器未啟用 JS 的情況，也要正常載入圖片的方法。

Last updated on