Question

我正在尝试构建一个简单的插件架构，允许使用一个漂亮的简单API。请考虑以下代码：

//the core library namespace
var testObj = {};

//constuctor
testObj = function() {

};

//The plugin
testObj.prototype.test = (function(){

    var i = 0;

    var init = function() {
        alert('initialized');
    }

    return {
        init: init,

        render: function(){
            return i;
        }
};

}());


var p = new testObj();
//p.test.init();
p.test();

在这里工作小提琴：http://jsfiddle.net/8LwRL/

我希望用户能够通过执行p.test（）来调用init方法。目前这不起作用，使用该插件的任何人都必须调用p.test.init（）。有没有什么方法可以抽象出来，以便用户可以通过名称调用原型方法并让init自动运行？

Answer 1

正如我在评论中已经提到的，如果你想使p.test可调用，你必须从IIFE返回一个函数，而不是（简单）对象。最直接的方法是返回init本身。您的代码可能看起来像

testObj.prototype.test = (function(){
    var i = 0;
    var init = function() {
        alert('initialized');
    };

    init.render = function(){
        return i;
    };
    return init;
}());

看起来有点奇怪（对我来说），但它会做你想要的。

Answer 2

我的更正版本：

//constuctor
var testObj = function(options) {
this.init(options);
};

//I prefer to use jQuery.extend() to extend prototype. Its look better
$.extend(testObj.prototype,{
    options: {},
    init: function (options) {
       this.options = options;
       console.log('Name on init ' + options.name );
       this.options.name = 'Peter';
    },
    test: function () {
        console.log('name on test: ' + this.options.name);
    }
})


var p = new testObj({name: 'John'});
p.test();

jsfiddle

构建插件架构

2 个答案: