js封裝和作用域 · JavaScript 學習

在編寫web軟件時，遇到一些可以共用js的情況，于是就想著如何封裝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(); }); this.AlertTest= function (text) { alert(text); } function alertTestInnert() { alert(alertText); } } function alertTestOuter() { alert(text); } ~~~ 相應的html修改如下： ~~~ <input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" /> ~~~ 點擊，看看是不是正確的傳遞了參數，一切正常，看來這樣就完成了。最后整理js代碼：把通用的js代碼放到一個js文件里，這里放到了common.js中，不同的代碼放在htm中，修改后的所有代碼如下： ~~~ <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> </title> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="common.js" type="text/javascript"></script> <script type="text/javascript"> var t;//需要定義的外邊，否則點擊取消時，不能訪問到變量t var text="test"; //傳遞的參數 $(document).ready(function () { t=new functionTest(text); //給t賦值，定義不能放在這里邊 }); </script> <body> <input type="button" id="btnSave" class="button" value="保存" /> <input type="button" id="btnCancel" class="button" value="取消" onclick="javascript:t.AlertTest('124');" /> </body> </html> ~~~ common.js的代碼： ~~~ function functionTest(text) { var alertText=text $("#btnSave").click(function (e) { alertTestInnert(); }); this.AlertTest= function (text) { alert(text); } function alertTestInnert() { alert(alertText); } } ~~~