デコレーター @define: カスタム要素を強化する究極の呪文!-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

デコレーター @define: カスタム要素を強化する究極の呪文!

Susan Sarandon

Oct 31, 2024 pm 10:16 PM

Decorator @define: O Feitiço supremo para turbinar seus Custom Elements!

開発者の皆さん！無限のコーヒーループよりも強力な魔法を使う準備はできていますか? ☕ 今日は、フロントエンドジェダイマスターの秘密である @define デコレーターを明らかにします。リーナス・トーバルズさえ感動して泣いてしまうほど美しいコードを準備してください! ?

?この @define ってやつは何ですか?

想像してみてください: トニー・スタークがアイアンマンのアーマーを着ているのと同じ盗品でカスタム要素を設定できたらどうなるでしょうか?さて、親愛なる JavaScript パダワンの皆さん、@define はまさにそれです!

import { define } from '@bake-js/-o-id';

@define('botao-camaleao')
class BotaoCamaleao extends HTMLElement {
  // Código mágico aqui
}

ログイン後にコピー

とても簡単です! 「;」を見つけるよりも簡単です。コードで迷ってしまいますよね？ ?

?この魔術はどのように機能するのでしょうか?

この魔法の舞台裏を覗いてみましょう:

const define = (name, options) => (constructor) => {
  customElements.get(name) ?? customElements.define(name, constructor, options);
};

ログイン後にコピー

この小さなコードは、金曜日の午後の if...else よりも賢明です:

要素がすでに存在するかどうかをチェックします (同じ要素を 500 回定義することはできませんよね?)。
それが存在しない場合は、BAM!ガベージコレクターに二度考える機会を与えずに、その場で要素を定義します。

?これが Ctrl C Ctrl V の発明よりも革命的なのはなぜですか?

サハラ砂漠のように乾燥します: 常にcustomElements.defineを繰り返す必要はありません。あなたのコードはパン屋のジョークより無味乾燥です!
シュガー構文: JavaScript に Nutella を入れるようなものです。たまりません！
近藤麻理恵レベルの組織: クラスで要素の定義を維持します。満足度100%!
Ninja の柔軟性: ネイティブ要素を拡張したいですか?オプションを渡すだけです:

   @define('super-button', { extends: 'button' })
   class SuperButton extends HTMLButtonElement {
     // Código supimpa aqui
   }

ログイン後にコピー

⁉️このパワーをアプリで使用する方法

まず、Gods ライブラリをインストールします。

   npm install @bake-js/-o-id

ログイン後にコピー

究極のパワーをインポート:

   import { define } from '@bake-js/-o-id';

ログイン後にコピー

明日がないかのようにクラスを飾りましょう:

   @define('element-toppen')
   class ElementToppen extends HTMLElement {
     constructor() {
       super();
       this.innerHTML = `<p>Eu sou inevitável!</p>`;
     }
   }

ログイン後にコピー