前端工程師(前端書籍推薦,前端知識結構)

時間 2019-11-07

標籤前端工程師書籍推薦知識結構简体版

原文原文鏈接

1、技術的必須的前端

做爲一名最基礎的前端工程師你必須掌握HTML、CSS和JavaScript。三者必須同時精通，對前端知識只知其一;不知其二的，一遇到問題就停下工做就四處搜索解決方案的，首先就算不上一個合格的前端人員。這樣的若是當了前端工程師那工期確定是不能保證的。合格的前端工程師第一要學會的就是在沒有任何外來幫助的狀況下（包括搜索引擎），可以完成大多數任務。算法

如下知識點是做爲一個前端工程師必須瞭解和熟悉的：數據庫

DOM結構——兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差異。
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
盒模型——外邊距、內邊距和邊框之間的關係，IE < 8中的盒模型有什麼不一樣。
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你以爲應該如何定義它們的樣式。
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
HTML與XHTML——兩者有什麼區別，你以爲應該使用哪個並說出理由。
JSON——它是什麼、爲何應該使用它、到底該怎麼使用它，說出實現細節來。

上述這些知識點都應該是你「想都不用想」就知道的東西。除了上述的前端知識，也還需學會至少一門後端編程語言，讓你本身學會如何與後端進行更好的交互。編程

不少前端工程師對一些庫很是的熟悉，jQuery，Bootstrap等，可是對於庫的熟悉並不能提現你的優秀，整整優秀的是那些理解庫背後的機制，特別是可以徒手寫出一個本身的庫的人。後端

真正合格的前端工程師是能實現具體的功能要求，而優秀的前端工程師須要解決的問題是尋找一個最優的解決方案。設計模式

2、溝通很重要瀏覽器

優秀的前端工程師須要具有良好的溝通能力，由於你的工做與不少人的工做息息相關。在任何狀況下，前端工程師至少都要知足下列四類客戶的需求。緩存

產品經理——這些是負責策劃應用程序的一羣人。他們可以想象出怎樣經過應用程序來知足用戶需求，以及怎樣經過他們設計的模式賺到錢（希望如此）。通常來講，這些人追求的是豐富的功能。
UI設計師——這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一向性以及總體的好用性。他們熱衷於流暢靚麗但並不容易實現的用戶界面。
項目經理——這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間——應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標每每是儘可能保持事情的簡單化，以及不在升級更新時引入新問題。
最終用戶——固然是應用程序的主要消費者。儘管咱們不會常常與最終用戶打交道，但他們的反饋意見相當重要；沒人想用的應用程序毫無價值。最終用戶要求最多的就是對我的有用的功能，以及競爭性產品所具有的功能。

不要在沒有做出評估以前就隨便接受某項任務。你必須始終記住，必定先搞清楚別人到底想讓你幹什麼，不能簡單地接受「這個功能有問題」之類的大概其的說法。並且，你還要確切地知道這個功能或設計的真正意圖何在。「加一個按鈕」之類的任務並不總意味着你最後會加一個按鈕。還可能意味着你會找產品經理，問一問這個按鈕有什麼用處，而後再找UI設計師一塊探討按鈕是否是最佳的交互手段。要成爲優秀的前端工程師，這種溝通相當重要。安全

那麼，前端工程師應該最關注哪些人的意見呢？答案是全部這四類人。優秀的前端工程師必須知道如何平衡這四類人的需求和預期，而後在此基礎上拿出最佳解決方案。因爲前端工程師處於與這四類人溝通的交匯點上，所以其溝通能力的重要性不言而喻。若是一個很是酷的新功能由於會影響前端性能，必須刪繁就簡，你怎麼跟產品經理解釋？再好比，假設某個設計若是不改回原方案可能會給應用程序形成負面影響，你怎麼才能說服UI設計師？做爲前端工程師，你必須瞭解每一類人的想法從何而來，必須能拿出全部各方都能接受的解決方案。從某種意義上說，優秀的前端工程師就像是一位大使，須要時刻抱着外交官的心態來應對每一天的工做。服務器

專業技術可能會引領你進入成爲前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力，纔會真正讓你變得優秀。

3、提高無止境

