關於javascript在子頁面中函數無法調試問題的解決

近期在做一個項目，會遇到在子頁面中提交的時候會無法能夠調試javascript代碼的情況出現，有時候這種問題，我們無法正常在瀏覽器，看到我們子頁面的javascript代碼，所以只能夠用原始的alert 或者 console.log()，當然，這也是一種解決方法，但是有時候，我們就想看一下程序到底是如何運行的，同時也可以看每個參數到底是什麼值，所以意義還是比較大的。

我貼張圖，大家就大概瞭解是什麼時候會出現這個問題了。

<script>
function stopWatchDog(watchDogId) {
	alert("aa");
	var url = '<s:url value="/watchDog/stopWatchDog"/>';
	var params = {
		watchDogId : watchDogId,
	};
	$.post(url, params, function(data) {
		if (data.success) {
			closeDialog();
			tbGrid.send();
		} else {
			if (data.errorMsg != null && data.errorMsg != "") {
				jAlert(data.errorMsg, "系統消息");
			} else {
				jAlert("停止異常", "系統消息");
			}
			$("#saveBtn").removeAttr("disabled");
			$("#saveBtn").css("color", "white");
		}
	}, "json");
}
</script>

這個其實是函數聲明，大家如果瞭解javascript上下文的話，就知道其實函數聲明只是在頁面上下文加載的時候加載的函數名，其函數內容無法正常加載。

如果我們換成函數自執行或者是在函數自治性中定義這個函數聲明的話，那麼就可以解決這個問題了。

(function(){
	function stopWatchDog(watchDogId) {
		alert("aa");
		var url = '<s:url value="/watchDog/stopWatchDog"/>';
		var params = {
			watchDogId : watchDogId,
		};
		$.post(url, params, function(data) {
			if (data.success) {
				closeDialog();
				tbGrid.send();
			} else {
				if (data.errorMsg != null && data.errorMsg != "") {
					jAlert(data.errorMsg, "系統消息");
				} else {
					jAlert("停止異常", "系統消息");
				}
				$("#saveBtn").removeAttr("disabled");
				$("#saveBtn").css("color", "white");
			}
		}, "json");
	}
})();