Question

我正在尝试创建一个不需要DOM元素但有默认选项的插件。

当我运行下面的代码时，我得到TypeError: $.myApp is not a function。

我需要改变什么？

;(function ($, window, document, undefined) {

    "use strict";

    var defaults = {
        val: 'old value'
    };

    function myApp (options) {      
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this.init();
    };

    $.extend(myApp .prototype, {
        init: function () {
            console.log (this.settings);
        }
    });
})(jQuery, window, document);

$(function() {
    $.myApp({
        val: 'new value'
    });
});

Answer 1

您可以尝试DEMO

(function ($) {
         $.myApp = function(options){
             var defaults = {
                 'default'          : ''
             };
             var options = jQuery.extend(defaults,options);

            alert('worked!')
         }
     })($);

$(function() {

    $.myApp({
        val: 'new value'
    });


});

答案与你的功能不同，但它的工作方式正确。

Answer 2

这是完整的教程，可以帮助您。

我们将从简单的插件开始。首先，我们需要为插件创建js文件。创建一个空白文件并将其另存为jquery.myFirstPlugin.js。将它包含在html文件末尾的html文件中，当然包括jquery-1.11.min.js作为其JQuery插件。

<script type="text/javascript" src="js/jquery-1.11.min.js"></script>
<script type="text/javascript" src="js/jquery.myFirstPlugin.js"></script>

默认结构

(function($) {
    $.fn.myFirstPlugin = function() {
        // your code here
    }
}(jQuery));

此处，包含(function($){})自封闭模式中的所有内容，因为我们不希望与页面上的其他Javascript代码段发生任何冲突。 $.fn允许您定义函数，因为我们为插件提供了myFirstPlugin名称。我们将在内部做魔术。

设置默认值 如果初始化中没有文本传递怎么办？显然我们需要在插件中设置默认设置。

(function($) {
    $.fn.myFirstPlugin = function( options ) {

        // Default params
        var params = $.extend({
            text     : 'Default Title',
            fontsize : 10,
        }, options);
        return $(this).text(params.text);

    }
}(jQuery));

在这里，我们添加了名为params的默认对象，并使用extend函数设置选项的默认值。因此，如果我们传递空白参数，那么它将设置默认值，否则它将设置。

$('.cls-title').myFirstPlugin({ text : 'Argument Title' });

原始资料

How to Create JQuery plugin

如何创建带有选项但没有元素的jQuery插件？

2 个答案: