如何使用閉包創建一個javascript庫

Question

我寫了一些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);

當我嘗試像上面的第一個代碼部分一樣調用draw函數時，我得到以下錯誤，'_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>

Answer 1

因為您將_snr聲明為對象而不是函數。 函數可以有屬性和方法，因此有多種方法可以實現你想要的東西，例如其中一個就是說......

_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');

快樂的編碼。

Answer 2

因為_snr是一個對象，而不是一個函數。 你必須這樣稱呼它：

_snr.draw({
    canvasId: '#canvas',
    imageSrc: 'someImage.png'
});

Answer 3

當你執行函數調用的_snr('#canvas') ，這就是你得到錯誤的原因。 _snr是一個附加了一些方法的對象，例如draw()和erase() 。 jQuery能夠將參數傳遞給$的原因是因為它們將$作為函數對象返回，這就是為什么我們能夠將各種選擇器作為參數傳遞。

Answer 4

你出錯了第一行_snr = {}

它需要

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

我在手機上，但當我在電腦上，我可能會修復整個代碼c：

Answer 5

這里有一個snr對象，它有擦除和繪制方法。 你打算做的是寫一個_snr函數，它將得到一個id並返回一個包裝器對象。 返回的對象應該有擦除和繪制方法。 所以你可以做var returnedObject = _snr（“my_id”）; returnedObject.draw（ “image.png”）;