萬盛學電腦網 >> 腳本專題 >> javascript >> 淺析js封裝和作用域
淺析js封裝和作用域
基本的代碼如下
復制代碼 代碼如下:<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var text="test";
var t=new functionTest(text);
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
</script>
<body>
<input type="button" id="btnSave" class="button" value="保存" />
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
</body>
</html>
再點擊保存，取消時需要一定的操作，第一次的代碼如上：
點擊保存，根本沒反應，很奇怪，這種最常用的jquery綁定事件竟然不起作用了。後來一比較才知道，其實自己忘了，綁定應該在$(document).ready(function () {})中進行；
js修改如下：
var text="test";
$(document).ready(function () {
var t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
修改後，點擊保存可以了，而且正確的傳遞了參數，這樣就可以保證在不同點的情況下傳遞不同的參數了。
但還有一種情況，頁面會動態生成一些標簽，這些標簽的點擊事件也需要處理。再次以取消按鈕為例，由於是動態生成，就不能使用和保存一樣的方法了。
只能使用onclick="javascript:t.AlertTest;"這種類似的綁定。於是有測試如下：
修改
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest;" />
點擊沒反應，修改如下
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter;" />
點擊還是沒反應，也沒有錯誤，在修改如下：
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:alertTestOuter();" />
這次有反應了，看來是少了一對括號。修改為封裝的方法如下：
<input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest();" />
點擊沒反應，提示Uncaught ReferenceError: t is not defined
看來是變量t沒有定義，作用域起作用了。於是修改js如下，也就是把變量t放到外邊，賦值放在裡邊，就是如下：
var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
this.AlertTest= function ()
{
alert(alertText);
}
function alertTestInnert()
{
alert(alertText);
}
}
function alertTestOuter()
{
alert(text);
}
最後一步，如何給取消調用的方法傳遞參數？
第一步修改js如下，也就是把取消調用的函數改為需要傳遞參數的方法，代碼如下：
var t;
var text="test";
$(document).ready(function () {
t=new functionTest(text);
});
function functionTest(text)
{
var alertText=text
$("#btnSave").click(function (e) {
alertTestInnert();
});
thi
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved