jQuery Plugins - 在变量上调用插件方法答案

【问题标题】：jQuery Plugins - Call plugin method on a variablejQuery Plugins - 在变量上调用插件方法
【发布时间】：2018-01-12 13:01:40
【问题描述】：

我正在尝试开发一个非常基本的 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);

【问题讨论】：

标签： javascript jquery jquery-plugins numbers

【解决方案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);

【讨论】：

【解决方案2】：

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

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

这显然不是你的目的所需要的。

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

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

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

【讨论】：

【解决方案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));

【讨论】：