又LAG隨性筆記
  • 關於我
  • 作品集
  • 生活隨筆
  • 與我聯絡
  • 隨手扎

隨手扎

December 9, 2022

你可能不知道在JS世界裡的特殊物件

特殊物件清單

JavaScript是一個有著龐大使用族群的程式語言,但是因為其歷史淵源和不同考量等因素下,其中有不少令人萬丈摸不著頭緒的設計。自連class都只作為保留字而無實際作用的時候,就已經有在接觸,在後續越了解越多,想想應該是能來分享一些,其中一些我知道的特殊物件。

  • undefined
  • null
  • this
  • super
  • NaN
  • Infinity
  • new
    • new.target
  • Object.prototype
    • 先有Function還是先有Object
  • Symbol
    • Symbol.for()、Symbol.keyFor()
  • document.all
    • typeof document.all
  • arguments
  • hashbang
  • HTML comment
  • 'use strict'
  • globalThis
  • window
  • document

其中有一些並不是真正的物件,但都是一些執行環境下支援特殊寫法。或許有一些並沒有實際作用,但可能很多人並不知道,畢竟平常大概也沒有人會這樣寫吧!所以其實也就是一些JavaScript裡無關緊要的有趣小地方。 當然…當中有一部分也有可能成為你日後會踩入的陷阱(抗)。那麼就先來說說undefined和null吧!

undefined

undefined是一個屬於undefined的物件。(但可能不是唯一)

typeof undefined; // -> "undefined"

In all non-legacy browsers, undefined is a non-configurable, non-writable property. (Even when this is not the case, avoid overriding it.) – from MDN

儘管在現今主流的瀏覽器都是不可改變全域的undefined變數:

October 15, 2022

這些那些你可能不知道我不知道的web技術細節-目錄與完賽感想

終於、終於30天啦啦啦!!!

原本其實是有猶豫今年要不要報名的,因為去年結果讓我有點失落憔悴…

然後這次也沒有組團,沒拖人下水成功。雖然也還是有發現一些認識的朋友今年也有參加,但還是一度在猶豫要不要報名,所以我幾乎是拖到最後一天才報名的哈哈。

工作的這兩年,遇到的事情這樣看來應該不算少。我有把一些我有興趣的議題記錄下來的習慣,雖然回去看也就一些很零碎的關鍵字,甚至有些一度回想不起來是什麼玩意兒。 這些東西我是有可能另外寫出來做記錄發表的,所以這次抱著反正之後也還是想寫,那就參加寫吧的想法報名,沒完賽就算了。

不過其實原本是有兩個參賽主題的,但最後只選擇了一個。一方便是另外一個對現在我來說不太好組織,另外就是時間安排上,我是很後來才真正決定要報名的。

而且在開賽前幾天確診Orz
隔離了7天

「這些、那些、你可能不知道、我不知道的Web技術細節」記錄了一些受到工作同僚、朋友聊天討論啟發,進一步研究原本我不知道或沒那麼清楚的Web技術細節。儘管足有接近30篇,但其實與我原本記下的關鍵字還是少了不少。像是WebAssembly、WebRTC、WebGL、Mono Repo、Micro Frontend等等。有些東西我有一些接觸,也有不少是還需要花費大量時間學習的。

而且這個系列,每一篇都至少花 超過兩個小時 構思撰寫。並且我實在不是很像破壞每一篇的獨立和完整性。所以有些篇數對於一次要閱讀完怕是會有些吃力,但基本每一篇都可以獨立參考閱讀,而不需要在意閱讀順序性。

目錄(依發表時間序)

October 15, 2022

你可能不知道的Web API--Web Locks

前言

Web Locks相關的API目前還是實驗性質的,這意味著未來可能有所變動,會與本片內容提及用法、作用有差異。雖然是實驗性質,但目前主流瀏覽器都已經支援。

使用方式

最基本用法是透過navigator.locks.request()取得一把鎖,如果無法取得就必須等待直到能夠取得。如果取得了,就可以執行後續callback的動作。通常callback是一個異步函式,舉例來說寫法會如下:

navigator.locks.request('lock-1', async (lock) => {
  console.log('get lock-1');

  console.log('do something');

  console.log('release lock-1');
});

callback的執行區域,被稱作是 關鍵區域 (Critical section)。

如果設計的恰當,關鍵區域只會有一個在執行。把上面再改寫一下:

var lock_name = 'lock-1';

navigator.locks.request(lock_name, (lock) => {
    console.log(`A: get lock ${lock.name}`);
    return new Promise(res => {
        /// 10秒後釋放鎖
        setTimeout(() => {
            console.log(`A: release lock ${lock.name}`);
            res(); // release lock
        }, 10000 /*ms*/);
    })
})

