5.11日(rì)音(yīn)訊,網站(☆$¶ zhàn)前端設計(jì)師(shī)的(de)蛻變之路(lù)。如 ≈(rú)果你(nǐ)是(shì)剛進入web前端研發領域，想試試這(zש"hè)潭水(shuǐ)有(yǒu)多(duō)深，看(kàn)這(zhφ₩ è)篇文(wén)章(zhāng)吧(ba)；如(rú)果你¶☆(nǐ)是(shì)做(zuò)了(le)→♠兩三年(nián)web産品前端研發，迷茫找不(bù)著(zh☆÷±πe)提高(gāo)之路(lù)，看(kàn)這(zhè)篇文(w én)章(zhāng)吧(ba)；如(rú)果你(nǐ)是(shì)四β¶✘五年(nián)的(de)前端開(kāi)發高(gāo)手，沒有(σ>↑yǒu)難題能(néng)難得(de)住你(nǐ)的(de)₹α★寂寞高(gāo)手，來(lái)看(kàλ↔₹n)這(zhè)篇文(wén)章(zhān®®g)吧(ba)；
web前端研發工(gōng)程師(shī)，在國(guó)內(♦&×nèi)是(shì)一(yī)個(gè)朝陽職業(yè)，自(zì←↑α)07-08年(nián)正式有(yǒu)這(zhè)個(gè)職業(y∏≤è)以來(lái)，也(yě)不(bù)過三四年(♦±nián)的(de)時(shí)間(jiān)。這(zhè)個(gè)領域沒有 ∞₽(yǒu)學校(xiào)的(de)正規教育，沒有×φ•β(yǒu)行(xíng)內(nèi)成體(tǐ)系的(d≤•Ωe)理(lǐ)論指引，幾乎所有(yǒu)從(cóng)事δ•Ω(shì)這(zhè)個(gè)職業(yè)的(de)人(rén)都( dōu)是(shì)靠自(zì)己自(z©✔λì)學成才。自(zì)學成才，一(yī)條艱辛的(de)坎坷路(lù)，我↕↔也(yě)是(shì)這(zhè)樣一(yī)路(l±←♦ù)走來(lái)。從(cóng)2002年(nián)開(kā≤±i)始接觸web前端研發至今已然有(yǒu)了(le)9個(gè)年(niá ♦n)頭，如(rú)今再回首，期間(jiān©÷₹σ)的(de)走了(le)很(hěn)多(duō)彎路(lù)。→¶¥ 推已及人(rén)，如(rú)果能(néng)讓那£♥(nà)些(xiē)後來(lái)者少(shǎo)走些$☆φΩ(xiē)彎路(lù)，辛甚辛甚！
【前言】
所謂的(de)天才，隻不(bù)過是(sh∞↑δ¥ì)比平常人(rén)更快(kuài)的(d♥>±¥e)掌握技(jì)能(néng)、完成工(gōng)作(zuò)罷了(≈le)；隻要(yào)你(nǐ)找到(dàα±'₹o)了(le)正确的(de)方向，并輔以足夠的(de)時(shí)間φ≥(jiān)，你(nǐ)一(yī)樣能(♥néng)夠踏上(shàng)成功彼岸。
本文(wén)将web前端研發編程能(né®→ng)力劃分(fēn)了(le)八個(gè)等級，♣<×每個(gè)等級都(dōu)列舉出了(le)對(✔&duì)應的(de)特征及破級提升之方法，希望每$<位在看(kàn)本文(wén)的(de)同學先準确定位自(zì)己的(d¶σ✘σe)等級（不(bù)要(yào)以你(nπ ǐ)目前能(néng)力的(de)最高(gāo)點，♠α而是(shì)以你(nǐ)當前能(néng)力的(de)中檔與之等級作(z✔↓uò)對(duì)比，以免多(duō)走彎<§&±路(lù)），參考突破之法破之。
所謂的(de)級别，隻是(shì)你(nǐ)面對(duì)≠÷需求時(shí)的(de)一(yī)種态度：能(néng)夠完成、能(n♣ε♠éng)夠完美(měi)地(dì)完成、能(néng)夠"↔超出預期地(dì)完成。以追求完美(měi)的(∏<§de)态度加以紮實的(de)編程功力，那(nà)就(jiù)是(sh♥≈≥¥ì)你(nǐ)的(de)編程水(shuǐ)平。
切記心浮氣燥，級别夠了(le)，那(n<±♦à)級别裡(lǐ)的(de)東(dōng)西(xī)自(zì)然就γ₩ ↕(jiù)懂(dǒng)了(le)。悟了(le)就(jiù)♣✔¥是(shì)悟了(le)，沒悟也(yě)↑§沒關系，靜(jìng)下(xià)心來(lái)→♦，投入時(shí)間(jiān)而已。
一(yī).【入門(mén)】
能(néng)夠解決一(yī)些(xiē)問(wèn§←§)題的(de)水(shuǐ)平。有(yǒu)一(yī)定的(de)基礎（λ♠€♠比如(rú)最常見(jiàn)的(de)html标簽及其屬性、事(s€♣hì)件(jiàn)、方法；最常見(jiàn)的(de)css屬性；基•礎的(de)javascript編程能(néng)力），能(néng)夠完↕≈成一(yī)些(xiē)簡單的(de)web前端研發需求。
舉個(gè)例子(zǐ)：删除一(yī)字符串中指定的®₽§&(de)字符。
varstr="www.baidu.com/?p♣®age";
str=str.replace('?pa©₽♠ge',"")π☆;
alert(str);
str=str.substring(0,sπ₩✘δtr.indexof("/"));
alert(str);
複制(zhì)代碼
首先不(bù)要(yào)苛責代碼的(de)↕≥ ♠對(duì)錯(cuò)嚴謹，畢竟每個('$Ω↕gè)程序員(yuán)都(dōu)有(yǒu)這(zhè)樣的(☆εde)一(yī)個(gè)過程；其次，這(zh±ε×αè)兩段代碼在這(zhè)個(gè)實例∞★裡(lǐ)沒有(yǒu)什(shén)麽大(dà)過錯(cuò)，可(kě£ )能(néng)會(huì)有(yǒu)瑕疵，但(dàn)♣↕≠₽能(néng)夠解決問(wèn)題（删除指定的(de)字符），這(zhè)®÷≤γ就(jiù)是(shì)這(zhè)個(gè)級别的(de)特征¶←÷。
再舉個(gè)例子(zǐ)：
//計(jì)算(suàn)系統當前是(shì)星期幾
varstr="";
varweek=newdate().get♦∏εday();
if(week==0){
str="今天是(shì)星期日(¶≤β®rì)";
}elseif(week==1){
str="今天是(shì)星期一(yī)"±£;;
}elseif(week==2){
str="今天是(shì)星期二&q♥₹<₩uot;;
}elseif(week==3){
str="今天是(shì)星期三";
}elseif(week==4){
str="今天是(shì)星期四";
}elseif(week==5){
str="今天是(shì)星期五♣©";
}elseif(week==6){
str="今天是(shì)星期六";
}
//或者更好(hǎo)一(yī)些(xiē)
varstr1="今天是(shì)星&≤ 期";
varweek=newdate().getday();
switch(week){
case0:
str1+="日(rì)";
break;
case1:
str1+="一(yī)&quo→₹t;;
break;
case2:
str1+="二";
case3:
str1+="三"¶γβ≈;;
break;
case4:
str1+="四";
break;
case5:
str1+="五";
break;
case6:
str1+="六";
break;
}
alert(str);
alert(str1);
複制(zhì)代碼
入門(mén)"階段是(shì)每¥♣個(gè)程序員(yuán)的(de)必經之路(lù)，隻要(yào)&qu€£¥ot;入門(mén)"，你(nǐ)就(jiù)上§'♣(shàng)路(lù)了(le)。所謂"師(shī)≠•傅領進門(mén)，修行(xíng)靠個(gè)人(r <±&én)"，有(yǒu)了(le)這(z↔≤hè)個(gè)"入門(mén)&q∏♠→uot;的(de)基礎，自(zì)己就(jiù)可(kě)以↔σλσ摸索著(zhe)前進了(le)。
進階之路(lù)
将javascript、html、css之類的(de)編碼©¥幫助手冊裡(lǐ)的(de)每個(gè)方法/屬性都(dōu)通(tōng♦λα)讀(dú)幾遍！隻有(yǒu)将基礎打好(hǎλ® o)，以後的(de)路(lù)才能(néng)走的(de)順暢。參考這βλσ(zhè)些(xiē)幫助文(wén)檔，力争寫出無瑕疵的(de)代碼。♣✔
這(zhè)些(xiē)編碼文(wén)檔建議(yì)不(≥¶♠bù)僅是(shì)在入門(mén)提高(gāo¥£₹→)期看(kàn)，在你(nǐ)以後每個(gè)階段破階的(de)時(shí)候↓£都(dōu)應該看(kàn)看(kàn)，最基礎的₹↕¥(de)東(dōng)西(xī)往往也(yě)是(sh±∑✘≠ì)最給力的(de)東(dōng)西(xī ∞)，有(yǒu)時(shí)能(néng)夠給你(nǐ) γ帶來(lái)意想不(bù)到(dào)的(de)收φ$獲。
二.【登堂】
能(néng)夠正确地(dì)解決問(wèn)題。不(bù)管你(n₽≠ǐ)是(shì)通(tōng)過搜索網絡，或者通↕£≥(tōng)過改造某些(xiē)成品代碼（jπ≥query/dojo/ext/yui）案例，隻要©∏"γ(yào)能(néng)夠無錯(cuò)地(dì)完成需求。
同樣以上(shàng)面的(de)那(nà)段σ "字符串剪裁"代碼為(wèi)例：
varstr="www.ba&☆φ♠idu.com/?page";
str=str.replace(/?page/,"•₩♠");
alert(str);
複制(zhì)代碼
僅僅解決問(wèn)題對(duì)于"登堂&quo>♥→t;階段來(lái)說(shuō)已經不(bù)是(shì)問(wèn)≤↓ 題，這(zhè)個(gè)級别所給出方案不(bù)£∞>←能(néng)是(shì)漏洞百出。以上(shàng¥ε)面這(zhè)段代碼為(wèi)例：replace$↑♦方法的(de)第一(yī)個(gè)參數(shù)雖然可(kě>)以支持字符串，但(dàn)最佳的(de)類型→♣是(shì)正則表達式；
vara=newarray("日(rì)",&φ∑quot;一(yī)",&quo₩£↕t;二","三","四♦$☆","五",&↑<'<quot;六");
varweek=newdate().getday();
varstr="今天是(shì)星期"+a↑↑[week];
alert(str);
複制(zhì)代碼
對(duì)比"入門(m✔₽βén)級"的(de)代碼，不(bù)管是(shì)從(cóng)代γ ☆₹碼量、代碼效率、代碼優美(měi)性、代碼思路(lù)來(lái)說(shuōβ♥& )，"登堂"級的(de)≠≤ ∞這(zhè)個(gè)日(rì)期處理(lǐ)代碼都(dōu)要(yào)優♣₩≈秀很(hěn)多(duō)。
進階之路(lù)
這(zhè)個(gè)階段雖然能(néng)夠給出正确的(de)&←∏<解題方案，但(dàn)是(shì)不(bù) >★一(yī)定是(shì)最優秀的(de)方案。如(rú)何才能(néng↓£)得(de)到(dào)最優秀的(de)方案呢(ne)？首先就(jiù)是(₹→shì)積累各種能(néng)夠解決需求∞✔∑的(de)方案，然後再驗證每個(gè)方案，在這(zhè)些(xiē)♣σ方案中選擇最好(hǎo)的(de)一(yī)種。因此該階段的(de)進π₹階之路(lù)就(jiù)是(shì)&qu♥€§ot;行(xíng)萬裡(lǐ)路(lù)，看(kàn)萬卷書(shū)&qu¥★β×ot;，積累各個(gè)需求的(de)各個(gè)解決方案。
你(nǐ)可(kě)以紮身(shēn)在專業(yè &)論壇（藍(lán)色理(lǐ)想、無憂、csdn）裡$φ(lǐ)，通(tōng)讀(dú)所有(yǒu)的™<λ(de)faq及帖子(zǐ)；你(nǐ)可(kě)以打開(kāi)搜索引擎，'÷窮舉所有(yǒu)的(de)搜索結果。自(zì)己建立測試環境一(®±> yī)一(yī)驗證這(zhè)些(xiē)代碼：去(✔±βqù)揣摩每段代碼的(de)意圖，去(qù)比較每段代碼之間(jiφ±♥ān)的(de)差異。這(zhè)兩條路(lù)可(k↔∏γ§ě)以讓你(nǐ)快(kuài)速完成原始積∞φ©累，當你(nǐ)再面對(duì)大(dà)多(duō)數(shù)需求時(¥<shí)能(néng)夠說(shuō)這(zhè)些(xiē)問(w×>èn)題我以前做(zuò)過，那(nà)你(nǐ)就(jiù)水(♥¥©shuǐ)到(dào)渠成地(dì)晉階了(le)。
三.【入室】
最強代碼，知(zhī)道(dào)所有(yǒu)能(n∏•↕≥éng)夠解決需求的(de)各種方案，能(néng)夠選擇使用(yò₩ ng)最優秀的(de)方案滿足需求。這(zhè)個(gè)β≥↓級别基本上(shàng)産品開(kāi)發編程中的(de)代碼主 ©≥€力。給出的(de)一(yī)招一(yī)式，招招都(dōu)♥₩§是(shì)絕招。
還(hái)以上(shàng)面的(de)那(nà)個(gè)例₽₹∏子(zǐ)為(wèi)例，你(nǐ)能(néng)說(shuō)出1→±✘、2、3之間(jiān)的(de)差别，以及适用(yò∑§ng)于那(nà)種環境嗎(ma)？
varstr="www.baidu.com/?page&quεβ≤ot;;
//1、字符串剪裁
str.substring(0,st♦€r.indexof("?page$←"));
//2、正則表達式
str.replace(/?page/,""∏♦σ✘;);
//3、字符串分(fēn)拆、合并
str.split("?page").join(&β≈quot;");
複制(zhì)代碼
能(néng)夠解決問(wèn)題的(de)方法∑∑會(huì)有(yǒu)很(hěn)多(duō)，但(dàn)是(s₽λhì)對(duì)于程序員(yuán)來(lái)說(shuō) ←應該選擇最優秀的(de)。上(shàng)面這(zhè→™)段代碼從(cóng)代碼量來(lái)說(shu←φ ō)"正則表達式"最優秀；從(cóng)代碼♦₹♦¥執行(xíng)效率來(lái)說(shuō)："字符§←©÷串剪裁"法最高(gāo)（chrome中"正則表達式&q±γ✘¶uot;效率最高(gāo)），split法最§♦↔次；從(cóng)可(kě)擴展性上(shàng)來(lái)₹®說(shuō)，"正則表達式"±✘法最優。具體(tǐ)使用(yòng)那(nà)種方案視(s¶±→∑hì)具體(tǐ)的(de)需求環境而定。
"入室"階段，程序員(yuán)應該能↔<(néng)夠肯定的(de)回答(dá)：對(duì)于這§™×(zhè)個(gè)需求而言，我的(de)代碼₩×÷就(jiù)是(shì)最優秀的(de)代碼。
再以"今天是(shì)星期₽'幾"為(wèi)例，"登堂"級的($↔de)代碼你(nǐ)敢說(shuō)是(shì)最優秀的(de)代碼↑λλ∞了(le)嗎(ma)？
//計(jì)算(suàn)系統當前是(≤"εshì)星期幾
varstr="今天是(shì)星期&quo׶♠σt;+"日(rì)一(yī)二三四>×♦五六".charat(newda$¶<te().getday());
複制(zhì)代碼
對(duì)比"登堂"級的<≤¥↓(de)示例代碼，上(shàng)面這(zhè)段代碼給你(nǐ)什 Ω☆(shén)麽感受？程序員(yuán)追求的(de)就♣™¥(jiù)是(shì)完美(měi)。"入室"級别追求的(↓₽ ♣de)就(jiù)是(shì)每一(yī)招每一(yī)式的(de↓≠)完美(měi)無缺。
從(cóng)web前端編程來(lái)說(shuō)，通(tō&≈ng)過2年(nián)左右的(de)努力，很(ελ☆hěn)多(duō)人(rén)能(néng)夠達到(dào)這(zhè)個'γ≠(gè)水(shuǐ)平，但(dàn)是(sh←↕®ì)，很(hěn)大(dà)一(yī)部分(fēn)人(rén) ¥£±的(de)編程能(néng)力也(yě)就(©ε✔jiù)止步于此。或限于産品的(de)需求單一(yī)性，或限于需求開(k♥Ω ∑āi)發的(de)時(shí)間(jiān)緊迫性，或限 于人(rén)的(de)惰性，能(néng)夠完美(m>©£ěi)地(dì)解決當前的(de)需求就(jiù)夠÷≠γ了(le)。
由于長(cháng)期處于技(jì)術(shù)平台期，技(jì®∞σ)術(shù)上(shàng)得(de)不(bù)到(dào)提高(gāo)π，通(tōng)常這(zhè)個(gè)級别的(de)§"♣¥工(gōng)程師(shī)會(huì)比較→©±燥。技(jì)術(shù)上(shàng)小(xiǎo)有≤§ (yǒu)所成；或追求個(gè)人(ré↔☆n)的(de)突破；或追求産品差異性帶來(lái)的(de)新鮮σ'感；或者隻是(shì)想換個(gè)心情；因此很(hě$₹↑$n)多(duō)此級别的(de)工(gōng)程師(sπ↓♦hī)會(huì)經常換公司。
戒驕戒躁：
切勿以為(wèi)自(zì)己能(néng ✔↓)寫一(yī)手漂亮(liàng)的(de)代碼而自(zì)滿；↔σ
切莫以為(wèi)别人(rén)&↕™α←quot;尊稱"你(nǐ)一(yī)聲"® ;大(dà)俠"你(nǐ)就(jiù)以"大(dà)俠 ∑✘♦"自(zì)居；
切莫以為(wèi)自(zì)己積累了™↑ (le)一(yī)些(xiē)得(de)意的(♥✔de)代碼就(jiù)成了(le)框架式開γ₩ λ(kāi)發。
細節決定成敗，優秀的(de)方案并β♠不(bù)能(néng)保證最終的(de)成功$¥∑。還(hái)以"删除指定字符串&q>♥&uot;為(wèi)例，原始字符串從(cóng)格式✔∞α≥上(shàng)來(lái)看(kàn)應該是≤∑§σ(shì)了(le)個(gè)url鏈接，在去(qù)除&q¥α>©uot;pn=0"之後，最末尾處留了(l•e)一(yī)個(gè)尾巴"₩ε?"；如(rú)果原始字符串是(₽Ωshì)"http://www.xxx.com/?pn=0&'±Ω≥;a=1"，去(qù)除"pn=0"§Ω;之後?和(hé)&兩個(gè)符号緊貼一(yī)起₹>，這(zhè)更是(shì)明(míng)顯的(de)bug。
進階之路(lù)
此階段進階之路(lù)就(jiù)是(shì)：切勿心浮氣≠α躁；你(nǐ)不(bù)再被需求牽著(zhe)λβ™φ走，而是(shì)你(nǐ)牽著(zhe)需求走。±ε注重細節，注意那(nà)些(xiē)當前需©β ☆求裡(lǐ)沒有(yǒu)明(míng)文(wén)給出≈•的(de)細節：代碼性能(néng)的(de)差異、運§€行(xíng)平台（浏覽器(qì)）的(de)差異、需求的(de)隐性↔∞∞≠擴展、代碼的(de)向後兼容等等。
再通(tōng)讀(dú)幾遍html/css/javascriptα↕ 幫助文(wén)檔。
我建議(yì)這(zhè)個(gè)級别的(de& )工(gōng)程師(shī)做(zuò)一(yī)做(z₹εδuò)webtreeview控件(jiàn)σ☆¥，要(yào)求總節點量一(yī)萬左右操作(zuò$§←)流暢，你(nǐ)的(de)晉升之路(lù)就(jiù)¶•γ←在這(zhè)個(gè)控件(jiàn)的(de)編碼過程中。
四.【入微(wēi)】
最強解決方案。你(nǐ)能(néng)夠走₹<在需求的(de)前面，将當前需求裡(lǐ©&≠♠)有(yǒu)的(de)、沒有(yǒu)直接提出來(lái)的(de)、現(δ∑>xiàn)在暫時(shí)沒有(yǒu)但(dàn)将來(lái)可(kβ→ě)能(néng)有(yǒu)的(de)等等§₹≥，及前端編程潛規則等各個(gè)方方面面都(dōu)綜合考慮，₽™φ≤給出最優方案。以一(yī)招勝萬招。
varstr="http://www.xxx.com≥∞β↑/?pn=0";//删除指定字符pn=0
//我将這(zhè)個(gè)字符串裡 (lǐ)所可(kě)能(néng)想到(dào)的(dλφ✔e)各種情況都(dōu)列舉出來(lái)
vara=[
"http://www.xxx♥π.com/vmpn=?pn=0"//pn=可(kě)能(né☆&ng)出現(xiàn)在?前
,"http://www.xxx.com↕✘/vmpn=?pn="//url裡(lǐ)允許pn值為<↔♦(wèi)空(kōng)
,"http://www.xxx.com/£☆vmpn=?pn=0&a=1"//url裡∑★★♥(lǐ)可(kě)有(yǒu)多(duō)個(gè)字段
,"http://www.xxx.com/vmpn=?≈π↓≤a=1&pn=0"//可(kě)能(néng)排在最後
,"http://www.xxx.com/vmpn=?a=1×→&pn=0&pn=1"//可(kě)能(n£♦éng)有(yǒu)多(duō)個(gè)pn字段
,"http://www.xxx.co♠₩™m/vmpn=?a=1&pn=0&b=2"//可± σ'(kě)能(néng)在中間(jiān)
,"http://www.xxx.com/vmpn=?a=1•<&pn=0&pn=1&a↕€•©mp;b=1"//可(kě)能(néng)在中間(jiān)成組
,"http://www.xxx.com/vmpn=?a=1δ♣&pn=0&b=1&pn=1"₩ ∑≤;//可(kě)能(néng)零星分(fēn)布
];
/*需求的(de)不(bù)言之秘：
?若出現(xiàn)在字符串最尾則要(yào)去(qù)之
?&兩個(gè)符号不(bù)可(kě)重疊
*/
varreg=/((\?)(pn=[^&]*&)+('←φ×?!pn=))|(((\?|&)pn=[^&amφ←αp;]*)+$)|(&pn=[^&]*)↓₩$→/g;
for(vari=0;i<a.leng✘ ∑th;i++){
alert(a+"\n"+a.rep♣→&lace(reg,"$2"));
}
複制(zhì)代碼
這(zhè)個(gè)階段已經不(bù£®≠§)再追求一(yī)招一(yī)式，對(duì)你(nǐ)來宀(lái)說(shuō)不(bù)是(shì)使用(yòng)什(✘Ω★Ωshén)麽創新絕招解決需求，而是(shì)給出成熟穩重的(de)&β方案，從(cóng)根上(shàng)解決問(wèn)題。針 ♠≠₹對(duì)某個(gè)當前需求你(nǐ)的(de)代碼可(kě)能(n≥éng)不(bù)是(shì)最優，但(dàn)是(shì)針對(duì)φ此類的(de)需求你(nǐ)的(de)代碼卻是(shì)最→←λ優秀的(de)代碼。
進階之路(lù)
很(hěn)多(duō)web前端研發→®α¶工(gōng)程師(shī)在做(zuò)了(l§φe)3-4年(nián)之後就(jiù)會(huì)進入一(yī)個(←↕✘gè)瓶頸期：産品開(kāi)發需求是(shì)小(xiǎo₹)菜一(yī)碟，沒有(yǒu)新鮮的(de)可(kě)以挑戰的(de)東(±≈♦∑dōng)西(xī)；代碼開(kāi)發中的(de)稀奇的(de ¥)解題方法都(dōu)已經嘗試過。沒有(yǒu)了(le)可(kě λ )挑戰的(de)難題，失去(qù)了(le)探索的(de)激情，也$₹↔(yě)就(jiù)沒有(yǒu)了(le)再上(shàng)升的₹®(de)動力，好(hǎo)不(bù)容易走過"入↑α室"級别的(de)人(rén)又(>₽ yòu)會(huì)有(yǒu)八九成止步于此。或轉做(z∑↔↑uò)技(jì)術(shù)領導人(rén)，或轉到(dào™<)其它的(de)領域，或換公司。
這(zhè)些(xiē)人(rén)的(de)上(s∞Ωhàng)升之路(lù)在哪裡(lǐ)呢(ne)？
這(zhè)個(gè)階段單單依靠技(jì)巧和(hé)數(shù)量的 σβ(de)累積已經沒有(yǒu)什(shén)麽效果了(le)，突¥€>Ω破之路(lù)在第5層《化(huà)蝶》裡(lǐ)會(huì)詳細說(shu✔←$ō)明(míng)，我建議(yì)你(nǐ)在這(zhèσ↑&•)個(gè)階段末尾著(zhe)重關注編程理(lǐ)論：面向對(d∞∞™←uì)象/過程、代碼組織形式、編譯、代碼規範、其它的(de)框架∑ε設計(jì)等等。
我建議(yì)這(zhè)個(gè)級别σ∏的(de)工(gōng)程師(shī)做(zuò)一(yī ¥ )做(zuò)webeditor控件(jiàn)，不(bù)要(yào ±)求完整功能(néng)，但(dàn)是(shì)該控件(γσjiàn)裡(lǐ)的(de)模塊劃分(♦ ∞♦fēn)、代碼組織、編程思想做(zuò)到(d↓δào)位，給出一(yī)個(gè)系統的(de)解決方案。
五.【化(huà)蝶】
破繭重生(shēng)，這(zhè)個(gè←β)層次關注的(de)是(shì)編程語言本身(shēn)↕♠φ，而不(bù)再關心産品需求。什(shén)麽是(shì)繭？産↔♠✘品需求就(jiù)是(shì)繭。當你(nǐ)一α®(yī)招勝萬招，打遍天下(xià)需求之時(shí)，你γγ≥(nǐ)如(rú)果還(hái)拘泥于需求開(←€φkāi)發，那(nà)就(jiù)是(shì)你(nǐ)限于↓÷≠繭中而不(bù)自(zì)知(zhī)。要(yào)麽就≥♥♦(jiù)在這(zhè)個(gè)繭裡(lǐ)默默地(dì)♦₩¥$老(lǎo)去(qù)，要(yào)麽就(jiù)破γσε♠開(kāi)繭獲得(de)新生(shēng)。
還(hái)是(shì)以那(nà)個(g∞±è)"字符串剪裁"的(∞ 'de)老(lǎo)例子(zǐ)：
/**
*在拼接正則表達式字符串時(shí)，<≠₽π消除原字符串中特殊字符對(duì)正則表達式的(de)幹擾
*@author:meizz
*@version:2010/12/16
*@param{string}str被γδ¥ 正則表達式字符串保護編碼的(de)字符串
*@return{string}被保護處理(lǐ)過後的✔≤"(de)字符串
*/
functionescapereg(str){
returnstr.replace(new&∞♥±regexp("([.*+?^=!:\x24{}()|[\\•♦]\/\\\\])","g&quoσt;),"\\\x241");
}
/**
*删除url字符串中指定的(de)quer≠πy
*@author:meizz
*@version:2010/12/16
*@param{string}urlurl字符串
*@param{string}key被删除的(de)que®♠ry名
*@return{string}被删除指 ≠π定query後的(de)url字符串
*/
functiondelurlquery(ur≈∑εl,key){
key=escapereg(key);
varreg=newregexp("((\\?€♠±>)("+key+"=[^&§δ]*&)+(?!"+key↔≠®+
"=))|(((\\?|&λ amp;)"+key+"=[^&]*)ε™✘+$)|(&"+key+&qu™ε☆>ot;=[^&]*)"™•,"g");
returnurl.replace(reg,★¶✔×"\x241")
}
//應用(yòng)實例
varstr="http://www.xxxπ.com/?pn=0";//删除指定字符pn=0→✔
delurlquery(str,"pn&quo≥π±¶t;);
複制(zhì)代碼
這(zhè)段代碼相(xiàng)對↑¶π(duì)于層次4《入微(wēi)》有(yǒu)什(shén)麽區(qū)别嗎§↑¥(ma)？從(cóng)代碼實現(xiàn)上(₽ shàng)來(lái)說(shuō)沒有(yǒu)太™Ω≤±大(dà)的(de)區(qū)别，但(dàn)是(s±♦δhì)從(cóng)思路(lù)上(shàng)來(lá©γi)說(shuō)卻有(yǒu)著(zhe)本質的(de)區(qū↔)别：1、不(bù)再是(shì)就(j€≈×iù)事(shì)論事(shì)，頭疼醫(↑→yī)頭，而是(shì)把一(yī)類問(w∏¶èn)題抽象理(lǐ)論化(huà)，一Ω(yī)招破萬招；2、有(yǒu)封裝的(de)概念，不© ✘$(bù)再是(shì)每次從(cóng)零>★開(kāi)始，而是(shì)站(zhàn)在半山(shān)腰₩®開(kāi)始爬。
在web前端研發隊伍裡(lǐ)也(yě)有(yǒu)↑₽ 很(hěn)大(dà)一(yī)部分(fēn)人(r§¶↑✔én)《入室》層次時(shí)就(jiù)自(zì)我感覺良好(♥"±₩hǎo)，直接跨躍到(dào)《化(huà)蝶》∞★，積累自(zì)己的(de)代碼庫，抽象化(huà)問(wèn)題 ₩γ。但(dàn)沒有(yǒu)基礎，缺少(shǎo)強大(dà)的(de)γ→÷後勁，即使能(néng)夠破繭也(yě)經受不(bù)了(le)風(¥↔fēng)吹雨(yǔ)打。一(yī)份不(bù)成熟的(de)架✘↑"構設計(jì)對(duì)團隊開(kāi< ±÷)發帶來(lái)的(de)危害遠(yuǎn)大(dà)于它帶來(♥÷lái)的(de)好(hǎo)處，這(zhè)種例™∑€π子(zǐ)在業(yè)界屢見(jiàn)不(bù)鮮。不(bù)要(yào)拔<≠≤苗助長(cháng)，不(bù)要(yào)不∞•¶(bù)會(huì)走就(jiù)想著(zhe)跑，夯實基礎，±λ水(shuǐ)到(dào)渠成地(dì)成長(cháng) ≤♣，厚積薄發，強力地(dì)破繭而出。
進階之路(lù)
你(nǐ)已經從(cóng)原始積累，到(dào)厚積薄發，到"≈∏(dào)破繭而出之後，你(nǐ)所關注的(de)應該∏÷<不(bù)再是(shì)一(yī)招一(yī)式、一(yī)個(gè)項目 ✔¶、一(yī)個(gè)模塊，而應該是(shì)一(yī)種思≤≠'路(lù)，一(yī)種理(lǐ)論。你(nǐ)可(kě)以做(zuò)以&≥下(xià)幾個(gè)步驟以突破到(dào)更高(gāo)層次：€☆"£再仔細看(kàn)幾遍html/css/jaα©₽<vascript接口幫助文(wén)檔；選擇一(yī)門(mé•↑n)強語言（c++/c#/java等）觀察理(lǐ)解這(zh≠±è)些(xiē)語言的(de)組織結構，語言設計(jì)；看(kàn)看→×↔(kàn)原型鏈，鏈式語法編程，泛型，接口編程，dom遙控器(qì•®÷)等等；仔細閱讀(dú)成熟的(de)w≠>←←eb前端開(kāi)發框架的(de)設計(jì)₽↔γφ文(wén)檔，看(kàn)他(tā)們為(wèi)什(shγ≤₹én)麽要(yào)這(zhè)樣設計(jì)。
六.【大(dà)俠】
這(zhè)裡(lǐ)所說(shuō)的(de)大(dà)俠，↕∏γ©不(bù)是(shì)大(dà)家(jiā)₩☆♠互相(xiàng)吹捧的(de)"大(dà)俠""≤;，而是(shì)實至名歸的(de)高(gāo)手。這(zh∞∑₽è)個(gè)級别的(de)人(rén)完全有(yǒu)能(néng)力寫出σ↕♥'不(bù)差于bindows/jquery/ext/yui/dojo的(§₩"✔de)同等級别規模的(de)前端開(kāi)發框架。應用(yòng ★)成熟的(de)開(kāi)發框架指導、解決問(wèn)題。€₽<
//庫文(wén)件(jiàn)/mz/string/esca¶β pereg.js
/**
*在拼接正則表達式字符串時(shí)，消除原字符串中特殊字符對(d<π™Ωuì)正則表達式的(de)幹擾
*@author:meizz
*@version:2010/12•®/16
*@param{string}str被正則表達式字符串保護編碼的(d&÷e)字符串
*@return{string}被保護處理(l<®ǐ)過後的(de)字符串
*/
mz.string.escapereg=function(s✘πtr){
returnstr.replace(n§↕ ewregexp("([.*+?^♣©¥=!:\x24{}()|[\\]\/\\\\])","g&≈•¶quot;),"\\\x241"✘β);
}
//庫文(wén)件(jiàn)/mz/url/delquery.j£×π↑s
///includemz.string.escλ&♣apereg;
/**
*删除url字符串中指定的(de)query
*@author:meizz
*@version:2010/12/16
*@param{string}urlurl字符串
*@param{string}key被删除的(de)query名
*@return{string}被删除指定quδ♣↑ery後的(de)url字符串
*/
mz.url.delquery=function(url,key){
key=mz.string.escapereg(key);
varreg=newregexp(&qu•¶↓ot;((\\?)("+key+"=[^&]*&a∏λmp;)+(?!"+key+
"=))|(((\\?|&)&qβ↑←uot;+key+"=[^&]*)+$)|(∑&≠&"+key+"=[^&ππamp;]*)","g&γβαquot;);
returnurl.replace(r←Ω$ eg,"\x241")
}
//應用(yòng)實例
///includemz.url.d₩→elquery;
varstr="http://↓¶ www.xxx.com/?pn=0";//删除指定字符pn=0
mz.url.delquery(str,"♠★¥φ;pn");
複制(zhì)代碼
自(zì)成體(tǐ)系，有(yǒu)基礎，也(yě)有(≤¶yǒu)理(lǐ)論高(gāo)度。知(zhī)道(dào)為(wèi)≈δ♣§什(shén)麽這(zhè)樣設計(jì)，也(y'₩ě)知(zhī)道(dào)什(shén)麽樣'₽ 的(de)設計(jì)最好(hǎo)。比如(rú)這(∑©∞>zhè)個(gè)例子(zǐ)可(kě)以有(yǒu)這(zhè)樣的★α(de)封裝：
//庫文(wén)件(jiàn)/mz/url/deλקlquery.js
///includemz.stri☆₩₩ng.escapereg;
/**
*删除url字符串中指定的(de)query
*@author:meizz
*@version:2010/12/16
*@param{string}ur¥σ♠↓lurl字符串
*@param{string}key被删♣♣除的(de)query名
*@return{string}被 φ删除指定query後的(de)url字符串
*/
string.prototype.delquery=functi♣<on(key){
key=mz.string.esc♦∞§apereg(key);
varreg=newregexp("((\\?)☆∑∏∑("+key+"=[^&]*&)+(?σ•→!"+key+
"=))|(((\\?|&am☆≥σp;)"+key+"=[^•✔§&]*)+$)|(&"+key+&q"↕€uot;=[^&]*)","g"₹€);
returnthis.replace(reg,"\x241&€ ®quot;)
}
//應用(yòng)實例
///includemz.url.delquer♣₩y;
varstr="http://www.xxx.₹™±com/?pn=0";//删除指定字符pn=0
str.delquery("pn");
複制(zhì)代碼
而為(wèi)什(shén)麽不(bù)采用(yòng)下(x$£≤ià)面的(de)那(nà)種封裝呢(ne)？經過了(le)《知(zhī)微®×(wēi)》和(hé)《化(huà)蝶》你(nǐ)就(j&₽πiù)懂(dǒng)了(le)。
進階出路(lù)
道(dào)法自(zì)然，從(cóng)根πλ上(shàng)去(qù)尋找突破的(de)契✘÷機(jī)。你(nǐ)可(kě)以研讀(dú)html解析引擎設計(jì↓σ♣≤)與實現(xiàn)，js解析引擎設計(jì)與實現(xiàn)↔φ☆δ，其它語言的(de)代碼解析與編譯實現(< ↑≤xiàn)等等。
或者出些(xiē)書(shū)。低(dī)級别的(de)人(<©rén)寫的(de)書(shū)要(yào)麽是(shì™ ↕¶)一(yī)大(dà)抄，空(kōng)無一(yī)物(wù)；要(yào)™≠麽是(shì)害人(rén)。
七.【宗師(shī)】
這(zhè)個(gè)級别的(de)人(ré→≠€n)已然到(dào)了(le)無招勝有(yǒu)招的(§÷εde)境界。項目開(kāi)發中的(de)難題？沒有(yǒu)難題Ω！運行(xíng)平台的(de)差異？從(cóng)根本上(s↔↑hàng)搞定！代碼規範、開(kāi)發模式，早πΩ已經被抛在身(shēn)後。這(zhè)個(gèσ♠σ)級别的(de)人(rén)已經不(bù)再關注于某個(gè)前端開π♥(kāi)發框架，而是(shì)應對(duì)具體(tǐ)的(dλ&> e)環境給出最佳的(de)理(lǐ)論指導。
這(zhè)個(gè)級别的(de)人(rén)所注意的(de↑↔ Ω)應該是(shì)以最合理(lǐ)的(de)系統架構引←λ↓領著(zhe)整個(gè)團隊的(de)進步，在什(shénγ)麽樣的(de)場(chǎng)景下(xià)該用(yò↔↓ng)什(shén)麽樣的(de)架構設↑₩☆計(jì)。3個(gè)、10個(gè)、50個(gè)、100個(gè)人( ≤rén)的(de)團隊最應該用(yòng)哪種模式？等你(nǐ)到(d→₽ào)了(le)宗師(shī)級别，你(nǐ)再來(lái)回答(dá)吧(☆ ∑ba)。
進階出路(lù)
每一(yī)個(gè)宗師(shī)就(jiù)是(shì)一(yī ♣✘)個(gè)高(gāo)山(shān)，就(jiù ₩)是(shì)一(yī)個(gè)領域裡(lǐ)的(¥₹•de)神，但(dàn)是(shì)你(nǐ)僅滿足于在一(yī)群比你(n≠αǐ)弱的(de)群體(tǐ)展現(xiàn)你(nǐ)的(de)強∞•★σ大(dà)嗎(ma)？如(rú)果還(hái)你(nǐ)是(shì©€)止步原地(dì)，那(nà)總會(huì)有 ↔★(yǒu)人(rén)乘著(zhe)飛(fēi)機(jī)、宇宙飛☆₽(fēi)船(chuán)從(cóng)你(nǐ)的(de↔₩)頭領掠過，高(gāo)處不(bù)勝寒！ λ
要(yào)突破這(zhè)片領域，那(n≠±à)就(jiù)必須跳(tiào)出這(zhè)片領域。要(♦₽β←yào)想突破web前端研發的(de)宗師(shī)級Ω ，那(nà)就(jiù)跳(tiào)出web前端吧(ba)，上("©shàng)面還(hái)有(yǒu)web開(kāi)發。即使你(nǐ)α<☆是(shì)web前端的(de)宗師(shī)，但(dàn)沒有(↔<yǒu)快(kuài)速的(de)數(shù)據響應，£↕→沒有(yǒu)高(gāo)速的(de)網絡架構，沒有(yǒu)優美(měiΩ↕✘)的(de)系統支持，你(nǐ)又(yòu)能(néng)如(rú☆±€)何？所以突破之路(lù)就(jiù)是•÷(shì)把目光(guāng)投到(dào)整條web開(kāi)發䙀¥的(de)鏈條中去(qù)。
八.【飛(fēi)升】
其實嚴格來(lái)說(shuō)，飛₩Ωφ←(fēi)升已經不(bù)是(shì)原領域的(de)範圍了(le)。在we☆ε±b研發領域，對(duì)于這(zhè)個(±₩¶gè)層次的(de)有(yǒu)一(yī)個(gè)很≤±(hěn)好(hǎo)聽(tīng)的(de)稱謂：架構師(s↔✔≠hī)。當然那(nà)些(xiē)"僞架構師(shī≈←∞)"另當别論。
