5.11日(rì)音(yīn)訊,網站(zhàn)前 ↑•β端設計(jì)師(shī)的(de)蛻變之路(lù)

　　5.11日(rì)音(yīn)訊,網站(zhàn)前端↕£設計(jì)師(shī)的(de)蛻變之路(lùλ​)。如(rú)果你(nǐ)是(shì)剛進入web前↔≠$§端研發領域，想試試這(zhè)潭水(shuǐ)有(y₹α ǒu)多(duō)深，看(kàn)這(zφ‍hè)篇文(wén)章(zhāng)吧(b↑→a)；如(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āng)吧(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ǐ)系的(de)理(φ"¥γlǐ)論指引，幾乎所有(yǒu)從(cóng)事(shì)這(zhè)個(gè✔♠)職業(yè)的(de)人(rén)都(dōu)是(sσ¥±hì)靠自(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)者少(s♥≈​←hǎo)走些(xiē)彎路(lù)，辛甚辛₩®∑♥甚！

　　【前言】

　　所謂的(de)天才，隻不(bù)過是(shì)比平常人(rén)更快≠÷(kuài)的(de)掌握技(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ì)己的(de)等級（不(bù↑®←)要(yào)以你(nǐ)目前能(néng)力的(de)σ¶β最高(gāo)點，而是(shì)以你(nǐ)當前£ ↕‍能(néng)力的(de)中檔與之等級作¥♠>(zuò)對(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)編程水(s $≥huǐ)平。

　　切記心浮氣燥，級别夠了(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)水(s' ×huǐ)平。有(yǒu)一(yī)定的(d↕¥e)基礎（比如(rú)最常見(jiàn)的(de)φ‌html标簽及其屬性、事(shì)件(jiàn)、方法；最常見(jiàn)λ•ε'的(de)css屬性；基礎的(de)javascript​≠®編程能(néng)力），能(néng)夠完成一(yī✔±)些(xiē)簡單的(de)web前端研發需求。

　　舉個(gè)例子(zǐ)：删除一(​≥™yī)字符串中指定的(de)字符。

　　varstr="www.baidu.com/?page";

　　str=str.replace('?™ βpage',"");

　　alert(str);

　　str=str.substring(0,str.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().getday();

　　if(week==0){

　　str="今天是(shì)星期日(rì)";

　　}elseif(week==1){

　　str="今天是(shì)星期一(yī)";

　　}elseif(week==2){

　　str="今天是(shì)星期二";

　　}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ī)";

　　break;

　　case2:

　　str1+="二";

　　break;

　　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♠€÷>)"入門(mén)"，你(nǐ)就(jiù)上(sΩδ&×hàng)路(lù)了(le)。所謂"師(shī)傅領進門(mén)，修§₩>"行(xíng)靠個(gè)人(rén)"，☆✘有(yǒu)了(le)這(zhè)個(gè)"入門(mé★‍β←n)"的(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)走的(d®$e)順暢。參考這(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ē)成品代碼（jquery/dojo/ext<∏"/yui）案例，隻要(yào)能(néng)夠無錯(cuò)地(dì)λ®≥✘完成需求。

　　同樣以上(shàng)面的(de)那(nà)段"字符串剪裁"代碼為(☆ wèi)例：

　　varstr="www.baidu.com/?page₽↔ε↑";

　　str=str.replace(/?page/® ,"");

　　alert(str);

　　複制(zhì)代碼

　　僅僅解決問(wèn)題對(duì)于"登堂"階段來(lái←β≤)說(shuō)已經不(bù)是(shì)問(wèn)題，這(zhè)δ•個(gè)級别所給出方案不(bù)能(néng)是(shì)漏洞百出。以上 →(shàng)面這(zhè)段代碼為(wèi)例：re§÷place方法的(de)第一(yī)個(gè)參±≠數(shù)雖然可(kě)以支持字符串，但(dàn)₽•β 最佳的(de)類型是(shì)正則表達式；

　　vara=newarray("日(rì)","一(yī)","二",↓÷₩>"三","四","五","六");

　　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ì)"行(xín‍ ✔g)萬裡(lǐ)路(lù)，看(kàn)萬卷✘®÷≤書(shū)"，積累各個(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)差異。這(z☆✘¥Ωhè)兩條路(lù)可(kě)以讓你(nǐ)快(kuài)♣ εγ速完成原始積累，當你(nǐ)再面對(duì)大(dà)多(duō)數♠€δ(shù)需求時(shí)能(néng)夠說(shuō)這(zh®™$ è)些(xiē)問(wèn)題我以前做(zuò)過，那(nà)你(nǐ)就(j‍±iù)水(shuǐ)到(dào)渠成地(dì)晉↔₩階了(le)。