navigator.locks.request(lock_name, (lock) => {
    console.log(`B: get lock ${lock.name}`);
    return new Promise(res => {
        /// 5秒後釋放鎖
        setTimeout(() => {
            console.log(`B: release lock ${lock.name}`);
            res(); // release lock
        }, 5000 /*ms*/);
    })
})

A: get lock lock-1 A: release lock lock-1 B: get lock lock-1 B: release lock lock-1

在上面範例,有兩個程式區塊A和B需要使用到lock-1這把鎖。A需要消耗10秒,並優先取得了鎖;B必須等待10秒後,才會開始執行。

可以透過將Promise的resolve()或reject()傳遞出來,來決定什麼時候要釋放鎖:

October 14, 2022

你可能不知道的(Web)API--FinalizationRegistry(GC)

你可能不知道的Web API–FinalizationRegistry(GC)

FinalizationRegistry是和WeakMap、WeakSet、WeakRef在ES12一同進入到語言規範裡的兩個API。其實後面幾個更容易使用到,但我今天偏偏就是要來聊聊前者–FinalizationRegistry。

在說說為什麼這個API有點雞肋可能沒什麼人知道之前,還是先介紹介紹這個API的用法。這個API的作用是在變數物件在被記憶體回收以前,可以註冊一些清理動作。比如可以建立物件:

var registry = new FinalizationRegistry((heldValue) => {
    console.log(`${heldValue} is cleaned`);
})

var obj1 = { toString() { return "<Object obj1>"} };

registry的callback function將快被記憶體回收的訊息打印出來。如果我們希望了解obj1和obj2何時被回收,可以用.register()註冊:

registry.register(obj1, obj1.toString());

那麼當obj1或obj2不再可以被存取的時候,就有可能被記憶體回收,進而列印出訊息出來:

obj1 = null;

至於為什麼obj1不能使用delete,可以參考「你可能都不瞭解的JS變數祕密 - 一文了解無宣告、var、let、const變數細節」
(突然發現這也是你可能不知道系列呢XD)

October 13, 2022

你可能不知道的Web API--postMessage

前言

postMessage()是少數可以讓兩個不同頁面交換訊息的方式。如其名,傳遞訊息,postMessage()接收一段文字訊息,將這個文字訊息傳遞給通知的對象。通知的對象可以監聽message事件獲取訊息。

關於postMessage()

實際上現在瀏覽器網頁API上,存在的postMessage()API不只一個。有window.postMessage()、Worker.postMessage()、BroadcastChannel.postMessage()和Client.postMessage(),它們有著類似的使用方式。除了不同頁面溝通外,對於建立的Web Worker執行緒也有相似方式傳遞訊息,除Worker.postMessage()外,在Web Worker環境下還可以建立BroadcastChannel物件,使用BroadcastChannel.postMessage()方法。至於Client.postMessage()是在Service Worker使用的,有在寫PWA(Progressive Web Application,漸進式網頁應用程式)才比較會用到。

本節主要討論的是最基本的window.postMessage()。

基本用法

基本上的用法可以傳遞一個字串作為訊息發送出去,像是window.postMessage("msg")。然後監聽message事件。所以我們可以做一個簡單的例子。

現在建立兩個頁面index.html作為主畫面,sub.html作為用iframe嵌入在主畫面的子畫面。

主畫面內容如下,除了一個發送訊息的文字話框外,還有一個接收訊息的文字畫框,以及一個發送訊息的按鈕。

<!------ index.html ------>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>[DEMO] postMessage (Main)</title>
  </head>
  <body>
    <form>
      <textarea cols="30" id="msg" name="" rows="10"></textarea>
      <br/>
      <textarea cols="30" id="rev" name="" rows="10" disabled></textarea>
      <br/>
      <button>send</button>
    </form>

    <hr/>

    <iframe frameborder="0" src="sub.html"></iframe>

    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

相對來說子畫面就簡單一些,只有一個接受訊息的地方。它會將接受到的訊息原封不動的回傳回去。

October 12, 2022

你可能不知道的CSS Injection

前言

當你只是簡單地設置了一個CSP以後:

Content-Security-Policy: defalut-src 'self';

會發現誒~為什麼inline-script也不工作了?

<script type="text/javascript">console.log('Hello, World');</script>

要解決這個問題,同樣必須計算腳本雜湊值,然後設置新的內容安全政策:

Content-Security-Policy: defalut-src 'self';script-src 'sha256-2cq9aRSFdLqAC0FNx8cqcUjxA2Bmk5ZjlSvbIPQ1x/U=';

當然不止這種做法,還可以設置nonce等方式。

  • ««
  • «
  • 1
  • 2
  • 3
  •  … 
  • 33
  • »
  • »»
© 又LAG隨性筆記 2023