• <noscript id="eom2a"><optgroup id="eom2a"></optgroup></noscript>
    <tt id="eom2a"><small id="eom2a"></small></tt>
    <input id="eom2a"></input>
  • <div id="eom2a"><small id="eom2a"></small></div>
    <td id="eom2a"><small id="eom2a"></small></td>
  • 您的位置:知識庫 ? Web前端

    WEB前端研發工程師編程能力成長之路(1)

    作者: hszy00232  發布時間: 2011-03-25 10:01  閱讀: 6922 次  推薦: 5   原文鏈接   [收藏]  

      【背景】

      如果你是剛進入WEB前端研發領域,想試試這潭水有多深,看這篇文章吧;
      如果你是做了兩三年WEB產品前端研發,迷茫找不著提高之路,看這篇文章吧;
      如果你是四五年的前端開發高手,沒有難題能難得住你的寂寞高手,來看這篇文章吧;

      WEB前端研發工程師,在國內是一個朝陽職業,自07-08年正式有這個職業以來,也不過三四年的時間。這個領域沒有學校的正規教育,沒有行內成體系的理論指引,幾乎所有從事這個職業的人都是靠自己自學成才。自學成才,一條艱辛的坎坷路,我也是這樣一路走來。從2002年開始接觸WEB前端研發至今已然有了9個年頭,如今再回首,期間的走了很多彎路。推已及人,如果能讓那些后來者少走些彎路,辛甚辛甚!

      【前言】

      所謂的天才,只不過是比平常人更快的掌握技能、完成工作罷了;只要你找到了正確的方向,并輔以足夠的時間,你一樣能夠踏上成功彼岸。

      本文將WEB前端研發編程能力劃分了八個等級,每個等級都列舉出了對應的特征及破級提升之方法,希望每位在看本文的同學先準確定位自己的等級(不要以你目前能力的最高點,而是以你當前能力的中檔與之等級作對比,以免多走彎路),參考突破之法破之。

      所謂的級別,只是你面對需求時的一種態度:能夠完成、能夠完美地完成、能夠超出預期地完成。以追求完美的態度加以扎實的編程功力,那就是你的編程水平。

      切記心浮氣燥,級別夠了,那級別里的東西自然就懂了。悟了就是悟了,沒悟也沒關系,靜下心來,投入時間而已。

      一.【入門】

      能夠解決一些問題的水平。有一定的基礎(比如最常見的HTML標簽及其屬性、事件、方法;最常見的CSS屬性;基礎的JavaScript編程能力),能夠完成一些簡單的WEB前端研發需求。

      舉個例子:刪除一字符串中指定的字符。

    var str="www.baidu.com/?page";
    str
    =str.replace('?page',"");
    alert(str);
    str
    =str.substring(0,str.indexOf("/"));
    alert(str);
      首先不要苛責代碼的對錯嚴謹,畢竟每個程序員都有這樣的一個過程;其次,這兩段代碼在這個實例里沒有什么大過錯,可能會有瑕疵,但能夠解決問題(刪除指定的字符),這就是這個級別的特征。

      再舉個例子:

    // 計算系統當前是星期幾
    var str = "";
    var week = new Date().getDay();
    if (week == 0) {
    str
    = "今天是星期日";
    }
    else if (week == 1) {
    str
    = "今天是星期一";
    }
    else if (week == 2) {
    str
    = "今天是星期二";
    }
    else if (week == 3) {
    str
    = "今天是星期三";
    }
    else if (week == 4) {
    str
    = "今天是星期四";
    }
    else if (week == 5) {
    str
    = "今天是星期五";
    }
    else if (week == 6) {
    str
    = "今天是星期六";
    }
    // 或者更好一些
    var str1 = "今天是星期";
    var week = new Date().getDay();
    switch (week) {
    case 0 :
    str1
    += "";
    break;
    case 1 :
    str1
    += "";
    break;
    case 2 :
    str1
    += "";
    break;
    case 3 :
    str1
    += "";
    break;
    case 4 :
    str1
    += "";
    break;
    case 5 :
    str1
    += "";
    break;
    case 6 :
    str1
    += "";
    break;
    }
    alert(str);
    alert(str1);
    入門”階段是每個程序員的必經之路,只要“入門”,你就上路了。所謂“師傅領進門,修行靠個人”,有了這個“入門”的基礎,自己就可以摸索著前進了。

      【進階之路】

    JavaScriptHTMLCSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍!只有將基礎打好,以后的路才能走的順暢。參考這些幫助文檔,力爭寫出無瑕疵的代碼。

      這些編碼文檔建議不僅是在入門提高期看,在你以后每個階段破階的時候都應該看看,最基礎的東西往往也是最給力的東西,有時能夠給你帶來意想不到的收獲。

      二.【登堂】

    能夠正確地解決問題。不管你是通過搜索網絡,或者通過改造某些成品代碼(jQuery/Dojo/Ext/YUI)案例,只要能夠無錯地完成需求。

      同樣以上面的那段“字符串剪裁”代碼為例:

    var str="www.baidu.com/?page";
    str
    =str.replace(/?page/,"");
    alert(str);
    僅僅解決問題對于“登堂”階段來說已經不是問題,這個級別所給出方案不能是漏洞百出。以上面這段代碼為例:replace方法的第一個參數雖然可以支持字符串,但最佳的類型是正則表達式;
    var a = new Array("", "", "", "", "", "", "");
    var week = new Date().getDay();
    var str = "今天是星期"+ a[week];
    alert(str);
    對比“入門級”的代碼,不管是從代碼量、代碼效率、代碼優美性、代碼思路來說,“登堂”級的這個日期處理代碼都要優秀很多。

      【進階之路】

      這個階段雖然能夠給出正確的解題方案,但是不一定是最優秀的方案。如何才能得到最優秀的方案呢?首先就是積累各種能夠解決需求的方案,然后再驗證每個方案,在這些方案中選擇最好的一種。因此該階段的進階之路就是“行萬里路,看萬卷書”,積累各個需求的各個解決方案。

      你可以扎身在專業論壇(藍色理想、無憂、CSDN)里,通讀所有的FAQ及帖子;你可以打開搜索引擎,窮舉所有的搜索結果。自己建立測試環境一一驗證這些代碼:去揣摩每段代碼的意圖,去比較每段代碼之間的差異。這兩條路可以讓你快速完成原始積累,當你再面對大多數需求時能夠說這些問題我以前做過,那你就水到渠成地晉階了。

      三.【入室】

      最強代碼,知道所有能夠解決需求的各種方案,能夠選擇使用最優秀的方案滿足需求。這個級別基本上產品開發編程中的代碼主力。給出的一招一式,招招都是絕招。

      還以上面的那個例子為例,你能說出123之間的差別,以及適用于那種環境嗎?

    var str="www.baidu.com/?page";
    // 1、字符串剪裁
    str.substring(0, str.indexOf("?page"));
    // 2、正則表達式
    str.replace(/?page/, "");
    // 3、字符串分拆、合并
    str.split("?page").join("");
    能夠解決問題的方法會有很多,但是對于程序員來說應該選擇最優秀的。上面這段代碼從代碼量來說“正則表達式”最優秀;從代碼執行效率來說:“字符串剪裁”法最高(Chrome中“正則表達式”效率最高),split法最次;從可擴展性上來說,“正則表達式”法最優。具體使用那種方案視具體的需求環境而定。

      “入室”階段,程序員應該能夠肯定的回答:對于這個需求而言,我的代碼就是最優秀的代碼。

      再以“今天是星期幾”為例,“登堂”級的代碼你敢說是最優秀的代碼了嗎?

    // 計算系統當前是星期幾
    var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
    對比“登堂”級的示例代碼,上面這段代碼給你什么感受?程序員追求的就是完美。“入室”級別追求的就是每一招每一式的完美無缺。
      從WEB前端編程來說,通過2年左右的努力,很多人能夠達到這個水平,但是,很大一部分人的編程能力也就止步于此。或限于產品的需求單一性,或限于需求開發的時間緊迫性,或限于人的惰性,能夠完美地解決當前的需求就夠了。

      由于長期處于技術平臺期,技術上得不到提高,通常這個級別的工程師會比較燥。技術上小有所成;或追求個人的突破;或追求產品差異性帶來的新鮮感;或者只是想換個心情;因此很多此級別的工程師會經常換公司。

      戒驕戒躁:

      切勿以為自己能寫一手漂亮的代碼而自滿;
      切莫以為別人“尊稱”你一聲“大俠”你就以“大俠”自居;
      切莫以為自己積累了一些得意的代碼就成了框架式開發。

      細節決定成敗,優秀的方案并不能保證最終的成功。還以“刪除指定字符串”為例,原始字符串從格式上來看應該是了個URL鏈接,在去除“pn=0”之后,最末尾處留了一個尾巴“?”;如果原始字符串是“http://www.xxx.com/?pn=0&a=1”,去除“pn=0”之后 ? & 兩個符號緊貼一起,這更是明顯的bug

      【進階之路】

      此階段進階之路就是:切勿心浮氣躁;你不再被需求牽著走,而是你牽著需求走。注重細節,注意那些當前需求里沒有明文給出的細節:代碼性能的差異、運行平臺(瀏覽器)的差異、需求的隱性擴展、代碼的向后兼容等等。

      再通讀幾遍HTML/CSS/JavaScript幫助文檔。

      我建議這個級別的工程師做一做WebTreeView控件,要求總節點量一萬左右操作流暢,你的晉升之路就在這個控件的編碼過程中。

    5
    0

    Web前端熱門文章

      Web前端最新文章

        最新新聞

          熱門新聞

            黄色网_免费在线黄色电影_黄色成人快播电影_伦理电影_黄色片