　　三.【入室】

　　最強代碼，知(zhī)道(dào)所有(yǒu)能(nén☆<∏g)夠解決需求的(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↕>";

　　//1、字符串剪裁

　　str.substring(0,str.♣↑indexof("?page"));

　　//2、正則表達式

　　str.replace(/?page/,"");

　　//3、字符串分(fēn)拆、合并

　　str.split("?page")φ€♦₩.join("");

　　複制(zhì)代碼

　　能(néng)夠解決問(wèn)題的(de)方法會÷¶₹(huì)有(yǒu)很(hěn)多(duō)，但(dà∑​n)是(shì)對(duì)于程序員(y≈λλuán)來(lái)說(shuō)應該選擇最優秀的(de)。上(shà €σng)面這(zhè)段代碼從(cóng)代碼量來$☆(lái)說(shuō)"正則表達式"最優秀；從(cóng)代碼執行(x♥ ♣ íng)效率來(lái)說(shuō)："字符串剪裁"法最₽→∑高(gāo)（chrome中"正則表達式"效率最高(gāo)）∑δ，split法最次；從(cóng)可(kě)擴展性上σ₩₹‌(shàng)來(lái)說(shuō)，"正則表達式"法最優γ‌&。具體(tǐ)使用(yòng)那(nà)種方案視(shì)↔∑具體(tǐ)的(de)需求環境而定。

　　"入室"階段，程序員(yuán)應該能(néng)夠肯定的(d≠→e)回答(dá)：對(duì)于這(zhè)個(gè)需求¶​¥而言，我的(de)代碼就(jiù)是(shì)最優秀的(de)代碼。

　　再以"今天是(shì)星期幾"為(wèi)例，"登堂"級的✔ (de)代碼你(nǐ)敢說(shuō)是(shìε×&)最優秀的(de)代碼了(le)嗎(maπ♠→)？

　　//計(jì)算(suàn)系統當前是(shì)♠♣星期幾

　　varstr="今天是(shì)星期"+"日(φ π×rì)一(yī)二三四五六".charat(newdate().get‌★↑∞day());

　　複制(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àn♦←€g)小(xiǎo)有(yǒu)所成；或追求個(‍™gè)人(rén)的(de)突破；或追求産品差異性帶來(lái)↑™§的(de)新鮮感；或者隻是(shì)想換個(gè)心情；因此<α很(hěn)多(duō)此級别的(de)工(gōng)★<​>程師(shī)會(huì)經常換公司。

　　戒驕戒躁：

　　切勿以為(wèi)自(zì)己能(néng)寫一(∞‍yī)手漂亮(liàng)的(de)代碼而自(zì)滿；

　　切莫以為(wèi)别人(rén)"尊稱"你(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)以"删除指定字符串"為(wèi)例，原始字符串從♣ (cóng)格式上(shàng)來(lái)看(kàn)應該©γΩ<是(shì)了(le)個(gè)url鏈接，在去(qù)除"pn=÷∞₩0"之後，最末尾處留了(le)一(yī)φ↕¶個(gè)尾巴"?"；如(rú)果原始字符串是(shì)"h₩•§€ttp://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)給出的(d¶✔₹e)細節：代碼性能(néng)的(de)差異、運行(xíng)平台（浏覽≈γ器(qì)）的(de)差異、需求的(de)隐性擴展、代碼λ∑&≥的(de)向後兼容等等。

　　再通(tōng)讀(dú)幾遍html/css/javascr¶εγ ipt幫助文(wén)檔。

　　我建議(yì)這(zhè)個(gè)級别的(de)工(​₽‍•gōng)程師(shī)做(zuò)一(yī)做(zuò)webtreevieε§∞w控件(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)®•♠的(de)各種情況都(dōu)列舉出來(lái)≈¶★ 

　　vara=[

　　"http://www.xxx.com/vmpn=?pn=0"±±‌ //pn=可(kě)能(néng)出現(xiàn)在?前

　　,"http://www.xxx.c"γ'om/vmpn=?pn="//url裡(♦<lǐ)允許pn值為(wèi)空(kōng)

　　,"http://www.xxx.★ ÷com/vmpn=?pn=0&a=1"//uδ"←™rl裡(lǐ)可(kě)有(yǒu)多(duō)個(gè)字段

　　,"http://www.xxx.cδ≤✘♣om/vmpn=?a=1&pn=0"//可±α§(kě)能(néng)排在最後

　　,"http://www.xxx.co‍ε<m/vmpn=?a=1&pn=0&pn=1"/ φα¶/可(kě)能(néng)有(yǒu)多(duō)個(g ‍è)pn字段

　　,"http://www.xxx.com/vmpn=?a= ↓¥₩1&pn=0&b=2"//可(kě)能(néng)在中間(♥∞jiān)

　　,"http://www.xxx.c₽¥$¥om/vmpn=?a=1&pn=0&pn=1&b=1"//可(kě)能(nén♥σg)在中間(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=[^&]*)+$)|(&pn=[^&]*)/g;

　　for(vari=0;i<>

　　alert(a+" "+a.replace(re±≥"₹g,"$2"));

　　}

　　複制(zhì)代碼

　　這(zhè)個(gè)階段已經不(bù)再追求一(×∏ΩΩyī)招一(yī)式，對(duì)你(nǐ)來(lái☆↕ )說(shuō)不(bù)是(shì)使用(yòn☆←×>g)什(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ò)了(le)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)八九成止步于此。或轉做(zuò)技(jì)術(sh©↔™↔ù)領導人(rén)，或轉到(dào)其它的(d✘<♥↑e)領域，或換公司。

　　這(zhè)些(xiē)人(rén)的(de)上(sh ☆∏àng)升之路(lù)在哪裡(lǐ)呢(ne)？

　　這(zhè)個(gè)階段單單依靠技(jì)巧和(hé)數(s" hù)量的(de)累積已經沒有(yǒu)什(shén)麽效↔≥•果了(le)，突破之路(lù)在第5層《化(≈ γhuà)蝶》裡(lǐ)會(huì)詳細說(shuō)明(míσ ₽εng)，我建議(yì)你(nǐ)在這(zhè)個(g§✘è)階段末尾著(zhe)重關注編程理(lǐ)論：面向對(duìε&<)象/過程、代碼組織形式、編譯、代碼規範★>、其它的(de)框架設計(jì)等等。

　　我建議(yì)這(zhè)個(gè)級别的(de)工(gōng)程→ε師(shī)做(zuò)一(yī)做(zuò)webeditoקr控件(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ù)是(s™∏∑hì)你(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(newregexp("([.$ε₹*+?^=!:${}()|[]/\])","g"),"$1♦↔");

　　}

　　/**

　　*删除url字符串中指定的(de)q∞₩↕uery

　　*@author:meizz

　　*@version:2010/12/16

　　*@param{string}urlurl字符串

　　*@param{string}key被删除的(de)query名

　　*@return{string}被删除指定query後的✘∏'(de)url字符串

　　*/

　　functiondelurlquer£₽πy(url,key){

　　key=escapereg(key);

　　varreg=newregexp("((?)("+key+"=™"☆γ[^&]*&)+(?!"+key+

　　"=))|(((?|&)"+key+"=[βδ∞÷^&]*)+$)|(&"+key+"=[^&]*)"α←ε,"g");

　　returnurl.replace(reg,"$1")

　　}

　　//應用(yòng)實例

　　varstr="http://www.xxx.com/?pn=0";₽≤♣←//删除指定字符pn=0

　　delurlquery(str,"pn");

　　複制(zhì)代碼

　　這(zhè)段代碼相(xiàng)對(duì¶↕σ)于層次4《入微(wēi)》有(yǒu)什(shén)麽區(qū)别嗎(mα©a)？從(cóng)代碼實現(xiàn)上(shàng)來(lái)說(shuφ¶φō)沒有(yǒu)太大(dà)的(de)區(qū)别，但(dα↑àn)是(shì)從(cóng)思路(lù)上(shàng)來(lái)↓®​₽說(shuō)卻有(yǒu)著(zhe)€↓₽ε本質的(de)區(qū)别：1、不(bù)再是(shì) ♣≠®就(jiù)事(shì)論事(shì)，頭疼醫(yī←σ÷)頭，而是(shì)把一(yī)類問(wèπ←Ωn)題抽象理(lǐ)論化(huà)，一(yī)招破萬招；2、有(yǒ✘‍ ♣u)封裝的(de)概念，不(bù)再是(shì)每次從(™¶ γcóng)零開(kāi)始，而是(shì)站(zhàn)在半山(s∞≠‌€hā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/c ↕>​ss/javascript接口幫助文(wén)檔；選擇一(yī)門(m₽σén)強語言（c++/c#/java等）觀察理(lǐ)解這(z¥γhè)些(xiē)語言的(de)組織結構，語言設計₽σ←‌(jì)；看(kàn)看(kàn)原型鏈，鏈式語法編程，泛型，接口編λ 程，dom遙控器(qì)等等；仔細閱讀(dú)成熟的(de)we§&÷¥b前端開(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ā)互相(x↕÷iàng)吹捧的(de)"大(dà)俠"，而是(shì'←₩)實至名歸的(de)高(gāo)手。這(zhè)個(gè)級别的(de)人(>¶™λrén)完全有(yǒu)能(néng)力寫出不(bù)差于bindo♠≈ws/jquery/ext/yui/dojo的(de)同等級别規模的(de)前±★≈±端開(kāi)發框架。應用(yòng)成熟的(de)開(kāi)發β₩框架指導、解決問(wèn)題。

　　//庫文(wén)件(jiàn)/mz/string/escapereg₽σ±σ.js

　　/**

　　*在拼接正則表達式字符串時(shí)，消除原字符串中特™<★殊字符對(duì)正則表達式的(de)幹擾

　　*@author:meizz

　　*@version:2010/12/16

　　*@param{string}str被正則表達式字符串保護編碼的(de)λ←字符串

　　*@return{string}被保護處理(lǐ)過後的(de)字符 €​‍串

　　*/

　　mz.string.escapereg=function(s£ tr){

　　returnstr.replace(newregexp("([.*+?→€^=!:${}()|[]/\])","g"),"$1");

　　}

　　//庫文(wén)件(jiàn)/mz/url/delquery.js±✘

　　///includemz.string.escapereg;

　　/**

　　*删除url字符串中指定的(de)query

　　*@author:meizz

　　*@version:2010/12/γΩ☆16

　　*@param{string}urlurl字符串

　　*@param{string}key•≈被删除的(de)query名

　　*@return{string}被删除指定query後✔σ$的(de)url字符串

　　*/

　　mz.url.delquery=function(url,key){

　　key=mz.string.escapereg(key$→→);

　　varreg=newregexp("((?)("+key+"±☆₹↑=[^&]*&)+(?!"+key+

　　"=))|(((?|&)"+key+"=[^&]*)+$)|(&"≤♠+key+"=[^&]*)","g");

　　returnurl.replace(reg,"$1¥φ♥")

　　}

　　//應用(yòng)實例

　　///includemz.url.delquery‌←;

　　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/ur•π↑l/delquery.js

　　///includemz.strinφ♣ββg.escapereg;

　　/**

　　*删除url字符串中指定的(de)query

　　*@author:meizz

　　*@version:2010/12/16

　　*@param{string}urlurl字符§β串

　　*@param{string}key被删除的(de)quφ≤®€ery名

　　*@return{string}被"↕>¶删除指定query後的(de)url字符串

　　*/

　　string.prototype.delquery=funσ"ction(key){

　　key=mz.string.escapereg(key®→∞);

　　varreg=newregexp("(( <≈>?)("+key+"=[^&]*&)+(?!"+key+

　　"=))|(((?|&)"+key+"=[^&]*)¥♣™✔+$)|(&"+key+"=[^&]*)","g");

　　returnthis.replace(reg,"$1")

　　}

　　//應用(yòng)實例

　　///includemz.url.delquery;

　　varstr="http://ww‌ε↕↑w.xxx.com/?pn=0";//删除©<‍指定字符pn=0

　　str.delquery("pn");

　　複制(zhì)代碼

　　而為(wèi)什(shén)麽不(bù)采用(yòng)下(xià)面的•"λ♣(de)那(nà)種封裝呢(ne)？經過了(le)《知(zhī×↔¥)微(wēi)》和(hé)《化(huà)蝶》你®♣€(nǐ)就(jiù)懂(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)招的(d☆♠✘e)境界。項目開(kāi)發中的(de)難題？沒有(yǒu)難題！運行→×¥ (xíng)平台的(de)差異？從(cóng)根本上(shàn♣≥∏g)搞定！代碼規範、開(kāi)發模式，早已經被抛在身(shēn)後。這(zh ‌∑è)個(gè)級别的(de)人(rén)已經不(bù)再關注于某個(gè)前端'>開(kāi)發框架，而是(shì)應對(duì)具φφ♦≤體(tǐ)的(de)環境給出最佳的(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ù)是(s≈Ω★hì)一(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)乘著(z✘✔ he)飛(fēi)機(jī)、宇宙飛(fēi)船(chu©α∑≠án)從(cóng)你(nǐ)的(de)頭領掠過，高(gā×&o)處不(bù)勝寒！

　　要(yào)突破這(zhè)片領域，那(nà)就(jiù)必須跳(tiΩ↕ào)出這(zhè)片領域。要(yào)想突破w€♦‍eb前端研發的(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)。在web研發領域&↔，對(duì)于這(zhè)個(gè)層次的(de)有(yǒu)一(✘$≠yī)個(gè)很(hěn)好(hǎo)聽(tīng)的(de)稱$δ 謂：架構師(shī)。當然那(nà)些(xiē)"僞架構師(shī)"另當别φ‌論。