javascript 插件 - 面向对象？

Question

你好

，

我正在尝试用 javascript 开发一些插件或/和对象，它将控制某些对象的某些属性。它还将使用 jQuery 来简化开发。

这个想法

是用伪代码给你一个想法，因为我不能用正确的单词用英语真正描述它，不可能去使用谷歌来找出我想要使用的东西（并且学习）。

I will have plugin (maybe object?) with some variables and methods:

  plugin hideshow(startupconfig){
    var c, //collection
    add: function(what){
      c += what;
    },
    do: function(){
      c.show().hide().stop(); //example code
    }
  }

我将以这种方式使用它（或排序）：

  var p = new Plugin();

  p
   .add($('p#simple'))
   .add($('p#simple2'))
   .do();

注意

我并不是真的在寻找 jQuery 插件教程 - 它更像是在 javascript 中使用文档中的一个对象，jQuery 是提及只是因为它将用于修改 dom 和简化选择器，jQuery 插件可能只是为了那个小功能 add。

我正在寻找一些东西，它将位于我的顶部基于计时器或用户操作等从自身记录和调用函数。

问题

1. 我真的不知道从哪里开始构建这个对象/插件
2. 我不太确定如何维护一个变量，它是 jQuery 对象的集合（类似于 $( '#simple, #simple2');)
3. 我可能想用 $.fn.addToPlugin 扩展 jQuery 以使用对象链接，但这应该很简单（实际上只是 each( p.add($(this)); ))
4. 我最大的问题显然是我无法解释我想要什么。

我希望我能提出任何有意义的想法、链接或建议。

编辑

是这样的，我只是不知道它是如何在 javascript 中调用/使用的 - 伪 PHP 中的示例：

class Foo() {
  $collection;
  $timer, $action;

  function onTimer(){
    foreach($collection as $e){
      $e->someAction();
    }
  }

  function add($e){
    $collection[] = $e;
  }

  function start(){
    $timer->start( onTimer() );
  }

  function->stop(){
    $timer->stop();
  }
}

var f = new Foo();

Foo.add(something);
Foo.start();

Answer 1

查看插件/Authoring。我想说的是，您提出的 API 并不是真正的“jQuery 方式”。更有可能的是：

$("#simple, #simple2").hideandshow();

起点是：

jQuery.fn.hideandshow = function() {
  return this.each(function(){
    $(this).show().hide().stop();
  });
};

你基本上就完成了。

现在调用这一系列事件也没有任何意义，但这是另一个问题。

现在，方法链接变得更有趣了，我想这就是“单例”的用武之地。现在在 jQuery 的情况下——至少对于 jQuery 插件——状态作为一般规则存储在 jQuery 对象本身上:

jQuery.effects = [];
jQuery.addeffect = function() {
  for (int i=0; i<arguments.length; i++) {
    if (typeof this[arguments[i]] == "function") {
      this.effects.push(arguments[i]);
    }
  }
};

并由插件访问：

jQuery.fn.do = function() {
  var effects = this.effects;
  return this.each(function(){
    var ob = $(this);
    for (int i=0; i<effects.length; i++) {
      ob = ob[effects[i]]();
    }
  });
};

然后允许：

$.addeffect("hide", "show", "stop");
$("#simple, #simple2").do();

现在这有一个限制，即能够将参数传递给这些效果。不太确定如何解决这个问题。

Answer 2

如果您想用 Javascript 编写单例，请使用 YAHOO 模块模式 应该向您展示您需要的一切。