文章加密

;

2024年11月28日 星期四

ibm 技術, 特別注重css

css:

1.
父元素底下的子元素間距離左邊的元素間格8px並且不加在最後一個元素上，省了寫not last child的部分
.alert {
  padding:10px;
  >*+* {
     margin-left: 8px;
   }
}




2. v-bind在css 是vue3的var() 語法糖

限制與注意事項

  1. 數值需自行加單位：
    如果綁定的值是數字，記得附加單位，例如：

    margin-top: v-bind(gap + 'px');

  2. 僅支持樣式作用域內：
    v-bind() 只能用在 <style scoped> 中，不能直接用於全局樣式。

  3. 瀏覽器兼容性：
    這依賴於 CSS 變數，因此需要現代瀏覽器的支持。


<template>
  <div class="box"></div>
</template>

<script>
export default {
  props: {
    gap: {
      type: String,
      default: '10',
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  padding-top: v-bind(gap +'px'); // 將 props.gap 動態綁定到 CSS
}
</style>



// 以下 var()
<template>
  <div class="dynamic-box" :style="`--dynamic-color: ${color};`">
    Styled by props!
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'blue',
    },
  },
};
</script>

<style lang="scss">
.dynamic-box {
  background-color: var(--dynamic-color);
  padding: 10px;
  border: 1px solid var(--dynamic-color);
}
</style>



3.

  • :deep(.a + .a)
    這表示選擇作用域內類名為 .a 的元素，並選中其後直接緊接另一個 .a 元素的組合。這是正確且有效的寫法。

  • :deep(.a) { & + .a { } }
    這是一種嵌套的寫法，表示與上一個寫法等價，選擇 .a 元素，並設置它後面直接相鄰的 .a 元素樣式。

因此，兩種寫法的選擇器目的是相同的。


4. constant() 和 env() 是 CSS 函數，用於訪問環境變數。這些變數通常由設備或瀏覽器設置，用於適配特定設備（例如具有瀏海的手機）。它們最常用於處理安全區域（safe area insets）的布局。

1. constant()

  • 概念：constant() 是早期的 CSS 函數，曾被用來引用瀏覽器環境變數，例如 iOS Safari 中的安全區域（safe area）。
  • 狀態：已被廢棄，現已由 env() 取代。
  • 支持情況：僅支持一些舊版的 iOS Safari（12 及更早版本）。

範例：

padding-top: constant(safe-area-inset-top);

在支持的瀏覽器中，這會將 padding-top 設置為設備頂部的安全區域高度。

2. env()

  • 概念：env() 是現代 CSS 中推薦的方式，用於訪問環境變數，提供對設備特定屬性的支持，例如安全區域。
  • 支持情況：現代瀏覽器，包括 iOS Safari、Chrome 等。

範例：

padding-top: env(safe-area-inset-top);

這是目前標準方式，用來確保內容不會與瀏海等設備元素重疊。

使用場景

這兩個函數通常用於適配帶有安全區域的設備，尤其是 iPhone 帶有瀏海或圓角的情況。

常見環境變數

  • safe-area-inset-top：安全區域的上間距
  • safe-area-inset-bottom：安全區域的下間距
  • safe-area-inset-left：安全區域的左間距
  • safe-area-inset-right：安全區域的右間距

範例：

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}





結論

  • 如果需要兼容舊版 iOS Safari：可以同時使用兩者，例如：
    padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
  • 在現代開發中，優先使用 env()，因為它是 CSS 的標準化功能且被廣泛支持。


5.字面量类型 ( Literal type )是 JavaScript 本身提供的一个准确变量

type Status = 'success' | 'error' | 'pending';  // 用|設定多的types，叫做union types 聯合型別

let requestStatus: Status = 'success'; // 僅允許這三種值


測驗練習:

function iTakeFoo(foo: 'foo') {}
const test = {
  someProp: 'foo'
};

iTakeFoo(test.someProp); // Error: Argument of type string is not assignable to parameter of type 'foo'

这是由于 test 被推断为 { someProp: string }，我们可以采用一个简单的类型断言来告诉 TypeScript 你想推断的字面量：

function iTakeFoo(foo: 'foo') {}

const test = {
  someProp: 'foo' as 'foo'
};

iTakeFoo(test.someProp); // ok

或者使用类型注解的方式，来帮助 TypeScript 推断正确的类型：

function iTakeFoo(foo: 'foo') {}

type Test = {
  someProp: 'foo';
};