優秀的前端工程師應該具有快速學習能力。推進Web發展的技術並非靜止不動的，這些技術幾乎天天都在變化，若是沒有快速學習能力，你就跟不上Web發展的步伐。你必須不斷提高本身，不斷學習新技術、新模式；僅僅依靠今天的知識沒法適應將來。Web的明天與今天必將有天壤之別，而你的工做就是要搞清楚如何經過本身的Web應用程序來體現這種翻天覆地的變化。

四：前端開發知識結構

前端工程師
- 瀏覽器
  - IE6/7/8/9/10
  - Firefox
  - Chrome/Safari/Opera
- 編程語言
  - JavaScript/Node.js
  - CoffeeScript
  - TypeScript
- 切頁面
  - HTML/HTML5
  - CSS/CSS3
  - PhotoShop/Paint.net/Fireworks
- 開發工具
  - IDE
    - VIM/Sublime Text2
    - Notepad++/EditPlus
    - WebStorm
    - Emacs EmacsWiki
  - 調試工具
    - Firebug/Firecookie
    - YSlow
    - IEDeveloperToolbar/IETester
    - Fiddler
    - Chrome Dev Tools
  - 版本管理
    - Git/SVN
    - Github/Bitbucket/Google Code
- 代碼質量
  - Coding style
    - JSLint/JSHint
    - CSSLint
    - Markup Validation Service
  - 單元測試
    - QUnit/Jasmine
    - Mocha/Should/Chai/Expect
  - 自動化測試
    - WebDriver
- 前端庫/框架
  - jQuery/Underscore/Mootools/Prototype.js
  - YUI3/Dojo/ExtJS
  - Backbone/KnockoutJS/Emberjs
  - AngularJS
  - Bootstrap
- 前端標準/規範
  - HTTP1.1
  - ECMAScript3/5
  - W3C/DOM/BOM/XHTML/XML/JSON/JSONP
  - CommonJS Modules/AMD
  - HTML5/CSS3
- 性能
  - JSPerf
  - YSlow 35 rules
  - PageSpeed
  - HTTPWatch
  - DynaTrace’s Ajax
  - 高性能JavaScript
- 編程知識儲備
  - 數據結構
  - OOP/AOP
  - 原型鏈/做用域鏈
  - 閉包
  - 函數式編程
  - 設計模式
  - Javascript Tips
- 部署流程
  - 壓縮合並
    - YUI Compressor
    - Google Clousure Complier
    - UglifyJS
    - CleanCSS
  - 文檔輸出
    - JSDoc
    - Dox/Doxmate
  - 項目構建工具
    - make/Ant
    - GYP
    - Grunt
    - Yeoman
- 代碼組織
  - 類庫模塊化
    - CommonJS/AMD
    - YUI3模塊
  - 業務邏輯模塊化
    - bower/component
  - 文件加載
    - LABjs
    - SeaJS/Require.js
  - 模塊化預處理器
    - Browserify
- 安全
  - CSRF/XSS
  - ADsafe/Caja/Sandbox
- 移動Web
  - HTML5/CSS3
  - 響應式設計
  - Zeptojs/iScroll
  - V5/Sencha Touch
  - PhoneGap
  - jQuery Mobile
- 前沿技術社區/會議
  - D2/WebRebuild
  - NodeParty/W3CTech/HTML5夢工廠
  - JSConf/滬JS(JSConf.cn)
  - QCon/Velocity/SDCC
  - JSConf/NodeConf
  - CSSConf
  - YDN/YUIConf
- 計算機知識儲備
  - 編譯原理
  - 計算機網絡
  - 操做系統
  - 算法原理
  - 軟件工程/軟件測試原理
- 軟技能
  - 知識管理/總結分享
  - 溝通技巧/團隊協做
  - 需求管理/PM
  - 交互設計/可用性/可訪問性知識
- 可視化
  - SVG/Canvas/VML
  - D3/Raphaël/DataV
後端工程師
- 編程語言
  - C/C++/Java/PHP/Ruby/Python/…
- 服務器
  - Nginx
  - Apache
- 數據庫
  - SQL
  - MySQL/PostgreSQL/Oracle
  - MongoDB/CouchDB
- 數據緩存
  - Redis
  - Memcached
- 文件緩存/代理
  - Varnish
  - Squid
- 操做系統
  - Unix/Linux/OS X/Windows
- 數據結構