|
以點(diǎn)帶面
不要奢望工作中還有讓你靜下心來天天學(xué)習(xí)的環(huán)境，要做的是：天天撿珠子撿貝殼,合適的時機(jī)，把它們用線穿起來做成一條精美的項(xiàng)鏈。
珠子是什么樣的珠子？首先你要識別，別說菜到連自己需要什么都不知道。
線是什么樣的線？可能是自己的實(shí)踐、可能是一本書、也可能是一個項(xiàng)目。
比如：網(wǎng)站重構(gòu)
在06年年初做兼職時接觸到網(wǎng)站重構(gòu)的概念，我看到它的優(yōu)點(diǎn)（當(dāng)然是有基礎(chǔ)的，在大學(xué)，由于經(jīng)濟(jì)原因做過很多開發(fā)網(wǎng)站的兼職工作），開始有意識的在實(shí)際工作中留意相關(guān)知識并研究它們。在實(shí)踐中不斷的檢驗(yàn)應(yīng)用自己的成果，讓自己不斷獲得鼓勵與信心。經(jīng)過一年相關(guān)知識的學(xué)習(xí)和實(shí)踐，我的重構(gòu)相關(guān)技術(shù)已經(jīng)相當(dāng)純熟。
再如：深入研究Javascript
當(dāng)用JS寫的程序越來越像大程序的時候，我們應(yīng)該能夠看到它的未來：根據(jù)我的判斷，它將是未來富媒體應(yīng)用的一個重要組成，整體架構(gòu)上會越來越趨向于支持更多的面向?qū)ο蟮奶匦浴?/p>
實(shí)際工作中，當(dāng)需要封裝一個JS類（姑且這么說）的時候，你會為一些具體問題和概念苦惱：如何不破壞封裝性又能夠?yàn)镠TML對象注冊事件？如何在對象內(nèi)部獲得對象本身的引用？閉包是個什么東西？prototype？
想象遇到這樣一個注冊事件的問題：
熟悉的傳統(tǒng)方法是這樣的:
<img id=”image” src=”” onclick=”test()” />
但是有個問題，不能實(shí)現(xiàn)結(jié)構(gòu)與邏輯分離，怎么辦？找到了下面這種解決方式：
window.onload = function(){
document.getElementById(“image”).onclick = test;
}
可是這樣不能注冊多個監(jiān)聽器，怎么辦？又找到了第三種解決方式：
window.onload = function(){
document.getElementById(“image”).attachEvent(“onclick”,test);
}
問題又來了，你發(fā)現(xiàn)第三種方式在firefox無法運(yùn)行，你意識到代碼的平臺兼容性問題。那在firefox下是如何像第三種方法一樣注冊事件的呢？
addEventListener，對，就是它！于是有了第三種方式的改進(jìn)版本：
window.onload = function(){
var element = document.getElementById(“image”);
If(element.addEventListener){
element.addEventListener(“click”,test,false);
} else {
element.attachEvent(“onclick”,test);
}
}
好了，現(xiàn)在第三種方法已經(jīng)有了比較完美的解決方案.可怎么樣才能讓它更具有通用性和可移植性呢？研究之后，這樣來做：
function addListener(element,e,fn){
If(element.addEventListener){
element.addEventListener(e,fn,false);
} else {
element.attachEvent(“on” + e,fn);
}
}
window.onload = function(){
var element = document.getElementById(“image”);
addListener(element,”click”,test);
}
這樣，addListener函數(shù)就可以挪到別的地方用了，可是又遇到這樣的問題：你要在事件處理函數(shù)內(nèi)部獲得EVENT對象與img對象，并處理它們，怎么辦？
你開始意識到給test函數(shù)傳參，那么如何做？改寫test函數(shù)？
YES！可是你發(fā)現(xiàn)給事件處理函數(shù)傳參是很困難的事情。
怎么辦？
靈活運(yùn)用以上三種事件綁定手段，并找到它們的特性。
對于第一種方式，直接傳參就可以了。
<script type=”text/javascript”>
function $(element){
if(typeof(element) == “string”){
return document.getElementById(element);
} else {
return element;
}
}
function test(e,which){
alert(e.type + “\n” + which.tagName);
}
</script>
<img id=”image” src=”” onclick=”test(event,this)” />
第二種方式可以在事件處理函數(shù)內(nèi)部通過this指針獲得img對象的引用，可以通過全局的window.event和隱含參數(shù)arguments[0](Firefox)獲取EVENT對象。
<script type=”text/javascript”>
function $(element){
if(typeof(element) == “string”){
return document.getElementById(element);
} else {
return element;
}
}
function test(e){
e = e || window.event;
alert(e.type + “\n” + this.tagName);
}
window.onload = function(){
var Img = $(“image”);
Img.onclick = test;
}
</script>
<img id=”image” src=”” onclick=”test(event,this)” />
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 致有追求的Coder和可愛的部門同事 [1] 下一頁 致有追求的Coder和可愛的部門同事 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 致有追求的Coder和可愛的部門同事 [2]
