顯露的模塊模式和jQuery失敗

我有一個文件調用text.js，它有顯露的模塊模式和jQuery失敗

var Text = function(canvas){ 

    var textField = $('#textField'), 
    addTextButton = $('#addText'); 

    var init = function(){ 
    addTextButton.click(function(){ 
     alert('won"t work?') 
    }); 
    }, 

    resetTextField = function(){ 
    // it work if I put the selector here like var textField = $('#textField'), 
    textField.val(''); // won't work 
    }; 

    return{ 
    init:init 
    } 
}();

它包括在我的index.html。在那裏我做初始化像

$(function(){ 
Text.init(); 
}());

問題是，即使不能被解僱。我想我搞砸了一些東西。

來源

2017-01-04 Nately Jamerson

（https://jsfiddle.net/8ezcgpe2/）請更新與[MCVE]這個問題的，最好一個問題**可以使用Stack Snippets（'[<>]'工具欄按鈕）運行一個**）。 –

也許這個text.js在加載ID = addText的元素之前加載 –

@JaromandaX但在我的index.html中我有$（function（）{}（））作爲封裝來包裝Text.init（） –

在DOM未加載的位置，您正在調用一次使用()定義的函數。因此，所有選擇器都返回零節點。

var Text = function(canvas){ 
    // ... 
}(); 
^^

刪除。當你調用它時，你需要首先實例化該函數，並保留該實例引用（如果你願意的話）。

var text = new Text(); 
    text.init();

來源

2017-01-04 09:14:48

顯示模塊需要一個實例？那個有什麼用途？ –

因爲函數不會返回方法'init（）'，除非你首先調用父函數。 –

不行。檢查TJ的答案。 –

在Text的代碼被立即運行，並返回與init在其上的對象。如果您運行的代碼元素之前，查找存在的，例如：

<!doctype html> 
<html> 
<head> 
<!-- ... ---> 
<script src="text.js"></script><!-- Problem here --> 
<script> 
$(function(){ 
Text.init(); 
}()); 
</script> 
</head> 
<body> 
<!-- ... ---> 
<input id="textField"><input id="addText" type="button" value="Add"> 
<!-- ... --> 
</body> 
</html>

...你會在textField和addTextButton空的jQuery對象而告終。

另外，你還運行功能你試圖通過ready立即（然後傳遞到undefinedready），問題就在這裏：

$(function(){ 
    Text.init(); 
    }()); 
// ^^---------- problem

你不希望這些()。你想給函數傳入ready：

$(function(){ 
Text.init(); 
}); // <== Note no()

如果你想有init方法，這將是最好把所有的初始化裏面，而不是把它在兩個地方：

var Text = function(canvas){ 

    var textField, addTextButton; 

    var init = function(){ 
    textField = $('#textField'); 
    addTextButton = $('#addText'); 
    addTextButton.click(function(){ 
     alert('won"t work?') 
    }); 
    }, 

    resetTextField = function(){ 
    // it work if I put the selector here like var textField = $('#textField'), 
    textField.val(''); // won't work 
    }; 

    return{ 
    init:init 
    } 
}();

但是請注意，如果您按照把你的腳本在文檔的年底的usual best practice，只是在交割</body>標籤，上面定義的元素仍將存在，並可用，這將使使用ready（和init）是不必要的。所以如果你控制script標籤去的地方，那是一個選擇。

因此，例如：。這只是正常]

<!doctype html> 
<html> 
<head> 
<!-- ... ---> 
</head> 
<body> 
<!-- ... --> 
<input id="textField"><input id="addText" type="button" value="Add"> 
<!-- ... --> 
<script src="text.js"></script> 
<script> 
$(function(){ 
Text.init(); 
}); 
</script> 
</body> 
</html>

來源

2017-01-04 09:19:41

這工作！但.. 的index.html的劇本我設置畫布窗口對象 'window.canvas =新fabric.Canvas（「畫布」）;' 後來我做這在我的Text.js '變種文字=功能（ canvas）{ console.log（canvas）//未定義?? }（window.canvas）;' 爲什麼canvas是未定義的？ –

'}（））;'在doc準備好塊的末尾。它有效嗎？ – Jai

@Jai：很好。我只是從OP的代碼中複製它而不知道。 –

顯露的模塊模式和jQuery失敗

回答

相關問題