javascript - 如何创建一个非常基本的 'plugin' ？

Question

Fiddle!

我正在尝试创建一个非常基本的“插件”，如果你可以这样调用它的话。我希望能够使用这条线 var box = new colorBox(node, options); (在JS末尾)以便编辑div#thing1的样式。我认为我的问题是调用我设置的函数。我不想打电话colorBox.setSize()具有初始效果，但我希望在设置 colorBox 原型(prototype)的对象后能够在以后调用它。谢谢!

HTML:

<div id="thing1"></div>
<div id="thing2"></div>

JS:

var colorBox = {
    setSize: function(){
        node.style.width = options.width + 'px';
        node.style.height = options.height + 'px';
    },
    setColor: function(){
        node.style.backgroundColor = options.color;
    },
    setSize(),
    setColor()
}

var node = document.getElementById('thing1');
var options = {
    color: 'red',
    width: 200,
    height: 200
}

var box = new colorBox(node, options);

Answer 1

使用构造函数创建一个新对象:

var colorBox = function(node, options) {
    this.setSize = function(){
        node.style.width = options.width + 'px';
        node.style.height = options.height + 'px';
    };
    this.setColor = function(){
        node.style.backgroundColor = options.color;
    };
    this.setSize();
    this.setColor();
}

var node = document.getElementById('thing1');
var options = {
    color: 'red',
    width: 200,
    height: 200
}

var box = new colorBox(node, options);

fiddle :http://jsfiddle.net/e7gX8/1/