0

jQueryでプラグインを作成する方法を知っています

(function($) {

    $.fn.pluginName = function(options) {
        // Establish our default settings
        var settings = $.extend({
            opt1 : 'value',
            opt2 : null
        }, options);

        this.each( function() {
            // code
        });

    }

}(jQuery));

プラグインを呼び出すには:

$('el1, el2').pluginName({ opt2: 'Hello World!' });

しかし、どのようにdartでプラグインを作成しますか?

クラスを作成し、コンストラクターにセレクターとオプションを追加する必要がありますか?

class PluginName {
    String selector;
    String opt1;
    String opt2;

    PluginName( selector, { this.opt1: 'value', this.opt2: null } ) {
        queryAll(selector).forEach((element) {
            // code
        });
    }
}

そして、次のように呼び出します。

new PluginName('el1, el2', { opt2: 'Hello World!' });

または、dart プラグインを作成するより良い方法はありますか?

4

1 に答える 1

0

プラグインの開発にはWebUI ライブラリを使用することをお勧めします。WebUI を使用すると、独自のコンテンツ (HTML)、スタイル (CSS)、およびロジック (Dart) を含むモジュール コンポーネントを構築できます。コンポーネントはマークアップに関して必要なすべてを認識している必要があるため、通常はセレクターを渡す必要はありません。以下は、マウス オーバーでテキストを縮小し、マウス アウトで再成長するコンポーネントの簡単な例です。

xshrinktext.html

    <!DOCTYPE html>

    <html>
      <body>
        <element name="x-shrink-text" constructor="ShrinkTextComponent" 
extends="div">
          <!-- Style the component -->
          <style>
            .shrunkText {
              font-size: 0.2em;
            }
          </style>


          <!-- Component content -->
          <template>
            <div on-mouse-over="shrink()" on-mouse-out="unshrink()">
              {{text}}
            </div>
          </template>


          <!-- Add logic -->
          <script type="application/dart">
            import 'package:web_ui/web_ui.dart';

            class ShrinkTextComponent extends WebComponent {
              String text;

              void shrink() {
                getShadowRoot('x-shrink-text').classes.add('shrunkText');
              }

              void unshrink() {
                getShadowRoot('x-shrink-text').classes.remove('shrunkText');
              }
            }
          </script>

        </element>
      </body>
    </html>

コンポーネントの使用:

<html>
  <head>
    <link rel="import" href="xshrinktext.html">
  </head>

  <body>
    <x-shrink-text text="Hello World!"></x-shrink-text>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

いくつかのメモ:

  • プラグインを作成するためにコードを呼び出す必要はありません。必要なのは x-shrink-text タグだけです
  • この{{text}}構文は、値をString textShrinkTextComponent で宣言されたプロパティにバインドします。
  • コンポーネントを使用するときに、デフォルト値を渡すことができます。<x-shrink-text text="Some other text!"></x-shrink-text>
  • getShadowRoot()コンポーネントのルート要素を取得します。DOM を照会する必要はありません
  • コンポーネントを使用するには、コンポーネントをインポートする必要があります
  • イベントを DOM 要素に直接バインドできます。<div on-mouse-over="shrink()></div>

ご覧のとおり、Web コンポーネントは、アプリケーション コードとコンテンツをカプセル化して再利用するための非常に強力な方法です。これは、Web コンポーネントの基本に触れただけの簡単な例です。このテーマについて詳しく読むことをお勧めします。上に投稿したリンクは、良い出発点です。

于 2013-07-09T14:54:01.667 に答える