【小前端的自我修養(yǎng)】這系列文章記錄的摹量,是一個小前端的成長經(jīng)驗勃痴,會不定時的更新修正季春。
對剛入前端門檻的前端童鞋們或許會有用洗搂,經(jīng)驗和姿勢豐富的老司機可以路過。
本文主要是走馬觀花地介紹一下一個前端工程師會接觸的到東西载弄,以后會慢慢展開耘拇。
前端工程師的日常?
- 切圖:將設計稿根據(jù)頁面功能提取出各種需要的圖片宇攻、圖標惫叛。
- 頁面編寫:html+css頁面編寫。
- JavaScript編寫:實現(xiàn)各種頁面動態(tài)交互效果逞刷。
- 兼容性調(diào)試:這占前端工程師的很大一部分時間嘉涌。
- 性能優(yōu)化:合并、壓縮夸浅、CDN等……仑最。
- 用戶體驗優(yōu)化。
- 新技術調(diào)研帆喇。
- node.js后端編寫警医。
- App開發(fā):混合應用。
前端發(fā)展過程中坯钦,涉及那些知識和概念预皇?
HTML+CSS+JS: 前端最基礎的東西。
EDM郵件營銷:發(fā)送的營銷郵件使用html編寫婉刀,是郵件更賞心悅目吟温。
語義化 :良好的編碼習慣,便于閱讀和搜索引擎SEO路星。
SEO:搜索引擎優(yōu)化溯街。
WAI-ARIA無障礙:通過特定的標簽诱桂,使網(wǎng)頁便于讀屏軟件閱讀,方便視力有障礙的人使用呈昔。
CSS Sprites:將多個小圖標合并為一張大圖挥等,減少請求數(shù)。
HTML5
CSS3
響應式:是網(wǎng)站在各種寬度的屏幕小都能良好展示堤尾。
CDN肝劲。
IconFont: 使用矢量字體代替圖標,相應的工具有阿里巴巴圖標郭宝、icomoon辞槐、Font Awesome等……
MVC粘室、MVVM榄檬、MVP。
WEBP: 谷歌(google)開發(fā)的一種旨在加快圖片加載速度的圖片格式,WebP 探尋之路衔统。
Retina: 在分辨率極高的設備中鹿榜,讓網(wǎng)頁能很好的展示。相關文章: 走向視網(wǎng)膜(Retina)的Web時代锦爵。
SPA:單頁Web應用(single page web application舱殿,SPA),就是只有一張Web頁面的應用险掀,是加載單個HTML 頁面并在用戶與應用程序交互時動態(tài)更新該頁面的Web應用程序沪袭。
Hybrid:Hybrid App(混合模式移動應用)是指介于web-app、native-app這兩者之間的app樟氢,兼具“Native App良好用戶交互體驗的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”冈绊。類似工具有:PhoneGap, Ionic。
預處理埠啃。緊接著出現(xiàn)各種預處理語言焚碌,包括用來編譯為css 的less,用來編譯為html的jade霸妹,用來便以為js的coffee script 等等……
模塊化。最為火熱的是requireJS, Sea.js. 以及相應的AMD規(guī)范, CMD規(guī)范, 以及對應得運行于node端的CommonJS規(guī)范知押。
前端組件化叹螟。所謂的組件化,值得是把一個比較獨立的功能模塊的css台盯、js罢绽、html還有圖片等等相關的資源獨立出來,以達到復用的目的静盅。
前端工程化良价。所謂前端工程化寝殴,就是借助工具,管理你的所有前端資源明垢,你可以使用各種預處理語音蚣常,模塊化工具,最后通過工程化工具將他們打包痊银、壓縮(當然不止這些功能)等抵蚊。簡單列舉幾個使用比較廣的:grunt, gulp, webpack, FIS。
混合應用(Hybrid App)溯革。所謂混合應用贞绳,就是用前端語言編寫,然后通過相關工具比如phonegap等打包成App應用致稀「员眨混合應用的好處就是可以一套代碼直接打包到多個平臺(Android、IOS)抖单,開發(fā)成本和效率相對較高萎攒。缺點是運行在webview中,性能和體驗比原生應用差臭猜,而且不是每一個原生應用有的功能它都能實現(xiàn)躺酒。
W3C:萬維網(wǎng)聯(lián)盟(外語縮寫:W3C)標準不是某一個標準,而是一系列標準的集合蔑歌。
ECMAScript:Javascript規(guī)范羹应。
DOM。
BOM次屠。