前端工程師技能整理

来源:http://www.cnblogs.com/wintersun/archive/2016/05/31/5547781.html
-Advertisement-
Play Games

前端工程師技能整理 一、框架與組件 bootstrap等UI框架設計與實現 伸縮佈局：grid網格佈局 基礎UI樣式：元素reset、按鈕、圖片、菜單、表單 組件UI樣式：按鈕組、字體圖標、下拉菜單、輸入框組、導航組、麵包屑、分頁、標簽、輪播、彈出框、列表、多媒體、警告 響應式佈局：佈局、結構、樣式... ...


前端工程師技能整理

一、框架與組件

bootstrap等UI框架設計與實現

  • 伸縮佈局：grid網格佈局

  • 基礎UI樣式：元素reset、按鈕、圖片、菜單、表單

  • 組件UI樣式：按鈕組、字體圖標、下拉菜單、輸入框組、導航組、麵包屑、分頁、標簽、輪播、彈出框、列表、多媒體、警告

  • 響應式佈局：佈局、結構、樣式、媒體、javascript響應式

  • 第三方插件：插件管理

jQuery、zepto使用原理以及插件開發

  • 支持amd、cmd、全局變數的模塊化封裝

  • $.fn.method = function(){}

mvc/mvvm框架原理設計，vue/angular/avalon等

  • directive設計：html、text、class、html、attr、repeat、ref，可擴展

  • filter設計：bool、upperCase、lowerCase，可擴展

  • 表達式設計：if-else等實現

  • viewmodel結構設計：例如數據，元素，方法的掛載與作用域

  • 數據更變檢測：函數觸發，臟數據檢測、對象hijacking

polymer/angular2思想與設計思路

  • import技術

  • template和script引入方式

  • css樣式命名空間隔離

  • 簡單復用第三方庫

reactjs原理與使用

  • virtual dom單向數據綁定

  • js執行語法方式

  • UI由狀態控制

commonJS/AMD/CMD

  • 模塊引入

  • 模塊定義

  • 模塊標識

  • UMD解決不同規範相容性的問題，例如webpack封裝

  • 模塊懶執行(CMD)與與預執行(AMD)

loadJs模塊化載入原理與實現

  • 創建script標簽，需要id映射到資源url

  • onload載入模塊隊列判斷

  • 全部載入完成後觸發

  • 載入失敗問題優化

  • requirejs、modjs、seajs

polyfill、shim原理與實現

  • polyfill提供了開發者們希望瀏覽器原生提供支持的功能特性

  • shim將新的API引入到舊的環境中,且僅靠舊環境中已有的手段實現

virtual Dom、Incremental DOM

  • 1.用js對象樹表示dom樹結構，根據該對象樹構建dom樹

  • 2.狀態改變時，重新構建對象，和舊的對象對比，記錄兩個對象樹差異

  • 3.將對象樹差異應用到dom中

  • 小結:js對象模擬dom(elem.js)，virtual dom diff演算法(diff.js)、差異渲染dom(patch.js)

  • incremental dom在狀態改變時掃描舊對象樹將差異直接應用到dom中

shadow dom

  • 隔離外部環境用於封裝組件：結構、樣式、行為

  • 實現形式：新標簽、class類屬性 + 構建編譯

webwork與service Worker

  • webwork與主線程機制，on/post

  • serviceworker可作為瀏覽器請求代理

  • 應用場景

ES6轉ES5、Babel與ES6開發規範體系

  • ES6編碼規範全

  • ES6在babel下相容性

  • ES6在node下相容性與性能

  • ES6新特性：看編碼規範

  • aurelia ES6前端框架

Isomorphic JavaScript

  • 同構原理

  • 同構方案 Rendr

  • nodejs: 伺服器

  • hapi: 應用服務

  • backbone.js: 後臺mvc

  • requirejs: 模塊載入

  • jquery: dom處理

  • reactjs同構:React + Flux + Koa

雙向數據綁定

  • 函數觸發:vuejs

  • 臟數據檢測:angular

  • 對象hijacking:avalon

