jquery - 使用 jQuery 封装 UI 组件

Question

我正在构建一个应用程序，其中涉及创建几个独特的 UI“小部件”，但我无法找到使用 jQuery 封装这些 UI 组件背后的逻辑的良好实践。这些大部分都是一次性组件，不会在应用程序中的多个位置重复使用。

我一直在尝试 lowpro plugin ，虽然它确实或多或少地允许我想要的，但我觉得使用它是违背“jQuery 方式”的。

为了提供一些背景信息，这里是我使用 lowpro 编写的内容的简短摘录。这是一个可排序的列表，其他元素可以添加到其中。当它初始化为空时，它会显示一个占位符。

FieldList = $.klass({
  initialize: function() {
    this.placeholder = $('#get-started-placeholder');
    if (this.items().length == 0) {
      this.deactivateList();
    } else {
      this.activateList();
    }
  },

  items: function() {
    return this.element.children('li:visible');
  },

  deactivateList: function() {
    this.element.hide();
    this.element.sortable('destroy');
    this.placeholder.show();
    var instance = this;
    this.placeholder.droppable({
      hoverClass: 'hovered',
      drop: function(e, ui) { instance.receiveFirstField(ui.helper); }
    });
  },

  activateList: function() {
    this.placeholder.hide();
    this.placeholder.droppable('destroy');
    this.element.show();
    var instance = this;
    this.element.sortable({
      placeholder: 'placeholder',
      forcePlaceholderSize: false,
      tolerance: 'pointer',
      handle: 'h4',
      opacity: 0.9,
      zIndex: 90,
      stop: function(e, ui) { instance.receiveField(ui.item); }
    });
  },

  receiveFirstField: function(element) {
    ...
    this.activateList();
  },

  receiveField: function(element) {
    ...
  }
});

$(function() {
  $('ol#fields').attach(FieldList);
}

请注意，我这里有一些状态，以及一些我希望可以设为私有(private)的实例方法，等等。因此，任何 jQuery 专业人士都可以告诉我他们如何在不依赖某些东西的情况下做到这一点就像 lowpro 可能会将 Javsacript 扭曲成不应该的样子？我有一种感觉，有一种干净的方法可以使用我提到的模块模式来完成类似的事情in this thread ，但对我来说这些碎片并没有真正整合在一起。

谢谢!

Answer 1

使用 jQuery UI "widget factory" 。这是所有其他 UI 小部件(Accordion、Dialog 等)所使用的。

有一个不错但有点令人困惑的教程 here 。 (这是我找到的最好的一个。)

基本上，您可以用更加 jQuery 的方式定义您的小部件，例如:

$.widget("ui.myCustomWidget", {
   _init: function(){
      //initialize your function
   },

   somethingElse: function(){
     //do something else here
   }
});

函数名称前的下划线将使其私有(private)。如果您需要的话，您还可以将小部件函数设置为对象并访问变量:

var foo = {
   _init: function(){
    //yada yada
  },
  somethingElse: function(){
     //do something else here
  }
};

$.widget("ui.myCustomWidget", foo);

然后您只需“创建”您的小部件，就像创建任何其他 UI 小部件一样:

$('div#myWidget').myCustomWidget();

大量选项和内置 jQuery 工具可让您构建自己的小部件。不过，我不会将其作为教程，而是让您自己阅读所有内容。快乐的小部件!