Question

我通常使用以下设计模式来创建jQuery插件（http://jsbin.com/vegevido/1/）。

对于这个，我希望添加一个实用程序方法，该方法不会应用于普通jQuery插件等元素，但可以由父脚本使用。

如下所示，我添加了实用程序方法multiply，父脚本使用$('#elem').makeRed('multiply',5,3)访问该方法。

这是我应该如何实现这个吗？似乎使用myPlugin.multiple(5,3)之类的方法访问此方法会更好，因为它与#elem无关。

由于

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <style type="text/css">
        </style> 
        <script type="text/javascript"> 
            (function($){
                var defaults = {};

                var methods = {
                    init : function (options) {
                        var settings = $.extend({}, defaults, options);
                        return this.each(function () {
                            $(this).css('color', 'red');
                        });
                    },
                    makeBlue : function () {
                        $(this).css('color', 'blue');
                    },
                    multiply : function (x,y) {
                        return x*y;
                    },
                    destroy : function () {
                        return this.each(function () {});
                    }
                };

                $.fn.makeRed = function(method) {
                    if ( methods[method] ) {
                        return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
                    } else if ( typeof method === 'object' || ! method ) {
                        return methods.init.apply( this, arguments );
                    } else {
                        $.error( 'Method ' +  method + ' does not exist on jQuery.makeRed' );
                    }    
                };

                }(jQuery));
            $(function(){
                var myPlugin=$('#elem').makeRed();
                $('#makeBlue').click(function() {$('#elem').makeRed('makeBlue');});
                $('#multiply').click(function() {
                    console.log(myPlugin);
                    alert($('#elem').makeRed('multiply',5,3));
                });
            });
        </script>
    </head>

    <body>

        <div id="elem">Some Text</div>

        <button id="makeBlue">makeBlue</button>
        <button id="multiply">multiply</button>

    </body> 
</html>

Answer 1

一种常见的模式是将其添加到插件定义中，如

$.makeRed = {
    multiply: function (x, y) {
        return x * y;
    }
}

演示：Fiddle

这就是jQuery UI如何公开像$.datepicker.formatDate( format, date, settings )

这样的实用程序方法

如何将实用程序方法添加到jQuery插件？

1 个答案: