web前端project師知識彙總

分類： Web開發應用
 1、何爲Web前端project師？
    
     前端project師，也叫Web前端開發project師。他是隨着web發展。細分出來的行業。Web前端開發project師。主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各類Web技術進行產品的界面開發。製做標準優化的代碼，並添加交互動態功能，開發JavaScript以及Flash模塊。同一時候結合後臺開發技術模擬整體效果。進行豐富互聯網的Web開發，致力於經過技術改善用戶體驗。
Web前端project師成長之路——知識彙總
 圖一、前端技術MSS


     Web前端開發技術主要包含三個要素：HTML、CSS和JavaScript！
    它要求前端開發project師不只要掌握主要的Web前端開發技術。站點性能優化、SEO和server端的基礎知識。而且要學會運用各類工具進行輔助開發以及理論層面的知識，包含代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
    隨着近兩三年來RIA（Rich Internet Applications的縮寫。中文含義爲：豐富的因特網應用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight、XML和server端語言（PHP、ASP.NET。JSP、Python）等語言，前端開發project師也需要掌握。
    前端開發的入門門檻事實上很是低，與server端語言先慢後快的學習曲線相比。前端開發的學習曲線是先快後慢。

    HTML 甚至不是一門語言。他不過簡單的標記語言！

    CSS 僅僅是無類型的樣式修飾語言。固然可以勉強算做弱類型語言。
    Javascript 的基礎部分相對來講不難，入手還算快。


   
     也正因爲如此，前端開發領域有很是多自學成「才」的同行，但大多數人都停留在會用的階段，因爲後面的學習曲線愈來愈陡峭，每前進一步都很是難。 Web前端技術有一些江湖氣。知識點過於瑣碎，技術價值觀的博弈也難分伯仲，即全局的系統的知識結構並未成體系，這些因素也客觀上影響了「正統「前端技術的沉澱！而且各類「奇技淫巧」被濫用，前端技術知識的傳承也過於泛泛，新人難看清時局把握主次。

所以，前端技術領域，爲本身覓得一個靠譜的師兄，重要性要蓋過項目、團隊、公司、甚至薪水。


    還有一方面，正如前面所說，前端開發是個很新的職業，對一些規範和最佳實踐的研究都處於探索階段。總有新的靈感和技術不時閃現出來，好比CSS sprite、負邊距佈局、柵格佈局等。各類JavaScript框架層出不窮，爲整個前端開發領域注入了巨大的活力。瀏覽器大戰也愈來愈白熱化，跨瀏覽器兼容方案依舊是五花八門。

爲了知足「高可維護性」的需要。需要更深刻、更系統地去掌握前端知識，這樣纔可能建立一個好的前端架構，保證代碼的質量。


    隨着手持設備的迅猛發展。帶動了 HTML5行業標準的高速發展。web領域的技術。大概有10年都沒有大的更新了！

現在市場很是需要優秀的、高級的前端project師。一方面是因爲這是一個比較新的細分行業，而且前端程序猿大都自學一部分。知識結構不繫統；還有一方面。大學裏面沒有這樣的課程，最最重要的是：北大青鳥這類培訓機構也沒有專門的前端project師的培訓課程！

！


    吳亮在《JavaScript 王者歸來》第一張的序裏面說：大多數程序猿以爲 Javascript 過於簡陋，僅僅適合一些網頁上面花哨的表現。因此不肯花費精力去學習。或者覺得不學習就能掌握。實際上，一門語言是否腳本語言，每每是她的設計目標決定，簡單與複雜並不是區分腳本語言和非腳本語言的標準。

其實，在腳本語言裏面，Javascript 屬於至關複雜的一門語言，他的複雜度即便放在非腳本語言中來衡量。也是一門至關複雜的語言！Javascript 的複雜度不遜色於 Perl 和 Python！




 2、怎樣學習前端知識？
    
     做爲一名最基礎的前端project師你必須掌握HTML、CSS和JavaScript。三者必須同一時候精通，相似我字樣對前端知識只知其一;不知其二的，一遇到問題就停下工做就四處搜索解決方式的，首先就算不上一個合格的前端人員。

像我這種假設當了前端project師那工期確定是不能保證的。合格的前端project師第一要學會的就是在沒有不論什麼外來幫助的狀況下（包含搜索引擎），能夠完畢大多數任務。

 下面知識點是做爲一個前端project師必須瞭解和熟悉的：


    DOM結構——兩個節點之間可能存在哪些關係以及怎樣在節點之間隨意移動。
    DOM操做——如何加入、移除、移動、複製、建立和查找節點。

    事件——如何使用事件以及IE和DOM事件模型之間存在哪些主要區別。
    XMLHttpRequest——這是什麼、如何完整地運行一次GET請求、如何檢測錯誤。
    嚴格模式與混雜模式——怎樣觸發這兩種模式。區分它們有何意義。

    盒模型——外邊距、內邊距和邊框之間的關係，IE < 8中的盒模型有什麼不一樣。

    塊級元素與行內元素——怎麼用CSS控制它們、它們如何影響周圍的元素以及你認爲應該如何定義它們的樣式。
    浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

    HTML與XHTML——兩者有什麼差異。你認爲應該使用哪個並說出理由。

    JSON——它是什麼、爲何應該使用它、究竟該怎麼使用它，說出實現細節來。

    
     上述這些知識點都應該是你「想都不用想」就知道的東西。除了上述的前端知識，也還需學會至少一門後端編程語言，讓你本身學會怎樣與後端進行更好的交互。很是多前端project師對一些庫很是的熟悉，jQuery。Bootstrap等。但是對於庫的熟悉並不能提現你的優秀，整整優秀的是那些理解庫背後的機制，特別是能夠徒手寫出一個本身的庫的人。

真正合格的前端project師是能實現詳細的功能要求。而優秀的前端project師需要解決的問題是尋找一個最優的解決方式。

    再者，優秀的前端project師需要具有良好的溝通能力，因爲前端project師至少都要知足四類客戶的需求：


    產品經理。

這些是負責策劃應用程序的一羣人。

他們會想出很是多新奇的、奇怪的、甚至是不可是實現的應用。通常來講，產品經理都追求豐富的功能。

    UI設計師。這些人負責應用程序的視覺設計和交互模擬。

他們關心的是用戶對什麼敏感、交互的一向性以及整體的好用性。通常來講，UI設計師於流暢靚麗、但並不easy實現的用戶界面，而且他們經常不滿前端project師形成 1px 的偏差。
    項目經理。這些人負責實際地執行和維護應用程序。項目管理的主要關注點，無外乎正常執行時間、應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標每每是儘可能保持事情的簡單化，以及不在升級更新時引入新問題。
    終於用戶。指的是應用程序的主要消費者。雖然前端project師不會經常與終於用戶打交道，但他們的反饋意見相當重要。

終於用戶要求最多的就是對我的實用的功能，以及競爭性產品所具有的功能。  


     
     Yahoo公司 ，YUI的開發project師 Nicholas C. Zakas 以爲：前端project師是計算機科學職業領域中最複雜的一個工種。絕大多數傳統的編程思想已經不適用了，爲了在多種平臺中使用，多種技術都借鑑了大量軟科學的知識和理念。成爲優秀前端project師所要具有的專業技術，涉及到廣闊而複雜的領域。這些領域又會因爲你終於必須服務的各方的介入而變得更加複雜。專業技術可能會引領你進入成爲前端project師的大門，但僅僅有運用該技術創造的應用程序以及你跟他人並肩協同的能力。纔會真正讓你變得優秀。


 3、提高無止境


Web前端project師成長之路——知識彙總
 圖二、Web前端project師知識架構


    優秀的前端project師應該具有高速學習能力。

推進Web發展的技術並不是精巧不動的，這些技術差點兒天天都在變化，假設沒有高速學習能力。你就跟不上Web發展的步伐。你必須不斷提高本身。不斷學習新技術、新模式；只依靠今天的知識沒法適應將來。

