代码之家 › 专栏 › 技术社区 › Adam Kiss

javascript插件-面向对象?

module-pattern singleton jquery javascript

Adam Kiss · 技术社区 · 16 年前

简介

你好

或 / 和

这是在伪代码给你一个想法,因为我不能真正用正确的词用英语描述它,不可能去用谷歌找到我想用(和学)的东西。

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 .

问题

我真的不知道从哪里开始此对象/插件的
我不确定如何维护一个变量,即jQuery对象的集合(类似 $('#simple, #simple2'); )
我可能想用 $.fn.addToPlugin 使用对象的链接,但这应该很简单(实际上只是 each( p.add($(this)); ) )

我希望我有任何意义,想法,链接或建议赞赏。

编辑

它是这样的,我只是不知道它是如何在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();

2 回复 | 直到 14 年前

Eddy Kavanagh 16 年前

YAHOO module pattern 应该给你看你需要的一切。

cletus 16 年前

看一看 Plugins/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();

现在,它有一个限制,就是能够将参数传递给那些效果。不太清楚该怎么处理。