jquery插件方法的概念

Question

我刚刚开始制作我自己的 jquery 插件。我仍然没有完全理解使用它们并在插件中添加方法的概念，我最近的尝试失败了，我不知道为什么。在下面的情况下，我得到了用于执行 capFirst 的常规代码，我想将其转换为插件。.

HTML

<div id="contain">
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" />
</div>

原始 jquery

function capitaliseFirstLetter(string)
{
    return string.charAt(0).toUpperCase() + string.slice(1);
}

$('#contain > input').keyup(function(){
    var $this = $(this);    
    $this.val(capitaliseFirstLetter($this.val()));
});

我的尝试插件代码

    (function($) {

    $.fn.capFirst = function () {        
            $(this).keyup(function(){
                var $this = $(this);    
                $this.val(methods.capitaliseFirstLetter($this.val()));
            });      
    };

    var methods = function () {       
        capitaliseFirstLetter: function(inputValue) {
              return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
        } 
    };

})(jQuery);

$('#contain > input').capFirst();

jsfiddle: http://jsfiddle.net/ypWTd/118/

更新
jsfiddle 中的工作解决方案： http://jsfiddle.net/ypWTd/163/

Answer 1

该问题是由以下部分引起的：

var methods = function () {       
    capitaliseFirstLetter: function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

这实际上会导致语法错误。您似乎混淆了对象文字所需的语法和“类”所需的语法（需要使用 new 运算符创建其实例）。如果您只是将其设为对象文字，而不是函数，它将起作用：

var methods = {       
    capitaliseFirstLetter: function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

这是一个 更新的小提琴 。

另请注意，在您的插件方法中，this 已经是 jQuery 的实例，因此您不需要再次将其传递给 jQuery：

 $(this).keyup(function() {  //$(this)...
 this.keyup(function() { //Can just be this

Update

另一种方式（使用function 而不是对象文字）会像这样：

$.fn.capFirst = function () {
    this.keyup(function(){
        var $this = $(this),  
            m = new methods(); //Create an instance of methods
        $this.val(m.capitaliseFirstLetter($this.val())); //Call the method
    });                  
};
var methods = function() {       
    this.capitaliseFirstLetter = function(inputValue) {
          return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
    } 
};

这是一个 示例 该版本的。

Answer 2

唯一明显的区别是您用于“this”的双 $($())。您是否尝试过删除其中一个 $()？

其次：通常您应该“返回此”以启用链接。

第三：通常您应该通过在插件中使用 .each() 来提供对多个元素选择器的支持

this.each(function() {
   $(this).keyup(...);
})

第四：您尝试在不首先使用“new”运算符的情况下访问类的方法。要么你应该这样做

var myObject = {method: function() {...}}

myObject.method();

，要么你应该首先实例化对象

var myObject = function() {
    function method() {
    }
}

var myInstance = new myObject();
myInstance.method();

Answer 3

(function($) {

    $.fn.capFirst = function () {
        return this.keyup(function() { // Returning the elements to maintain chainability
            var $this = $(this);    
            $this.val(methods.capitaliseFirstLetter($this.val()));
        });                  
    };

    var methods = { // Made this an object/array instead of a function that didn´t return anything.
        capitaliseFirstLetter: function(inputValue) {
            return inputValue.charAt(0).toUpperCase() + inputValue.slice(1);  
        } 
    };

})(jQuery);

$(document).ready(function() { // Selectors should not be used before the DOM is ready.
    $('#contain > input').hide().capFirst().show().css('color', 'blue'); // Demo. chainability
});

jQuery 文档包含一些关于插件/Authoring 的有用信息。

您可以在此处找到我的完整编辑。

Answer 4

这就是您的插件应该如何

jQuery.fn.capFirst = function () {
    $(this).keyup(function(){ 
        inputValue = $(this).val();
        inputValue = inputValue.charAt(0).toUpperCase() + inputValue.slice(1);
        $(this).val(inputValue);
    });                        
};

jQuery(function() {
    $('#contain > input').capFirst();   
});

查看更新的 jsFiddle