前端技能圖譜（草稿）

  • 基礎

    • HTML / CSS

    • JavaScript

    • Node.js

    • 正規表達式

    • 數據格式（如JSON、XML）

    • RESTful API交互（如jQuery Ajax，Fetch API，ReactiveX）

    • 命令行

  • 中級

    • ES6 / CoffeScript / TypeScript

    • SCSS / SASS

    • CSS3

    • HTML語義化

    • 面向對象編程

    • 函數式編程

    • MVC / MVVM / MV*

    • 矢量圖形 / 矢量圖形動畫（如SVG）

    • 單頁面應用

    • 安全性（如跨域）

    • 授權（如HTTP Basic、JWT等等）

  • 工程化

    • 代碼質量（如JSLint / ESLint / TSLint / CSLint）

    • 代碼分析（如Code Climate）

    • 測試覆蓋率

    • 構建系統（gulp、grunt、webpack等等）

      Advertisements

    • 自動構建（腳本）

  • 兼容性

    • 跨瀏覽器測試 （Chrome，IE，Firefox，Safari等等）

    • 跨平台測試（Windows、GNU/Linux，Mac OS等等）

    • 跨設備測試（Desktop，Android，iOS，Windows Phone）

    • 跨版本測試（同一個瀏覽器的不同版本）

  • 前端特定

    • CSS / CSS3 動畫

    • JavaScript 動畫

    • Web字體嵌入

    • Icon 字體

    • 圖形和圖表

    • CSS Sprite（如glue）

    • DOM操作（如jQuery、React等等）

    • 模板引擎（如JSX、Handlebars、JSP、Mustache等等）

  • 軟體工程

    • 版本管理（如git、svn）

    • 包管理（如npm、bower）

    • 依賴管理

    • 模塊化（如CommonJS、WebPack）

      Advertisements

  • 調試

    • 瀏覽器調試

    • Debug工具

    • Wireshark / Charles抓包

    • 遠程設備調試（如Chrome Inspect Devices）

  • 測試

    • 單元測試

    • 服務測試

    • UI測試

    • 集成測試

  • 性能與優化

    • PageSpeed / Yslow 優化

    • 載入優化（如gzip壓縮、緩存等等）

    • 性能測試（特別是移動Web）

    • 可用性

    • 壓縮（如Minify、Uglify、CleanCSS等等）

  • 設計

    • 切頁面

    • 線框圖（Wireframe）

    • 響應式設計

    • 網格布局（Grid Layout）

    • Flexbox布局

  • SEO

    • Sitemap（站點地圖）

    • 內部鏈接建設

    • MicroData / MicroFormat

    • 頁面靜態內容生成

詳細內容，請期待Growth 2.0哈，Android用戶可以從 http://fir.im/growth2 下載最新預覽版。

Advertisements

你可能會喜歡

Advertisements