jQuery 插件 - 对变量调用插件方法

Question

我正在尝试开发一个非常基本的jquery插件，该插件使用toLocaleString方法将数字格式化为区域设置字符串，这样我就可以在我的脚本中对数字重复调用自己的方法，但我似乎根本无法让它工作，并且它总是将数字返回为未定义。

JSFiddle： https://jsfiddle.net/wuwgtpt3/2/.

.JS：

$.fn.formatCommas = function() {
  parseFloat(this).toLocaleString(undefined, {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}
var number = 1000000;
//attempt 1
var formatted = $.formatCommas(number);
//attempt 2
var formatted = $(number).formatCommas();
console.log('formatted number: ' + formatted);
$('#number').val(number);
$('#formatted').val(formatted);

Answer 1

尝试，我已经测试过：

JSFiddle： https://jsfiddle.net/pvviana/42jcdzz4/

$.fn.formatCommas = function(str){
        return parseFloat(str).toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
}
var number = 1000000;
//attempt 1
var formatted = $.fn.formatCommas(number);

console.log('formatted number: ' + formatted);
$('#number').val(number);
$('#formatted').val(formatted);

Answer 2

通过使用$.fn.formatCommas，您可以创建jQuery对象的原型方法。那么它需要像这样使用

$('div').formatCommas() // or other selector, etc.

这显然不是您的目的所需要的，因为.

您要做的是创建简单的静态方法：

$.formatCommas = function(str) {
  parseFloat(str).toLocaleString(undefined, {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

但是，老实说，您正在实现的功能最好是项目实用程序模块/函数的一部分，这不应该是jQuery代码的一部分。

Answer 3

这里有一个代码原型，你可以在你的情况下使用(我不测试，但必须工作(：

//  ATTEMPT 1
(function ($){
    $.formatCommas = function(str){
        return parseFloat(str).toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    });
}(jQuery));
//  ATTEMPT 2
// To avoid some problem if many library are declared
(function ($){
    // method augmentation
    $.fn.formatCommas = function() {
        var str = this.val();
        str = parseFloat(str).toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
        this.val(str);
        // to permit continue method call after this one !
        return this;
    };
}(jQuery));
// ATTEMPT MERGE
(function ($){
    $.formatCommas = function(str){
        return parseFloat(str).toLocaleString(undefined, {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    });
    $.fn.formatCommas = function() {
        var str = this.val();
        str  = $.formatCommas(str);
        this.val(str);
        return this;
    };
}(jQuery));