jQuery自执行功能不触发

Question

我正在将我的意大利面条 jQuery 代码重构为组件。到目前为止，我已经构建了一个组件，它被封装在一个自激发函数中。

$(document).ready(function () {

    debugger;

});

(function () {

    Component.init();

    var Component = {

        init: function () {

            this.cacheDom();

            this.bindEvents();

            debugger;

        },

        cacheDom: function () {

            //Initialize properties

        },

        bindEvents: function () {

            //setup eventhandlers

        },

        function1: function (event) {

            //do some work here

        },

    };

})();

我的 jQuery 正在访问 dom.ready 函数，但我的自动执行函数没有做任何事情。另外，我确实尝试删除自执行函数并初始化我的组件，$(document).ready(function)但它没有达到debugger我放在 init 函数中的那个..

我已经多次查看我的代码，似乎无法弄清楚为什么Component根本没有初始化。

Answer 1

您可以通过更新当前的模块模式来解决此问题，例如：// This is our main Component module//---------------------------------------------------var Component = (function() {&nbsp; // All private variables here&nbsp; //---------------------------------------------------&nbsp; var $blog;&nbsp; // Place initialization logic here&nbsp; //---------------------------------------------------&nbsp; var init = function() {&nbsp; &nbsp; console.log('Inside init()')&nbsp; &nbsp; cacheDom();&nbsp; &nbsp; bindEvents();&nbsp; };&nbsp;&nbsp;&nbsp; // Cache all required DOM elements here&nbsp; //---------------------------------------------------&nbsp; var cacheDom = function() {&nbsp; &nbsp; //Initialize properties&nbsp; &nbsp; console.log('Inside cacheDom()')&nbsp; &nbsp; $blog = $('#blog');&nbsp; };&nbsp;&nbsp;&nbsp; // All event handler setup here&nbsp; //---------------------------------------------------&nbsp; var bindEvents = function() {&nbsp; &nbsp; //setup eventhandlers&nbsp; &nbsp; console.log('Inside bindEvents()')&nbsp; &nbsp; $blog.on('click', function1);&nbsp;&nbsp;&nbsp; };&nbsp;&nbsp;&nbsp; // All other methods here&nbsp; //---------------------------------------------------&nbsp; var function1 = function(event) {&nbsp; &nbsp; //do some work here&nbsp; };&nbsp; // Return the methods you want to make public&nbsp; //---------------------------------------------------&nbsp; return {&nbsp; &nbsp; init,&nbsp; };})();$(document).ready(function() {&nbsp; console.log('Inside document.ready()')&nbsp; Component.init();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>使用此模块，我们确保Component.init()仅在 DOM 完全准备好时才调用它。关于这种模式的一个更有趣的事情是，我们现在只能init()从外部访问公共方法，而所有其他私有方法，如cacheDom()，bindEvents()都不能从外部访问。从而Component.cacheDom();将返回undefined。我认为除了init()您不需要公开任何其他方法，因为您的所有逻辑现在都将在Component模块内处理。