Web的明天與今天必將有天差地別，而你的工做就是要搞清楚怎樣經過本身的Web應用程序來體現這樣的翻天覆地的變化。




 4、前端開發知識架構


 前端project師


    瀏覽器
        IE6/7/8/9
         Firefox
         Chrome/Safari/Opera
     編程語言
        JavaScript/Node.js
         JavaScript語言精粹
    切頁面
        HTML/HTML5
         CSS/CSS3
         PhotoShop/Paint.net


         開發工具
            IDE
                 VIM/Sublime Text2
                 Notepad++/EditPlus
                 WebStorm
             調試工具
                Firebug/Firecookie
                 YSlow
                 IEDeveloperToolbar/IETester
                 Fiddler
             版本號管理
                Git/SVN
                 Github/Bitbucket/Google Code


         代碼質量
            Coding style
                 JSLint/JSHint
                 CSSLint
                 Markup Validation Service
             單元測試
                QUnit/Jasmine
                 Mocha/Should/Chai
             本身主動化測試
                WebDriver


         前端庫/框架
            jQuery/Underscore/Mootools/Prototype.js
             YUI3/Dojo/ExtJS
             Backbone/KnockoutJS/Emberjs
         前端標準/規範
            HTTP1.1
             ECMAScript3/5
             W3C/DOM/BOM/XHTML/XML/JSON/JSONP
             CommonJS/AMD
             HTML5/CSS3
         性能
            JSPerf
             YSlow 35 rules
             PageSpeed
             HTTPWatch
             DynaTrace’s Ajax
             高性能JavaScript
         編程知識儲備
            數據結構
            OOP/AOP
             原型鏈/做用域鏈
            閉包
            函數式編程
            設計模式
            Javascript Tips
         部署流程
            壓縮合並
                YUI Compressor
                 Google Clousure Complier
                 CleanCSS/UglifyJS
             文檔輸出
                JSDoc
                 Dox/Doxmate
             項目構建工具
                make/Ant
                 GYP
                 Grunt
                 Yeoman


         代碼組織
            類庫模塊化
                CommonJS/AMD
                 YUI3模塊
            業務邏輯模塊化
            文件載入
                LABjs
                 SeaJS/Require.js


         安全
            CSRF/XSS
             ADsafe/Caja/Sandbox
         移動Web
             HTML5/CSS3
             響應式設計
            Zeptojs/iScroll
             V5/Sencha Touch
             PhoneGap
             jQuery Mobile
         JavaScript生態
            MongoDB/CouchDB
         前沿技術社區/會議
            D2/WebRebuild
             NodeParty/W3CTech/HTML5夢工廠
            JSConf/滬JS(JSConf.cn)
             QCon/Velocity/SDCC
             JSConf/NodeConf
             YDN/YUIConf
         計算機知識儲備
            編譯原理
            計算機網絡
            操做系統
            算法原理
            軟件project/軟件測試原理
        軟技能
            知識管理/總結分享
            溝通技巧/團隊協做
            需求管理/PM
             交互設計/可用性/可訪問性知識
        可視化
            SVG/Canvas/VML
             D3/Raphaël/DataV


     後端project師
        編程語言
            C/C++/Java/PHP/Ruby/Python/…
        數據庫
            SQL
             MySQL/MongoDB/Oracle
         操做系統
            Unix/Linux/OS X/Windows
         數據結構






 5、Web前端學習書籍
    
     HTML、CSS 類別書籍，都是大同小異，在噹噹網、卓越網搜索一下很是多推薦。

假設感受學的幾乎相同了，可以關注一下《CSS禪意花園》，這個很是有影響力。

Javascript 的書籍 推薦看老外寫的，國內很是多 Javascript 書籍的做者對 Javascript 語言瞭解的都不是很是透徹。
    這裏推薦幾本 Javascript 書籍：
    ——0基礎讀物：——
    《JavaScript高級程序設計》：一本很完整的經典入門書籍。被譽爲JavaScript聖經之中的一個，具體解釋的很具體。最新版第三版已經公佈了，建議購買。
    《JavaScript王者歸來》百度的一個Web開發項目經理寫的，做爲剛開始學習的人準備的入門級教程也不錯。
    ——中級讀物：——
    《JavaScript權威指南》：另一本JavaScript聖經，解說的也很具體。屬於中級讀物，建議購買。
    《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神領袖Douglas Crockford的大做，儘管才100多頁。但是字字珠璣啊！強烈建議閱讀。
    《高性能JavaScript》：《JavaScript高級程序設計》做者Nicholas C. Zakas的又一大做。
    《Eloquent JavaScript》：這本書才200多頁，很短小，經過幾個很經典的樣例（艾米麗姨媽的貓、悲慘的隱士、模擬生態圈、推箱子游戲等等）來介紹JavaScript方方面面的知識和應用方法。

 高級讀物：
    《JavaScript Patterns 》：書中介紹到了各類經典的模式，如構造函數、單例、工廠等等，值得學習。

    《Pro.JavaScript.Design.Patterns》：Apress出版社解說JavaScript設計模式的書，很不錯。

    《Developing JavaScript Web Applications》：構建富應用的好書，針對MVC模式有較爲深刻的解說，同一時候也對一些流程的庫進行了解說。

    《Developing Large Web Applications》：不只有JavaScript方面的介紹，還有CSS、HTML方面的介紹。但是介紹的內容卻都很不錯，真正考慮到了一個大型的Web程序下。怎樣進行JavaScript架構設計，值得一讀。     要作優秀的前端project師，還需要繼續努力：《高性能站點建設指南》、《Yahooproject師的站點性能優化的建議》、「YSLOW」性能優化建議、《站點重構》、《Web開發敏捷之道》、「 jQuery 庫」、「前端框架」、「HTML5」、「CSS3」…… 這些都要深刻研究！     萬事開頭難。假設你能到這個境地，剩下的路本身就可以走下去了。假設單純僅僅是學習前端編程語言、而不懂後端編程語言（PHP、ASP.NET，JSP、Python）。也不能算做是優秀的前端project師。在成爲一個優秀的前端project師的道路上，充滿了汗水和辛勞。