browserify運行原理

  • 1.從入口模塊開始分析require函數調用

  • 2.根據依賴生成AST

  • 3.根據AST找到每個模塊的模塊名

  • 4.得到每個模塊的依賴關係，生成一個依賴字典

  • 5.包裝每個模塊（傳入依賴字典以及export和require函數），生成執行的js

performance timing

  • performance timing api

  • performance timing 過程

  • performance timing 性能計算

  • performanceTrace庫

組件UI與js組件規範化

  • 組件編碼規範

  • 組件目錄規範：組件目錄與公用目錄

  • 組件構建規範：構建環境支持

  • 組件模塊化管理：spm，bowserify

  • 組件復用性管理

  • 第三方組件接入成本

immutable JavaScript
generator與promise原理與使用

二、構建生態

grunt/gulp開發環境任務編寫

  • 文件處理插件：html、scss、js、image、font、其它

  • 優化插件：雪碧圖、圖片壓縮、iconfont構建

  • 發佈替換插件

  • 打包、壓縮包插件：組件自動分析

  • 白名單配置

  • 自定義插件編寫

npm、jspm、bower包管理工具
r.js、browserify、webpack、Rollup打包工具使用

  • 原理：根據依賴配置文件對文件進行依賴打包

  • webpack支持更多的規範打包，AMD,Commonjs

  • webpack+babel/reactjs+reflux

fis3構建與插件開發、構建環境、fis3構建離線包
web Component：rosetta-org、x-view、Q、riot、nova
brunch構建工具

三、開發技巧與調試

fiddler加willow基礎組合調試

  • 常見配置與分析

  • 結合瀏覽器調試

werien、vorlonjs遠程調試，chrome inspect
mockjs，F.M.S(Front Mock Server)模擬調試使用與cgi自動調試
macha/phantomjs/casperjs/karma測試自動化任務使用
自動化UI測試，海豚
node-supervior、node-inspector、karma
開發發佈系統流程
sublime高效插件
  • emmet工具使用、 sublimelinter、 babel snippets、 sublimeLint、 SassBeautify 、 emmet 快速編輯、 jsxlint、 SideBarEnhancements、 SnippetsMaker、 SublimeCodeIntel、 css snippets、 ColorPicker、 html/css/js Pretty、 SpinnetMacker、 DocBlockr、 MultiEditUtils、 javascript & node spinnet、 JavaScript & NodeJS Snippets、 jsLint、cssLint
代碼自動化檢查fecs

四、html、css與重構

jpeg、webp、apng、bpg圖片

  • 編碼原理

  • 特點與優劣勢

  • 適用場景

iconfont使用與實現原理

  • 自動打包構建方法

  • iconfont相容性寫法

  • fonthello、fontawesome、icomoon.io、iconfont.cn線上工具

頁面響應式設計

  • layout佈局響應式

  • html結構響應式

  • css樣式響應式

  • image媒體響應式

  • javascript響應式

  • media query與平臺判斷

css重置

  • reset

  • nomalize

  • neat

sass/compass/less/postcss常用語法與使用

  • 常用語法功能

  • 組件化UI設計管理

  • 構建工具實現方案

  • 雪碧圖自動合成

  • iconfont自動接入等等

media query與常見頁面尺寸瞭解

  • 媒體類型引入和媒體特性引入

  • device-width適應

  • retina屏幕適應

em,rem原理與實現

  • rem計算：width*retina/10，相當於屏幕寬度為10rem

  • 字體在rem情況下仍然使用px

code4ui、code4app、初頁、maka等

  • 前端dom操作即使刷新前端頁面

  • 根據dom操作生成組件config配置保存到db

  • 根據config配置使用r.js或webpack打包

  • 發佈打包後輸出文件

css3動畫
css網格佈局

  • susy

  • Responsive Grid System

  • Fluid 960 Grid(adaptjs)

  • Simple Grid

搜索引擎與前端SEO

  • tdk優化

  • 頁面內容優化

  • 唯一的H1標題

  • img設置alt屬性

  • nofollow

  • url優化

  • 統一鏈接

  • 301跳轉

  • canonical

  • robot優化

  • robots.txt

  • meta robots

  • sitemap

  • SEO工具

  • 各種站長工具等