const test: Test = {
  // 推断 `someProp` 永远是 'foo'
  someProp: 'foo'
};

iTakeFoo(test.someProp); // ok

6.keyof 顧名思義就是把「物件型別（object type）」的 key 拿出來，但要留意的是，這裡提到的是「物件型別」，而不是真的「物件」，前者是 TypeScript 的型別，後者是 JavaScript 中的一個物件（object）：

// Person 是一個 object type
type Person = {
  firsName: string;
  lastName: string;
};

// person 是 JavaScript 的 object (value)
const person = {
  firstName: 'Aaron',
  lastName: 'Chen',
};


// Person 是一個 object type
type Person = {
  firsName: string;
  lastName: string;
};

// keyof operator
type PersonKey = keyof Person;   //"firsName" | "lastName"


「物件型別」的 key 可以是 string、number 或 symbol，但 JavaScript 中「物件」的 key 只會是 string 或 symbol。


type PersonKey = keyof Person & string;   //  TS 就會明確知道說你要取出的是型別為 string 的 object key


symbol 是 JavaScript 中的一個內建資料型別（從 ES6 開始支持），每次創建的 symbol 值都是唯一的，即使它們有相同的描述字（description）。它通常用於建立物件中獨一無二的屬性名稱，以避免鍵名衝突。
如下:
const uniqueKey = Symbol("uniqueKey");
const anotherKey = Symbol("uniqueKey");

let obj: { [key: symbol]: string } = {};
obj[uniqueKey] = "Value associated with uniqueKey";
obj[anotherKey] = "Value associated with anotherKey";

console.log(obj[uniqueKey]); // "Value associated with uniqueKey"
console.log(obj[anotherKey]); // "Value associated with anotherKey"

為什麼使用 symbol？

  1. 唯一性：symbol 保證每個值都是唯一的，用於防止屬性名稱的衝突。
  2. 隱私性：symbol 鍵的屬性通常不會被 Object.keys() 或 for...in 列舉出來，因此可以用作一種隱藏的屬性。
const hidden = Symbol("hidden");
let obj = {
  visible: "This is visible",
  [hidden]: "This is hidden",
};

console.log(Object.keys(obj)); // ["visible"]
console.log(obj[hidden]);      // "This is hidden"


注意!當 key 被定義為 number，在 JavaScript 的底層，物件的鍵（無論是否定義為數字）都會自動轉換成字串形式。這是因為 JavaScript 中，物件的鍵始終以字串形式存儲。然而，TypeScript 層會進行靜態型別檢查，確保你只使用數字型別的鍵來進行操作。
所以以下 [key: number]: number;  會和 [key: string]: string;  有衝突
type Example = {
  [key: string]: string;  // 鍵是字串
  [key: number]: number;  // 鍵是數字（實際仍會轉換為字串）
  [key: symbol]: string;  // 鍵是 symbol
};

const mySymbol = Symbol("mySymbol");
const example: Example = {
  "name": "TypeScript",
  1: 1,
  [mySymbol]: "Unique",
};

console.log(example.name);      // "TypeScript"
console.log(example[1]);        // "JavaScript"
console.log(example[mySymbol]); // "Unique"


可改成 拆分結構的寫法
type Example = {
  [key: string]: string; // 字串鍵
} & {
  [key: number]: number; // 數字鍵
};

const example: Example = {
  "name": "TypeScript", // 符合 [key: string]
  1: 1,                 // 符合 [key: number]
};

console.log(example.name); // "TypeScript"
console.log(example[1]);   // 1


或移除重疊範圍
type Example = {
  [key: string]: string | number; // 字串鍵，但值可以是數字或字串
};

const example: Example = {
  "name": "TypeScript",
  1: 1, // 數字鍵會被轉換為字串鍵
};

console.log(example.name); // "TypeScript"
console.log(example[1]);   // 1

但因為typescript仍有其鑑別力
所以以下這樣寫是不行的
type Example = {
  [key: number]:  number; 
};

const example: Example = {
  "name": 123
};

總結:

在 TypeScript 中，透過 keyof 則可以看到 any 的型別是 string | number | symbol：

type KeyOfAny = keyof any; // type KeyOfAny = string | number | symbol

也就是說，在 TypeScript 中，能接受作為 key 的型別只能是 string、number 或 symbol，其他的型別像是 boolean 或 function 是不能被當作 key 的。

7.
export interface IResponseData{
    readonly [key:string]: any;  // 讓api response設定這個型別，如此就沒有人可以修改它!

}




張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)