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!' });

还是有更好的方法来创建飞镖插件？

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}}语法将值绑定到ShrinkTextComponentString text中声明的属性
  • 使用组件时可以传入默认值：<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 回答