瀏覽器緩存種類，resources,webSQL,indexDB, localstorage,cookie,app cache,cache storage
  • store.js、cookie.js
UI框架

  • bootstrap、jqwidgets、semantic ui、amaze ui

  • 微信手Q ui: frozenui、weui、blend ui

  • extjs、echart圖表ui

五、native/hybrid/桌面開發

ionic移動開發方案

  • 運行架構

  • hybrid混合開發

  • cordova交互

  • 離線包更新

  • 性能瓶頸

nativescript移動開發方案
react Native移動開發方案

  • 運行架構：js引擎

  • 性能缺陷與記憶體泄露

  • 更新機制

  • 使用場景

android/ios原生開發與框架

  • java

  • oc、swift

  • web與native交互

  • 屏幕旋轉

  • 搖一搖

  • 錄像，拍照，選取本地圖片

  • 打電話，發簡訊

  • 電池電量

  • 地理位置

  • 日期選擇

  • 開啟硬體加速

桌面應用開發

  • nodewebkit

  • atom-shell(後改名為electron)

  • 網易Hex

  • pomelo(游戲伺服器框架)

  • react desktop

  • appjs:appjs.com

六、前端/H5優化(另一個圖已給出)

yslow、pagespeed
移動web性能優化

  • 手機瀏覽器"省流量"原理

  • 增量更新原理及註意事項

  • 本地存儲的應用

  • 載入優化

  • 圖片優化

  • 單頁面及路由實現

  • 業內著名站點案例分析

七、全棧/全端開發

express/node club + mongodb、thinkjs等框架
node.js直出
實時web開發，meteor/express.io
MEAN(mongodb/express/angular/nodejs)
http與http2協議、bigpipe、pipeline
離線緩存，cookie、localstorage、indexdb
cdn與dns

  • 動態功能變數名稱加速

  • cdn原理與cdn combo

八、研究實驗

WebAssembly、webTRC、typescript
Material design規範的前端框架
  • 交互動效庫
AMP-HTML規範

  • 使用受限HTML以及緩存技術來提高移動網路中靜態內容的性能

  • 添加自定義的元素代替禁用掉的元素：amp-audio, amp-img、amp-video等

九、數據分析與監控

badjs數據上報

  • 捕獲錯誤兩種方法：onerror、try-catch。抽樣上報，先onerror統計語法錯誤，如果是script error，再使用tryjs。

  • 後臺統計方法、不同業務接入體系、抽樣統計

  • onerror:可以捕捉語法錯誤和運行時錯誤；可以拿到出錯的信息，堆棧，出錯文件、行號、列號；當前頁面執行的js腳本出錯都會捕捉到；跨域的資源需要特殊頭部支持。

  • try-catch:無法捕捉語法錯誤，只能捕捉運行時錯誤；可以拿到出錯的信息，堆棧，出錯文件、行號、列號；需要藉助工具把function塊以及文件塊加入try,catch，可以在這個階段打入更多的靜態信息。

點擊熱力圖clickHeat、heatMap
js載入失敗優化方案

  • 失敗重發機制

  • 載入源功能變數名稱伺服器文件

  • https反劫持

百度alog數據上報

十、其它軟技能

axure 原型圖設計
xmind腦圖管理
效率管理
can i use、github
知識管理/總結分享
產品思維與技能

十一、前端技術網站

技術社區

  • w3c tech、w3c plus、w3 help

  • div.io、nodeParty

  • 稀土掘金、前端早讀課

  • alloyteam、html5基地

  • W3 help

行業會議

  • segmentfault會議

  • 深js、杭js

  • GMIC(全球移動互聯網大會)

  • D2、webrebuild

  • infoQ內容、Qcon、velocity

 

