作者knuckles (那克斯)
看板Ajax
标题[心得] [ js ] 减少使用全域变数
时间Mon Oct 22 15:12:54 2012
最近的一些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)
1F:推 b12031106:心得推 10/24 22:03
2F:推 skyman1999:good... 10/28 09:49