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キーワードも即時関数も必要ありません。通常、即時関数は、オブジェクトが 1 つだけ作成され、1 つの変数に直接割り当てられる場合に使用されます。あなたの場合、「インスタンス」を作りたかったのです。

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少なくとも直接ではなく、スコープ変数にアクセスする必要のない with メソッドを設定することもできます。

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 に答える