今天先到這兒,部分內容來自網路, 希望對您有參考作用, 您可能感興趣的文章:
構建高效的研發與自動化運維
某大型電商雲平臺實踐
互聯網資料庫架構設計思路
IT基礎架構規劃方案一(網路系統規劃)
餐飲行業解決方案之客戶分析流程
餐飲行業解決方案之採購戰略制定與實施流程
餐飲行業解決方案之業務設計流程
供應鏈需求調研CheckList
企業應用之性能實時度量系統演變

如有想瞭解更多軟體設計與架構,系統 IT,企業信息化 資訊，請關註我的微信訂閱號：

MegadotnetMicroMsg_thumb1_thumb1_thu[2]


作者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
該文章也同時發佈在我的獨立博客中-Petter Liu Blog。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 決策樹與規則引擎
    人們對決策樹的使用 決策樹常常被應用於數據挖掘之中，是最基礎的演算法之一，幾乎每一個學習過數據挖掘的朋友都知道決策樹。但還原決策樹本來的用途，它被用於一些決策或決定時，還是比較實用和直觀的。其樹型結構指導人們進行在面對某個決策時，先關註其中幾個最重要的方向，這幾方向定下來後，再細分下去。近年來泳道路， ...
  • NX的文件上傳實例
    公司產品中一直是採用 flash 實現文件上傳功能，但用戶的需求多了以後遇到了越來越多難以解決的問題，最後試著用碩正提供的freeform、小型頁面控制項來解決。 碩正文件上傳的實現途徑有3、4種，由於公司產品發佈的需要，就選擇了其中的 httpPost 方案，其它的象 ftp、Http put儘管也 ...
  • 關於release和debug的區別
    MSDN中的描述： Visual Studio 項目對程式的發佈和調試版本分別有單獨的配置。顧名思義，生成調試版本的目的是用於調試，而生成發佈版本的目的是用於版本的最終分發。 如果在 Visual Studio 中創建程式，Visual Studio 將自動創建這些配置並設置適當的預設選項和其他設置 ...
  • 小酌重構系列[24]——封裝集合
    概述 當方法返回類型或屬性類型為集合時，有些開發者會千篇一律地使用IList集合。然而IList具有集合的所有操作，這意味著調用者不僅可以讀取集合信息，還能夠修改集合。業務需求本來只是為調用者提供一個可讀的集合，例如數據的查詢和展示，但當方法返回IList時，無疑隱式地開放了集合可寫的許可權。此時，我... ...
  • iOS常用的幾種數據存儲方式
    之前由於剛入行不久，對數據持久化不是很瞭解，尤其是用資料庫存儲大量數據的操作。經過摸索就在此總結一下，方便以後查閱 下麵就簡單介紹一下： 1.NSUserDefaults 感覺最常用的小量數據，屬性，例如，賬號，密碼之類的；適合存儲輕量級的本地數據 (個人認為這種比較簡單) NSUserDefaul ...
  • 【C#進階系列】30 學習總結
    前面學起來還是很順的，畢竟很多都接觸過。 後面學起來只能用“磨”來形容，以至於八章用了2個月。（當然也有相當一些原因是這兩個月中發生了一些個人生活上的問題） 總的來說收穫超大，這種感覺就像大一的時候學習老譚的C語言一樣，醍醐灌頂。 如果是靠.NET吃飯的人，不讀這本書真的是太可惜了。 不過這中間也出 ...
  • 【C#進階系列】29 混合線程同步構造
    上一章講了基元線程同步構造，而其它的線程同步構造都是基於這些基元線程同步構造的，並且一般都合併了用戶模式和內核模式構造，我們稱之為混合線程同步構造。 在沒有線程競爭時，混合線程提供了基於用戶模式構造所具備的性能優勢，而多個線程競爭一個構造時，混合線程通過基元內核模式的構造來提供不“自旋”的優勢。 那 ...
  • 任意進位轉換演算法
    N年沒有寫博客，發個進位轉換的玩下，支持負數；功能屬於簡化版的 Convert.ToInt32 ，特點是： 1、任意位，如：0，1（二進位），0...7（八進位），0...9,A...F（16進位），0...N（N進位），或者是：!@#$%^&*（8進位，字元符號），也可以是中文。 2、8 byte ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類