2

在我的公司，我们有一个调查框架来帮助利益相关者创建调查，我正在尝试创建一个可重复使用的对象，该对象将允许团队成员轻松设置调查的特定问题的宽度 - 它们有时可能有点压缩取决于答案的长度。我正在尝试结合使用模块和构造函数模式，但不确定我是否正确完成了它。有没有更好的方法来编写我的代码？

        var WidthIncreaser = (function(){
            return function (element, words, width) {

                var element = $(element);
                var re = new RegExp(words, 'gi');

                return {
                    init: function() {
                        if (element.text().match(re)) {
                            element.width(width);
                        }
                    }
                };
            };
        })();

        var tr = new WidthIncreaser('td.choicev-question:first', 'Applicable from the', 400);
        tr.init();

这个想法是，有人可以创建一个 WidthIncreaser 的新实例并传入一个元素，一个与问题文本匹配的字符串，因此它是正确的问题目标以及设置问题宽度的大小。

提前感谢您的建议！

4

3 回答 3

1

你是双重包装的东西。无论如何，我看到的通用模块模式只是一个返回带有闭包的对象的函数。

不需要new关键字，也不需要立即函数。当只创建一个对象并将其直接分配给一个变量时，通常使用立即函数。就您而言，您想制作“实例”。

var WidthIncreaser = function(element, words, width) {

    var element = $(element),
        re = new RegExp(words, 'gi');

    return {
        init: function() {
            if (element.text().match(re)) {
                element.width(width);
            }
        }
    };
};

var tr = WidthIncreaser('td.choicev-question:first', 'Applicable from the', 400);

tr.init();​
于 2012-05-24T13:09:38.543 回答
0

我使用的模块模式通常如下所示：

var myModule = (function () {
    var myPrivateVar = 'foo';
    var myPrivateFunc = function () {
        console.log('bar');
    };

    return {
        myPublicFunc: function () {
            console.log(myPrivateVar);
        }
    };
}) ();

然后它将像这样使用：

myModule.myPublicFunc();
于 2012-05-24T13:12:17.567 回答
0

我认为您在这里实际上不需要“模块模式”。您可以利用闭包，仅此而已：

function WidthIncreaser(element, words, width) {
    element = $(element);
    var re = new RegExp(words, 'gi');

    this.init = function () {
        if (element.text().match(re)) {
            element.width(width);
        }
    }
}

var tr = new WidthIncreaser('td.choicev-question:first', 'Applicable from the', 400);

tr.init();

当然，在这种情况下您不需要必要init，因为您可以将所有内容都放在 ctor 中，但我认为这只是一个示例，也许您需要延迟初始化。

这样你就可以保留你的prototype链条，你的陈述如下：

tr instanceof WidthIncreaser // true

将起作用。

此外，您还可以填充prototype不需要访问作用域变量的方法，至少不需要直接访问：

WidthIncreaser.prototype.doSomething = function() { /* .. */ }

例如，如果你因为跨浏览限制而不能使用 getter 和 setter，你可以有这样的功能：

function WidthIncreaser(element, words, width) {
    element = $(element);
    var re = new RegExp(words, 'gi');

    this.element = function() { return element };

    this.init = function () {
        if (element.text().match(re)) {
            element.width(width);
        }
    }
}

WidthIncreaser.prototype.reset = function () {
    this.element().text("")
}

所以基本上你可以从外部检索元素，但它是只读的，WidthIncreaser只能在实例化期间设置元素。

编辑：我复制并粘贴init了它当然不适用于与 的依赖关系re，因此这是说明该方法的一个坏例子。

于 2012-05-24T13:20:20.707 回答