javascript - 模块模式 jQuery

Question

我在非常虚拟的 javascript 代码中使用模块模式时遇到问题。

这段代码运行良好：

;
var test = (function () {
    var config =  {
        replacement: 'a'
    };

    var init = function () {
        $(config.replacement).click(function(){
            alert("hello world");
        });
    }

    return {
        init: init
    }
})();

$(document).ready(test.init());

相反，当我单击我网站的任何链接时，此代码不起作用：

;
var test = (function () {
    var config =  {
        replacement: $('a')
    };

    var init = function () {
        config.replacement.click(function(){
            alert("hello");
        });
    }

    return {
        init: init
    }
})();

$(document).ready(test.init());

任何人都可以告诉我为什么我不能使用 jQuery 对象作为配置变量的“默认”初始化。

Answer 1

在$(a)DOM 准备好之前执行，可能是在没有a元素可访问的时候。

在您的第一个示例中，该集合是在 DOM 准备好之后构建的。

你可以把它变成一个函数......

var config =  {
    replacement: function() { return document.links; }
};

Answer 2

那么，为什么在这个位于官方 jQuery 网站的示例中，使用 jQuery 选择器适用于默认配置变量？

var feature = (function () {
    var $items = $("#myFeature li");
    var $container = $("<div class='container'></div>");
    var $currentItem = null;
    var urlBase = "/foo.php?item=";

    var createContainer = function () {
            var $i = $(this);
            var $c = $container.clone().appendTo($i);
            $i.data("container", $c);
        },
        buildUrl = function () {
            return urlBase + $currentItem.attr("id");
        },
        showItem = function () {
            $currentItem = $(this);
            getContent(showContent);
        },
        showItemByIndex = function (idx) {
            $.proxy(showItem, $items.get(idx));
        },
        getContent = function (callback) {
            $currentItem.data("container").load(buildUrl(), callback);
        },
        showContent = function () {
            $currentItem.data("container").show();
            hideContent();
        },
        hideContent = function () {
            $currentItem.siblings().each(function () {
                $(this).data("container").hide();
            });
        };
    $items.each(createContainer).click(showItem);
    return {
        showItemByIndex: showItemByIndex
    };
})();

$(document).ready(function () {
    feature.showItemByIndex(0);
});

jQuery官方网站