分享参数适配器的一段js方法

研究一下各种封装好的js库还是很有收获的，毕竟都是大师级别的创作，先分享一下默认参数和传递参数之间的一种适配器设计模式。

/**
 * 定义参数适配器，来适配参数每一个属性
 * @def     是默认的属性对象
 * @obj     是传递的属性对象
 * return   拓展后的属性对象
 ***/ 
function extend(def, obj) {
    for (var i in obj) {
        // def有i属性，覆盖，没有i属性添加
        def[i] = obj[i]
    }
    // 返回拓展后的结果
    return def;
}
/**
 * 创建一个按钮类
 * @param   按钮的一些信息
 **/ 
var Button = function (param) {
    var button = document.createElement('button');
    // 为了保证每一个按钮渲染时候样式良好，我们可以设置一些默认属性
    var defaults = {
        // 灰色的背景
        background: 'gray',
        // 白色字体
        color: 'white',
        // 14像素字体
        fontSize: '14px',
        text: '按钮'
    }
    // 适配参数的默认值
    var defs = extend(defaults, param) 
    // 渲染按钮的样式
    for (var i in defs) {
        // i 代表属性名称
        // defs[i]代表属性值
        // text属性是特殊的
        if (i === 'text') {
            button.innerHTML = defs[i]
        } else {
            // 就是一个样式属性
            button.style[i] = defs[i] 
        }
    }
    // 将按钮渲染到页面中
    document.body.appendChild(button)
}
// 实例化一个按钮
new Button({
    background: 'red',
    text: '这是一个按钮',
    fontSize: '16px',
    color: 'green'
})
new Button({
    background: 'green'
})

这种方法适用在很多封装好的流行的库中，譬如大家经常使用的bootstrap、jquery中，我们自己封装库还有平时写复用性代码的时候也非常适用。