$.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
    }

1. 通过点
   obj.a === 123 // true

2. 动过[]
   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'] , 这两者是不一样的。