作者senser (彷佛曾经一起死过)
看板Ajax
标题Re: [问题] 新手绕不出来的Javascript 问题
时间Sat Jul 30 18:10:52 2011
B9大的文章写的对刚接触js的人有很大的参考价值
如果你根据他的写法去改 程式的品质会好很多
对於naming space我补充一下
在global里declare function最好也尽量避免
一般我在进行一个project时 除了一些framework或工具的object外(jquery,underscore...etc)
我只会在global里留下唯一一个变数
这个变数基本上会和网站的名字一样
如 我建一个站 mycoolsite.com
在global里 我只有var MyCoolSite ={};
其他全部的code 都会写在这个object的naming space下
我会给他一个method叫做init
在DOM完成时 我会执行MyCoolSite.init();
里头放网站开始run时要作的事 或是widget的initialization等等
var MyCoolSite = {
init : function(){
//dosomething
},
otherMethod :function(){
//dosomething
},
otherMethod2 : function(){
//dosomething
}
.........
};
而这个object就等於是共通的naming space
其他的client-side code也会写在他下面
如我今天要写一个facebook post功能
我会新增一个object (对写惯其他语言的 不妨把他当class 虽然有本质上的不同)
MyCoolSite.FacebookShare = {
init : function() {
//dosomething
}
share : function() {
//dosomething
},
poke : function(){
//dosomething
}
......
};
然後在MyCoolSite.FacebookShare.init()加在 MyCoolSite的init执行内容里
var MyCoolSite = {
init:function(){
MyCoolSite.FacebookShare.init();
}
};
如此一来 你可以避掉全部的global variable 得到一个很clean的架构
以上的例子只用了singleton pattern
但是当你写复杂物件用到其他的pattern时 甚至实作继承时
这种架构方式还是一样的
总之要注意 Global Variables are Evil
对function的用法 这篇文章非常适合新手
http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx
※ 引述《B9 (叶酸酸)》之铭言：
: ※ 引述《phreat (雷)》之铭言：
: : 这是程式,主要目的是希望能抓取值
: : 尝试过将k改成数字是可行的但因为会跑回圈所以放在里面
: : 怎麽试都不行 希望有大大指点迷津一下
: : <SELECT id="test1" onchange="test('test1')">
: : <option value="100">Ａ</option>
: : <option value="200">Ｂ</option>
: : <option value="300">Ｃ</option>
: : </SELECT>
: : <SELECT id="test2" onchange="test('test2')">
: : <option value="100">Ａ</option>
: : <option value="200">Ｂ</option>
: : <option value="300">Ｃ</option>
: : </SELECT>
: : for (i=1; i<=2; i=i+1)
: : {
: : k=String(i);
: : alert(k);
: : cc=Number(document.getElementById("test"+k)[document.getElementById("test"+k).selectedIndex].value);
: : }
: http://jsbin.com/osatuf
: 请问这是你要的结果吗？触发 select element 的 change 时间可以看到抓到的数值。
: 我改的地方只有：
: 多了 test function，这是你在 select.onchange 里面会 call 的 function。
: 我有几个小建议：
: - namespace 的建议:
: 你这段程式码会在 global namespace 留下几个变数 i, k, cc, test，
: 在 global namespace 里面留下的足迹越少越好。方法就是用 var 宣告这些变数。
: 例如： function test() { var i, k, cc; }，这样就只会有一个 test。
: 甚至更好的方法是
: (function()
: {
: 用 getElementById 抓 html element；
: 抓到的element.onchange = function(){ 做点事情 };
: })()
: 这样的写法一点也不会污染 global namespace。
: - styling 的建议:
: cc=Number(document.getElementById("test"+k)[document.getElementById("test"+k).selectedIndex].value);
: 拆开比较好，我会这样写：
: element = document.getElementById("test"+k);
: selected = element.selectedIndex;
: value = element[selected].value;
: cc = value;
: 可读性好很多，或者我自以为好很多：P
: - loose coupling 的建议：
: 你的 html 跟 js 太亲密了。我指把 js 放到 html 的 attribute 里面这件事情。
: 例如： onchange="whatever()"
: 假设将来这份 js 要给其他 html 档案用，那你现在就有两个 html，
: 那你做好 html 档案之後，还要一个一个 element 去加入 onchange="whatever()"
: 过了一段时间你不想要这个功能了，你把 js 丢掉，然後就要打开这两个 html 档案，
: 一个一个把 onchange attribute 拿掉。
: - type conversion 的建议：
: k=String(i); 是不必要的，因为之後的 "test"+k 会自动把 k 转成 string，
: 然後跟 "test" 结合。
: cc=Number( value )
: 这我没有意见，不过有个小秘诀：
: cc = value - 0 或 cc = +value 都可以做 type conversion，
: 可以少打几个字不知道有没有吸引力。XD
: - performance 的建议：
: document.getElementById("test"+k)[document.getElementById("test"+k).selectedIndex].value
: document.getElementById("test"+k) 被执行两次，其实只要执行一次就可以了。
: 如果其实你有注意到这里的效能可以改善，那你应该留个 comment 例如：
: /* 这里效能可以更好。 */
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 71.104.223.87
※ 编辑: senser 来自: 71.104.223.87 (07/30 18:13)
2F：推 musie:这方法很棒，我们公司的学长也鼓励用这种方法去做， 07/30 18:57
3F：→ musie:还可以避免掉检查null等问题。 07/30 18:58