javascript - 无法调用 jquery 插件上的公共(public)方法

Question

我开发了一个插件，当我调用该插件时，出现类似 Uncaught TypeError: Cannot read property 'convert' of undefined 的错误。

这是我的插件，当我调用脚本时它不起作用

( function ($) {

 $.siPrifixx = function(element, options) {

    var defaults = {
        foo: 'bar',
        onFoo: function() {
        }
    }
    var plugin = this;
    plugin.settings = {
                    maxDigits: 8,
                    seperator: true,
                    decimal: 1,
                    popUp: false,
                    countUp:false
    }

    var $element = $(element),
         element = element;

    plugin.init = function() {
        var value =$(element);
        console.log(value);
        plugin.settings = $.extend({
        }, defaults, options);
        var maxDigits = plugin.settings.maxDigits;
        console.log(defaults);
                if (typeof value === 'string') {
                            var parts = value.split(",");
                            var num = parts.join("");
                            var isNumber = regIsNumber(num)
                            if(isNumber){
                               var  number = (parseInt(num));
                            }else{

                                number = num;
                            }
                        }else if (typeof value === 'number'){
                                number = value
                        }
                            var data_max = $(this).attr('data-max-digit');
                            if(typeof data_max !== 'undefined'){
                                maxDigits = data_max;
                            }

                        var checkNumber = typeof number !== 'undefined' && !isNaN(number) && Math.round(number).toString().length > maxDigits;
                        if (plugin.settings.popUp && checkNumber) {
                            $(this).addClass('tooltip', value);
                            var tootip = $(this).tooltipster({
                                theme: 'tooltipster-default',
                                functionInit: function () {
                                    return value
                                }
                            })
                            if(!tootip)
                                console.log("We couldn't find tooltipster function.Please make sure you have loaded the plugin")
                        }
                            if (plugin.settings.countUp && (Math.round(value).toString().length <= maxDigits)) {
                                        var cUp = new countUp( 
                                        plugin.settings.countUp, 0, Number(value), 0, 1, null);
                                        cUp.start();
                                    if(!cUp)
                                    console.log("We couldn't find counter function.Please make sure you have loaded the plugin")
                            } 
                        if (checkNumber) {
                            var results = plugin.convert(number);
                            $(this).html(results);
                        } else {

                            if (plugin.settings.seperator) {
                                var cvalue = numberWithCommas(value)
                                $(this).html(cvalue)
                            } else {
                                $(this).html(value)
                            }
                            if(typeof  value === 'string')
                                if(checkDate(value)){
                                    $(this).html(value)
                                }
                }
    }

    plugin.convert = function(number){
        var n = settings.decimal
        var decPlace = Math.pow(10, n);
        var abbrev = ["K", "M", "B", "T"];
        for (var i = abbrev.length - 1; i >= 0; i--) {
            var size = Math.pow(10, (i + 1) * 3);
            if (size <= number) {
                number = Math.round(number * decPlace / size) / decPlace;
                if ((number == 1000) && (i < abbrev.length - 1)) {
                    number = 1;
                    i++;
                }
                number += abbrev[i];
                break;
            }
        }
        console.log(number);
        return number;
     }
    plugin.init();

    //use to convert numbers with comma seperated

}

$.fn.siPrifixx = function (options) {
     return this.each(function() {
        if (undefined == $(this).data('siPrifixx')) {
            var plugin = new $.siPrifixx(this,options);
            $(this).data('siPrifixx', plugin);
        }
    });
};
}(jQuery));

我通常通过 $(this).data('siPrifixx').convert(value);}); 调用插件我的代码有什么问题？如何修改我的插件才能正常工作？

如何在代码中调用convert方法。

Answer 1

一种方法是将插件分成单独的部分，每个部分返回预期结果，然后将离散的工作部分逐一合并，直到完整的插件功能正常

(function($) {

  var settings = {
    maxDigits: 8,
    seperator: true,
    decimal: 0,
    popUp: false,
    countUp: false
  }

  function convert(number, options) {
    var opts = $.extend(settings, options || {});
    var n = opts.decimal;
    console.log(opts);
    var decPlace = Math.pow(10, n);
    var abbrev = ["K", "M", "B", "T"];
    for (var i = abbrev.length - 1; i >= 0; i--) {
      var size = Math.pow(10, (i + 1) * 3);
      if (size <= number) {
        number = Math.round(number * decPlace / size) / decPlace;
        if ((number == 1000) && (i < abbrev.length - 1)) {
          number = 1;
          i++;
        }
        number += abbrev[i];
        break;
      }
    }
    this.data("number", number); // set `number` at `.data("number")`
    return this; // return `this` for chaining jQuery methods
  }
  $.fn.convert = convert;
}(jQuery));

var div = $("div");

div.convert(1500000, {decimal:1});

console.log(div.data("number"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>