API de composants Web à l'épreuve des balles

Web 元件/自訂元素提供了一些出色的功能，可以使您的使用者體驗更加高效和可擴展，但也有一些「陷阱」可能會阻止團隊獲得良好的組件體驗。

問題

自訂元素/Web 元件的一大優點有時對他們來說是一個挑戰 - 它們可以在任何地方使用。您永遠不知道它們是否在框架中、在類型安全的環境中使用、在伺服器上使用 PHP 等語言呈現、使用 JavaScript 的 creatElement 函數以程式設計方式創建，甚至在普通的 HTML 中。

挑戰在於沒有一致的方法來確保正確實作您的 Web 元件 API。因此，我們元件庫的 PR 清單中的一項是：

✅ 屬性和屬性在設定、取消設定和設定不當時都有效。

例如，在我們的函式庫中，我們有一個「輸入」元件，就像原生的 一樣。元素，具有帶有一些指定值的 type 屬性。它不具有所有相同的選項，因為我們為其他一些控制項（如單選按鈕和複選框）提供了特定的元件。

/** A string specifying the type of control to render. */
@property()
type:
  | 'color'
  | 'date'
  | 'email'
  | 'number'
  | 'password'
  | 'search'
  | 'tel'
  | 'text' = 'text';

注意：程式碼範例使用 Lit，但這裡討論的原理可以應用於其他函式庫和框架。

當我們測試此屬性時，我們得到不一致的結果。

• 設定
  • 一切都如預期進行。

<my-input type="color"></my-input>
<my-input type="date"></my-input>
<my-input type="email"></my-input>
<my-input type="number"></my-input>
<my-input type="password"></my-input>
<my-input type="search"></my-input>
<my-input type="tel"></my-input>
<my-input type="text"></my-input>

• 未設定
  • 由於預設值而未設定屬性時，組件可以正常工作
  • 當屬性未定義時，元件會正確呈現，因為內部 HTML 元素是有彈性的，但元件中的自訂邏輯和驗證會中斷

// When the attribute is not set
<my-input></my-input>

// When the property is `undefined` (example using JSX)
<my-input type={undefined}></my-input>

• 設定不當
  • 將 type 屬性值設為「垃圾」會呈現文字輸入，但也會破壞我們的自訂邏輯和驗證。
  • 將其設定為有效HTML 輸入類型的值，但不是我們為元件指定的值，會呈現不適合我們元件的控件，這不僅會破壞我們的自訂邏輯和驗證，還會破壞我們的樣式/設計。

<!-- not a real type -->
<my-input type="rubbish"></my-input>

<!-- we don't want users using this type -->
<my-input type="range"></my-input>

您可以在這裡測試這個範例：

我們該如何解決它？

我注意到原生 HTML 元素似乎通過了「設定、未設定和設定不當」測試，所以讓我們看看是否可以從中學習。

當我錯誤地設定本機輸入的屬性並記錄屬性值時，我可以明白為什麼它會起作用。

<!-- set the value to a non-standard type -->
<input type="rubbish" />
<input>



<p>If an invalid value is assigned to the attribute or property, it falls back to a default value. We should be able to do the same and still maintain strong typing.</p>

<p>Let's start by creating a list of valid values and a type for our property.<br>
</p>

<pre class="brush:php;toolbar:false">const inputTypes = [
  'color',
  'date',
  'email',
  'number',
  'password',
  'search',
  'tel',
  'text',
] as const;

我們可以使用陣列建立聯合類型以進行 TypeScript 驗證。

type InputType = typeof inputTypes[number];

Now we can update our custom elements property with some validation logic. We can do this by converting our existing property to a standard JavaScript class getter and setter.

// private property for storing the `type` property value
private _type: InputType = 'text';

/** A string specifying the type of control to render. */
@property()
set type(value: InputType) {
  // Confirming the value is in our approved list of values. If not, it will use a fallback value of "text"
  this._type = inputTypes.includes(value) ? value : 'text';
}

get type(): InputType {
  return this._type;
}

Here's our final output:

Conclusion

With this new validation in place, our input component is far more resilient than before and also allows for more complex validation if necessary. This method may also be overkill for some of your attributes, especially those that are for styling. For those scenarios, be sure to check out this article.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!