$.fn[namespace].defaults是什么意思

Question

(function($) {

    var namespace = 'colorful';

    var methods = {

        init: function(options) {

            options = $.extend({}, $.fn[namespace].defaults, options);

            if (options.font) {

                this.css('color', options.color);

            }

            if (options.background) {

                this.css('background-color', options.color);

            }

            return this;

        }

    };

    $.fn[namespace] = function(method) {

        if (methods[method]) {

            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

        } else if ($.type(method) === 'object') {

            return methods.init.apply(this, arguments);

        } else {

            $.error('Method' + method + ' does not exist!');

        }

    };

    $.fn[namespace].defaults = {

        color: 'red',

        background: false,

        font: true

    };

})(jQuery);

$.fn[namespace].defaults是声明默认配置项，这个为什么$.fn[namespace]这样写，$.fn.namespace跟这样写一样吗，后面的defaults是什么意思，api文档好像没有这个方法吧

Answer 1

我们把$.fn[namespace]换成obj，然后展开来看，就是这个结构obj = {    defaults: {        color: 'red',        background: false,        font: true    }}至于$.fn，属于JQuery底层的一些东西了，推荐这篇博文，讲得很清楚。

Answer 2

对象属性访问有两种方式：    const obj = {        a: 123    }通过点obj.a === 123 // true动过[]obj['a'] === 123 // true通过 [keyName] 这种形式访问 变量 keyName 的值 类型应该是 String 类型，如果keyName的 值是数字类型 会被强行转成String

Answer 3

你把$.fn看做一个object对象， 例子中namespace = 'colorful';  那么$.fn[namespace] === $.fn['colorful'] === $.fn.colorful;   而$.fn.namespace === $.fn['namespace'] , 这两者是不一样的。