3

他の場所で使用できるように、クロージャにカプセル化するJavaScriptをいくつか作成しました。jQueryが行ったのと同じようにこれを行いたいと思います。いくつかのオプションを設定しながら、クロージャーにIDを渡して、クロージャーでいくつかの関数を呼び出せるようにしたいと思います。これに似ています：

<script type="text/javascript">
    _snr("#canvas").draw({
        imageSrc : someImage.png
    });
</script>

これを行うためにクロージャーを使用する方法について多くの異なる投稿を読みましたが、それでも概念に苦労しています。これが私が中断したところです：

_snr = {};
(function (_snr) {

    function merge(root){
        for ( var i = 1; i < arguments.length; i++ )
            for ( var key in arguments[i] )
                root[key] = arguments[i][key];
        return root;
    }

    _snr.draw = function (options) {

        var defaults = {
            canvasId : 'canvas',
            imageSrc : 'images/someimage.png'
        }

        var options = merge(defaults, options)

        return this.each(function() {
            //More functions here
        });
    };

    _snr.erase = function () {};

})(_snr);

上記の最初のコードセクションのように描画関数を呼び出そうとすると、「_snrは関数ではありません」というエラーが発生します。ここでどこが間違っているのですか？

編集 これが私がやったことです：

function _snr(id) {

    // About object is returned if there is no 'id' parameter
    var about = {
        Version: 0.2,
        Author: "ferics2",
        Created: "Summer 2011",
        Updated: "3 September 2012"
    };

    if (id) {

        if (window === this) {
            return new _snr(id);
        }

        this.e = document.getElementById(id);
        return this;
    } else {
        // No 'id' parameter was given, return the 'about' object
        return about;
    }
};

_snr.prototype = (function(){

    var merge = function(root) {
        for ( var i = 1; i < arguments.length; i++) {
            for ( var key in arguments[i] ) {
                root[key] = arguments[i][key];
            }
        }
        return root;
    };

    return {
        draw: function(options) {

            var defaults = {
                canvasId : 'canvas',
                imageSrc : 'images/someimage.png'
            };

            options = merge(defaults, options);

            return this;
        },

        erase: function() {
            return this;
        }
    };
})();

私は今呼び出すことができます：

<script type="text/javascript">
    _snr("#canvas").draw({
        imageSrc : someImage.png
    });
</script>
4

5 に答える 5

4

_snrを関数ではなくオブジェクトとして宣言したためです。関数はプロパティとメソッドを持つことができるので、あなたが望むものを達成するためのさまざまな方法があります、例えばそれらの1つは言うでしょう...

_snr = function(tag) {
this.tag = tag;
}

_snr.foo = function() {
//Code goes here
}

また、外部コンテキストをクロージャに渡して、変数が誤ってグローバル名前空間を汚染しないようにすることもできます。

(function(global) {
var _snr = function(tag) {
this.tag = tag;
}

_snr.foo = function() {
//Code goes here
}

//export the function to the window context:
global._snr = _snr;
})(window);

window._snr('#tag').foo('wat');

ハッピーコーディング。

于 2012-09-25T05:29:00.637 に答える
2

あなた_snrはオブジェクトであり、関数ではないからです。あなたはそれをこのように呼ぶ必要があります：

_snr.draw({
    canvasId: '#canvas',
    imageSrc: 'someImage.png'
});
于 2012-09-25T05:27:14.467 に答える
0

これを行う_snr('#canvas')と、関数呼び出しが発生するため、エラーが発生します。および_snrなどのいくつかのメソッドがアタッチされたオブジェクトです。jQueryが引数をに渡すことができる理由は、関数オブジェクトとしてを返すためです。これが、さまざまなセレクターを引数として渡すことができる理由です。draw()erase()$$

于 2012-09-25T05:29:43.233 に答える
0

あなたは最初の行で間違っています_snr = {}

それはする必要があります

_snr = function(){
    selector = arguments[0]||false;
    //snr init on dom object code
    return _snrChild;
}

私は携帯電話を使用していますが、PCを使用している場合は、コード全体を修正する可能性がありますc：

于 2012-09-25T05:29:50.003 に答える
0

ここにsnrオブジェクトがあり、eraseメソッドとdrawメソッドがあります。あなたがしようとしているのは、IDを取得してラッパーオブジェクトを返す_snr関数を書くことです。その返されたオブジェクトには、eraseメソッドとdrawメソッドが必要です。したがって、varreturnedObject = _snr（ "my_id"）;を実行できます。returnsObject.draw（ "image.png"）;

于 2012-09-25T05:30:44.410 に答える