[心得] [ js ] 減少使用全域變數

看板Ajax作者knuckles (那克斯)時間12年前 (2012/10/22 15:12)推噓2(2推 0噓 0→)

留言2則, 2人參與討論串1/1

最近的一些Javascript心得，把他寫成了筆記來這邊分享一下，如果有什麼觀念錯誤的地方歡迎指正 ^^|| 網頁好讀版: http://disp.cc/b/11-4CrK 在 JavaScript 中存取一個變數時會先尋找目前的區域變數中有沒有這個變數，沒有的話再往上一層區域找最後才會找全域變數，也就是 window 下的變數例如 a = 1; // 全域變數a b = 2; // 全域變數b function myfun(){ var a = 3; //區域變數a alert('a:'+a+',b:'+b); //會顯示 a:3,b:2 } myfun(); // 執行以往偷懶的寫法，都是把一堆需要跨函式的變數都設成全域變數每個函式的名稱也都是全域變數但這樣每次存取就都要一層一層的往上找直到全域範圍而全域範圍已經有很多東西了，再加上一堆東西的話會造成效能不佳且有可能會跟其他載入的 script 裡的名稱有衝突所以比較好的方法是把自己的程式全都用一個立即執行的匿名函式包起來並且把函式的名稱都改用區域變數來存 (function(){ var a = 1; var b = 2; var myfun = function(){ var a = 3; //區域變數a alert('a:'+a+',b:'+b); //會顯示 a:3,b:2 } myfun(); // 執行 })(); 其中立即執行的匿名函式 (function(){ /*...*/ })(); 也可以看成像下面這樣 function init(){ /*...*/ }; init(); 宣告一個 init 函式後立即執行簡寫成匿名函式的話就不用再幫他取名字了也可以把 window 物件也傳進去變成一個區域變數 window 就可以用這個區域變數來存取其他全域變數了例如可以讀取 jQuery 的 $ 變數然後把 $ 也變成區域變數 (function(window){ //用區域變數 window 來存全域變數 window var $ = window.jQuery; // 把 jQuery 的 $ 變成區域變數 //... })(window); //傳入全域變數 window 對物件使用"="傳給另一個值時，是使用傳址的方式，而不是傳值所以只是同一個物件變成有兩個名字，而不會複製成另一個物件 a = {}; a.x = 1; b = a; b.x = 2; alert(a.x); //顯示 2 alert(b.x); //顯示 2 把程式全部包在一個匿名函式後就不能在 HTML 中使用 onclick 執行自己寫的函式了 <a href="#" id="myBtn" onclick="myfun(); return false;">按鈕1</a> 這樣的按鈕點下去會出現"myfun() is not defined" 要改成綁定事件的寫法 (function(){ $('#myBtn').click(function(){ //點按鈕後要執行的事情 myfun(); }); var myfun = function(){ /*...*/ }; })(); -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 175.181.51.65 ※ 編輯: knuckles 來自: 175.181.51.65 (10/22 15:15)