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

javascript插件-面向对象?

  •  1
  • Adam Kiss  · 技术社区  · 15 年前

    简介

    你好

    /

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

    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 使用对象的链接,但这应该很简单(实际上只是 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 回复  |  直到 13 年前
        1
  •  2
  •   Eddy Kavanagh    15 年前

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

        2
  •  3
  •   cletus    15 年前

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

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