如何將實用程序方法添加到jQuery插件？

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;
    }
}

演示：小提琴

這就是jQuery UI如何公開$ .datepicker.formatDate等實用程序方法（格式，日期，設置）

如何將實用程序方法添加到jQuery插件？

問題描述

1 個解決方案

解決方案1
2 已采納 2014-02-21 15:54:48

如何將實用程序方法添加到jQuery插件？

問題描述

1 個解決方案

解決方案1 2 已采納 2014-02-21 15:54:48

解決方案1
2 已采納 2014-02-21 15:54:48