The seven rules of Unobtrusive JavaScript

The seven rules of Unobtrusive JavaScript
[譯文]The seven rules of

Unobtrusive JavaScript

像這種全域式的有可能會造成跟人家命名相衝的結果
<br />var nav = document.getElementById('nav');<br />function init(){<br />// do stuff<br />}<br />function show(){<br />// do stuff<br />}<br />function reset(){<br />// do stuff<br />}<br />

所以我們將他包成一個object
<br /> var myScript = {<br /> init:function(){<br /> alert('1');<br /> },<br /><br /> show:function(){<br /> alert('2');<br /> },<br /> reset:function(){<br /> alert('3');<br /> }<br /> }; // 注意這邊有分號<br />

可是這樣的結果有可能會造成命名太長, 或者是我有些function 只是內部使用, 不想給外面用
就可以用下面的方式, 將想給外面用的方法放在return 裡
<br /> var myscript = function(){<br /> function init (){<br /> alert('1');<br /> }<br /><br /> function private_foo(){<br /> alert('2');<br /> }<br /><br /> return { <br /> foo: private_foo<br /> }<br /> <br /> }(); // <= 這邊有 () 號<br />

---

對於js 操控的 HTML 和 CSS 應該將其分離出來放到一個物件裡, 方便管理
<br />myscript = function(){<br /> var config = {<br /> navigationID:'nav',<br /> visibleClass:'show'<br /> };<br /> var nav = document.getElementById(config.navigationID);<br /> function init(){<br /> show();<br /> if(nav.className === config.visibleClass){<br /> reset();<br /> };<br /> // do stuff <br /> };<br /> function show(){<br /> var c = nav.className;<br /> // do stuff <br /> };<br /> function reset(){<br /> // do stuff <br /> };<br />}();<br />