Question

在我的公司里,我们有一个调查框架来帮助利益攸关方建立调查,我试图创建一个可重复使用的物体,使小组成员能够很容易地为调查设定一个特定问题的宽度,有时根据答案的长度,它们可能会被略微缩小。我试图使用模块和构建器模式的组合,但不确定我是否正确完成了。是否有更好的方法来写我的代码?

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

想法是,有人可以创建一个新的Width加注者实例,然后通过一个元素,一个与问题文本相匹配的字符串,这样它就是正确的问题被锁定目标,以及设定问题宽度的大小。

早早谢谢你的忠告!

Answer 1

您是双环包装的东西。总之, 我所看到的常见模块模式只是一个函数, 以关闭返回对象。

不需要 new keyword 或即时函数。当仅设定一个对象并直接指定给一个变量时, 通常使用即时函数。在您的情况中, 您想要做“ 启动 ” 。

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

Answer 2

我使用的模块模式通常看起来是这样的:

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

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

然后它就会被这样使用:

myModule.myPublicFunc();

Answer 3

我不认为你真的需要"模块模式"在这里。你可以利用关闭的优势, 仅此而已:

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 链条, 您的语句如下:

triorf Width加宽 // true 实例

会有效。

此外,您还可以以不需要访问范围变量的方法, 以 prototype 来弹出 prototype , 至少不直接:

widthquar. prototype. do something = 函数 () {/ *. * /}

例如,如果因为交叉浏览限制而不能使用抓取器和固定器,您可以具有这样的功能:

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

所以基本上你可以从外部检索元素, 但是它只读, Width加注 只能在即时时设置元素。

Edit :我复制并粘贴了 init ,当然它用 re 对依赖性不起作用,因此,用这种方式来说明是一个不好的例子。

友情链接