jquery - 第一次使用jquery插件的问题

Question

我想为选择菜单编写一个插件，底部字段为“自定义”，选择该菜单将出现一个输入框。

这是我第一次编写 jquery 插件，我想寻求您的建议以了解如何去做:

所以我有以下代码:

(function($) { 
  const CUSTOM_CLASS = 'custom';
  const HOLDER_CLASS = 'holder';

  $.fn.editableDrop = function() { 
    function _make_input() { 
      /* Ultimately, we want:
       * <select> </select>
       * <span>
       *  <input /> 
       *  <a href='#'>Submit</a><a href='#'>Cancel</a>
       * </span>
       */

      var $holder = $('<span>').css('display', 'none');
      $holder.append( $('<input type="text">').attr('class', HOLDER_CLASS) );
      $holder.append( $('<a class="cancel" href="#">Cancel<a/>'));
      $holder.append( $('<a class="edit" href="#">Edit<a/>'));
      return $holder;
    }

    function main(jq) {
      /* Takes a select tag jquery object and does the following:
       * -1) First put submit there
       * 0) Inject input as a sibling with display none.
       * 1) Inject a final option at the bottom
       * 2) When that is focused, change to input with a cancel button
       * 3) When cancel is pressed turn back to dropdown
       * 4) Check that everytime pressing Enter will disable the input
       */
      var $select = $(jq);
      var $inputs = _make_input()
      var $holder = $('.'+HOLDER_CLASS, $inputs);
      var $edit = $('.edit', $inputs);
      var $cancel = $('.cancel', $inputs);

      $inputs.insertAfter($select);
      $last = $("<option>").attr('class', CUSTOM_CLASS).text('custom').appendTo($select);
      $holder.val( $('option:first-child', $select).text() );   // set initial value

      // Don't return false here since they will be wrapped inside functions. 
      // return false inside the handler

      var edit = function() { 
        // Doesn't clear custom text. Do it yourself
        $holder.attr('disabled', false);
        $inputs.css('display', 'inline');
        $select.css('display', 'none');
        $edit.css('display', 'none');
        $cancel.css('display', 'inline');
      }

      var reset = function() { 
        $inputs.css('display', 'none');
        $select.css('display', 'inline');
        $('option:first-child', $select).attr('selected', true);    // Defaults sets the first element to selected
        $holder.val( $('option:first-child', $select).text() );     // Resets the value
      }

      var submit = function() { 
        $holder.attr( 'disabled', true );
        $edit.css('display', 'inline');
        $cancel.css('display', 'none');
      }

      var value = function() { 
        return $holder.val();
      }


      /* These are just event listeners */
      $select.change(function() { 
        var $sel = $select.children('*[selected]');
        $holder.val( $sel.val());
        if ($sel.attr('class') == CUSTOM_CLASS) {   // if the class name is selected, turn into input box
          $holder.val("");            // clears custom text
          edit();
          return false;
        }
      });

      $('a.cancel', $inputs).click(function() { 
          cancel();
          return false;
      });

      $holder.keypress( function( event) { 
        if (event.which == 13) { 
          submit();
          return false;
        }
      });

      $edit.click( function() { 
        edit();
        return false;
      });

      return $(this);
    }

  };
})(jQuery);

对于代码有点长，我深表歉意。但它的作用基本上是这样的:

1. 当你递给我一个选择时元素，它创建最后一个选项“自定义”。
2. 选择自定义将更改为输入框
3. 当输入框出现时您可以按取消
4. 等等等等

首先，我想公开以下函数: 1.重置() 2. 值()

我应该怎样写这个？ 1.我只想做一次dom。

Answer 1

要公开 reset 和 value，您可以执行以下操作:

$.fn.editableDrop = function() {
    // ...
};

// placing them under `editableDrop`
$.fn.editableDrop.reset = function() { };
$.fn.editableDrop.value = function() { };

要从 editableDrop 访问变量，您需要公开它们

$.fn.editableDrop.yourVar = 1;

另一种方法是创建一个“类”

var Editable = function(){
    this.yourVar = 2;   // public
    var notPublic = 1;  // private
};

var obj = (new Editable());
obj.yourVar;   // 2
obj.notPublic; // undefined