Skip to main content

2-10

Iframe 允許全螢幕​

  • 若 Iframe 的網頁本身有全螢幕的功能，或是 Iframe 的網頁裡又有另個 Iframe 或影片等等需要全螢幕的元素的話，若沒有在該 Iframe 上設置 allowfullscreen，則 Iframe 裡的全螢幕功能是被擋掉的。
<iframe allowfullscreen ...>

Vue 重新複習與觀念釐清：​

Vue 自定義事件名稱​

Vue 綁定傳值與監聽事件​

  • 事件與傳值皆可使用一個物件綁定：
  • v-bind="{ name, age }"
  • v-bind=“{...$attrs, ...$props}”
  • v-on="{ click: function(){...}, focus: function(){...} }"
  • v-on="$listeners"
  • v-on="{...$listeners, click: function() {...} }"

Vue Slot​

<custom-card>
    <template #header>
        <h1>Hello!</h1>
    </template>
</custom-card>
  • v-slot 只能與 <template> 標籤搭配使用。
  • v-slot 可以用 # 簡寫。
  • 未定義名稱的 slot 區塊會預設給它 default 名稱，所以可以用 #default 來指定給未定義名稱的 slot 區塊。
  • 可動態切換要 slot 的位置： v-slot:[dynamicSlotName] (極少用)

若是 slot 內的值需要使用到 component 內的資料，則可以用下列方式綁定：

<slot name="default" v-bind:bar="foo.bar"></slot>
<!-- <template v-slot:default="{ bar }"> 可直接使用解構 -->
<template v-slot:default="props">
    {{ props.bar }}
</template>

Vue Router Navigation Guards​

  • Vue Router 4 開始不再需要使用 next() 才能繼續往下執行，只要 return 就好，除了 return fasle 之外，路由切換都會正常執行。

TypeScript: Error: cannot redeclare block-scoped​

以 variable 'name' 為例：

  • TypeScript 預設不會將文件內容識別為一個個 module，除非在檔案內有 import 或 export 關鍵字。
  • 無特別設定的話，TypeScript 執行環境為 window，所以與 [window.name](http://window.name/) 變數命名衝突了。
  • 是其他變數則看是否是自己重複定義了或是和套件內的變數名衝突。

解法：

  • 通用：檔案內有 import 或 export 關鍵字，例如：export {};
  • 與環境內已有的變數名衝突，那就改變執行環境：
// tsconfig.json
{
  "compilerOptions": {
      "lib": [
          "es2015" // 這樣就不是在 DOM 環境了
      ]
  }
}

  • 若為套件原因，可以 import 並命名成其他變數名：

  • import * as pluginCard from "some-plugin/card"; let card:SomeCardType // working!

  • 若套件沒有 TS 定義：

declare module "card" {
    declare var card: any;
    export = card;
}

teleport (Vue 3.0 新增)​

  • 被包在 teleport 內的元素將會被渲染至指定的元素下：
<div class="component">
    <teleport to="body">
        <Modal>Other Elements</Modal>
    </teleport>
</div>
<body>
   <Modal>Other Elements</Modal> 
   <div>
      <!-- <Modal>Other Elements</Modal> -->
   </div>
</body>
  • 若多個元件都指向同一個元素底下，則會依照置入順序渲染。
  • 被 <teleport> 移動位置的 DOM 節點，並不會被刪除後重新建立，而是會類似 <keep-alive> 那樣地保留元件的當下狀態。

函式跟方法的差別​

函式是封裝了一些獨立的功能，可以直接呼叫，能將一些資料（引數）傳遞進去進行處理，然後返回一些資料（返回值），也可以沒有返回值。 ... 所有傳遞給函式的資料都是顯式傳遞的。 方法（MethodType） 方法和函式類似，同樣封裝了獨立的功能，但是方法是隻能依靠類或者物件來呼叫的，表示針對性的操作。

Secure Headers​

NGINX misconfiguration in Real World Modern Web’21​

  • Root redirect shold be assigned carefully
  • Double check URI normaliztion
  • Slash matters! (location, alias, proxy_pass, ...)
  • Inconsistency on path normalization between web servers

concurrently 套件​

  • 可用 * 號同時執行多項命令
"start:watch": "tsc -w",
"start:run": "nodemon build/index.js",
"start": "concurrently yarn:start:*"

JavaScript pseudo protocol 攻擊​

需嚴格檢查下列會使用 User 輸入的值的情況

<a href="javascript:alert(1)">click me</a>
window.location = 'javascript:alert(1)'
window.location.href = 'javascript:alert(1)'
window.location.assign('javascript:alert(1)')
window.location.replace('javascript:alert(1)')

Last updated on