Question

我不明白为什么我会在下面得到两个不同的结果。我使用Provide Public Access to Default Plugin Settings的最传统的jquery插件模式，

$.fn[pluginName].defaults = {
    property: "value",
    ...
}

但我无法得到正确的结果。如果我将default作为method的一部分，我会得到正确的结果 - 为什么？

HTML，

<div class="hello1"></div>

jquery的，

(function ($) {

    var pluginName = 'hilight';

    var methods = {

        init: function(options){

            var $this = this;

            // Extend our default options with those provided.
            // Note that the first argument to extend is an empty
            // object – this is to keep from overriding our "defaults" object.
            var o = $.extend(true, {}, $this[pluginName].defaults, options );
            console.log(o.setup.element1);

            // Call the local method from the plugin itself to get the processed options.
            var o = $this[pluginName]('defaults',options);
            console.log(o.setup.element1);

        },

        defaults: function(options) {

            // Default options.
            var defaults = {
                setup: {
                    tester1: "hello1",
                    tester2: "hello2",
                    tester3: "hello3",
                    element1: $(".hello1"),
                    element2: $(".hello2"),
                    list: $('.list-item')
                },
                foreground: "red",
                background: "yellow"        
            }

            // Always leave this line here.
            var options = $.extend(true, {}, defaults, options);

            // Return the processed options.
            return options;

        }
    }

    $.fn[pluginName] = 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 );  // always change 'init' to something else if you different method name.
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.plugin' );
        }

        return this; 

    };

    // Provide Public Access to Default Plugin Settings
    // An improvement we can, and should, make to the code above is to expose the default plugin settings. 
    // This is important because it makes it very easy for plugin users to override/customize the plugin with minimal code. 
    // And this is where we begin to take advantage of the function object.
    // @reference: http://learn.jquery.com/plugins/advanced-plugin-concepts/

    // Plugin defaults – added as a property on our plugin function.
    // This needs only be called once and does not
    // have to be called from within a "ready" block
    // $.fn.hilight.defaults.foreground = "blue";
    $.fn[pluginName].defaults = {
        setup: {
            tester1: "hello1",
            tester2: "hello2",
            tester3: "hello3",
            element1: $('.hello1'),
            element2: $(".hello2"),
            list: $('.list-item')
        },
        foreground: "red",
        background: "yellow"
    }

}( jQuery ));

dom ready，

$().hilight({setup:{tester1: "x"}});

结果，

Object[] // for --> var o = $.extend(true, {}, $this[pluginName].defaults, options );
Object[div.hello1] // --> var o = $this[pluginName]('defaults',options);

两者都应该是Object[div.hello1]

有什么想法吗？

修改

只有当我在页面末尾或元素之后移动插件时它才有效 - 怎么样？如果我想将插件放在页眉中，我怎样才能使它工作？

Answer 1

那是因为DOM没有准备好。

尝试使用以下方法打包您的插件：

$(document).ready(function() {
  $().hilight({setup:{tester1: "x"}});
});

提供对默认插件设置的公共访问：除非将其移动到元素的末尾，否则jquery插件不起作用？

1 个答案: