Question

我知道如何在 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 中创建插件？

Shoud我创建类和构造函数添加选择器和选项？

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插件吗？

Answer 1

我建议使用WebUI library进行插件开发。 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}}语法将值绑定到ShrinkTextComponent中声明的String text属性
使用组件时，您可以传递默认值：<x-shrink-text text="Some other text!"></x-shrink-text>
getShadowRoot()将检索组件的根元素;无需查询DOM
您必须导入组件才能使用它
您可以将事件直接绑定到DOM元素：<div on-mouse-over="shrink()></div>

如您所见，Web组件是封装和重用应用程序代码和内容的一种非常强大的方法。这是一个仅涉及Web组件基础知识的简短示例，我建议您阅读有关该主题的更多信息。我上面发布的链接是一个很好的起点。

如何创建插件？

1 个答案: