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

请注意，我在这里有一些状态，以及一些我希望我可以私有的实例方法等等。所以，任何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
   }
});

函数名称前面的下划线将使其成为私有。您还可以将窗口小部件功能设置为对象并访问变量（如果这是您想要的）：

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

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

然后你就像创建任何其他UI小部件一样“创建”你的小部件：

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

大量的选项和内置的jQuery工具，允许您构建自己的小部件。不过，不要把它作为教程，我会让你自己阅读所有关于它们的内容。快乐的小工具！

使用jQuery封装UI组件

1 个答案: