首頁猿問 jQuery自執(zhí)行功能不觸發(fā)

jQuery自執(zhí)行功能不觸發(fā)

JavaScript

九州編程 2022-06-16 16:43:04

我正在將我的意大利面條 jQuery 代碼重構(gòu)為組件。到目前為止，我已經(jīng)構(gòu)建了一個組件，它被封裝在一個自激發(fā)函數(shù)中。$(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 函數(shù)，但我的自動執(zhí)行函數(shù)沒有做任何事情。另外，我確實嘗試刪除自執(zhí)行函數(shù)并初始化我的組件，$(document).ready(function)但它沒有達到debugger我放在 init 函數(shù)中的那個..我已經(jīng)多次查看我的代碼，似乎無法弄清楚為什么Component根本沒有初始化。

查看完整描述

1 回答

慕哥9229398

TA貢獻1877條經(jīng)驗獲得超6個贊

您可以通過更新當前的模塊模式來解決此問題，例如：

// This is our main Component module

//---------------------------------------------------

var Component = (function() {

// All private variables here

//---------------------------------------------------

var $blog;

// Place initialization logic here

//---------------------------------------------------

var init = function() {

console.log('Inside init()')

cacheDom();

bindEvents();

};

// Cache all required DOM elements here

//---------------------------------------------------

var cacheDom = function() {

//Initialize properties

console.log('Inside cacheDom()')

$blog = $('#blog');

};

// All event handler setup here

//---------------------------------------------------

var bindEvents = function() {

//setup eventhandlers

console.log('Inside bindEvents()')

$blog.on('click', function1);

};

// All other methods here

//---------------------------------------------------

var function1 = function(event) {

//do some work here

};

// Return the methods you want to make public

//---------------------------------------------------

return {

init,

};

})();

$(document).ready(function() {

console.log('Inside document.ready()')

Component.init();

});

使用此模塊，我們確保Component.init()僅在 DOM 完全準備好時才調(diào)用它。關(guān)于這種模式的一個更有趣的事情是，我們現(xiàn)在只能init()從外部訪問公共方法，而所有其他私有方法，如cacheDom()，bindEvents()都不能從外部訪問。從而Component.cacheDom();將返回undefined。我認為除了init()您不需要公開任何其他方法，因為您的所有邏輯現(xiàn)在都將在Component模塊內(nèi)處理。

反對回復(fù) 2022-06-16