javascript - 如何创建一个非常基本的“插件”？

Question

小提琴！

我正在尝试创建一个非常基本的“插件”，如果您甚至可以这样称呼它。我希望能够使用这一行var box = new colorBox(node, options);（在 JS 的末尾）来编辑div#thing1. 我认为我的问题是调用我设置的功能。我不想调用colorBox.setSize()来获得初始效果，但是如果我想在 colorBox 原型的对象设置后可以调用它。谢谢！

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);

小提琴：http: //jsfiddle.net/e7gX8/1/

Answer 2

您缺少一个构造函数来设置您传递的值。您可以这样做：

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();
}

试试这个小提琴

Answer 3

您正在混合使用 javascript 制作对象的不同方法。您想要的可能是 Lyn Headley 的答案。这是另一种方式（或更确切地说是其他方式之一），它也可以工作，但不必要地复杂，并且只允许您拥有一个colorBox（但了解其他情况可能很有用）。

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

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