从懵懂到为所欲为 插件化开发设计思想

js

先来个例子：

var name = 'A;
function getName(){
    return this.name;
}
var obj = {
    name: 'B',
    showName:function(a){
        console.log(getName());
        console.log(a());
        console.log(arguments);
        console.log(arguments[0]());
    }
}
obj.showName(getName,1);

JavaScript是一门面向对象的语言，所以JavaScript中不存在独立的函数，所有的函数都是某一个对象的方法！

console.log(getName());
=> console.log(window.getName()); // A   this就指向的是window

console.log(a());
=> console.log(window.a); // A   this就指向的是window

console.log(arguments[0]());
=> console.log(window.a); // undefind   this就指向的是window

arguments是个类数组

arguments:[
 0: function getName()
 1: 1
 length: 2
 ……
]

var name = 'A;
function getName(){
    console.log(this); // this指向arguments
    return this.name;
}
var obj = {
    name: 'B',
    showName:function(a){
        console.log(arguments[0]()); // undefind arguments中没有name属性
    }
}
obj.showName(getName,1);

给arguments增加一个name属性

var name = 'A;
function getName(){
    console.log(this); // this指向arguments
    return this.name;
}
var obj = {
    name: 'B',
    showName:function(a){
        arguments.name = 'finget';
        console.log(arguments[0]()); // finget
    }
}
obj.showName(getName,1);

插件用来解决一个具体的功能

<script type="text/javascript">
    ()(); // 自执行函数
</script>

/**
 * ()(); // 自执行函数，实际上是创建了一个命名空间
 *
 * 早期的命名空间：
 *  对象式的,一人负责一个部分
 *      var obj = {}
 *      obj.xx = ...
 *      obj.aa.bb = ...
 *  另一种：
 *      function fn () {}
 *      fn.name = xxx
 *      fn.xxx
 */
// ()() + function(){} 定义了一个作用域
(function(window){
    // 默认配置
    var DEFAULTS = {
        plugName: 'ts',
        init: 'click'
    }
    var API = {
        // 用户自定义
        config: function(options){
            if(!options) {return DEFAULTS}
            for (var key in options){
                console.log(key);
                DEFAULTS[key] = options[key];
            }
        }
    }
    window.test = API;
})(this);
// 思考 怎样将默认配置替换成用户配置
test.config({init:"input"});