筆者介紹：13級畢業生，目前畢業一年，前就職地點北京，任職一年。前端小菜鳥吧，前一家公司是個創業小公司，畢業時做的是python 后端開發，由于前端人員緊張，后來主要參與前端頁面開發。才發現自己愛上了這種直面用戶的設計型程序工作，理工與設計相結合吧。
目前技術能力：后端python 使用過flask做web容器，前端之前主要負責頁面邏輯實現，所以css和html比較弱項，js有看過JS高程三，有學習過js面向對象編程相關學習視頻。上一個公司項目主要做數據可視化，所以百度出的echarts使用比較多。整體框架使用過MVVC模式的vue.js，源碼沒有看過。其他相關技能如：數據庫，git操作等
不驕不躁吧，一步一個腳印，趁這段時間好好總結，好好沉淀
好,廢話不多說，進入正題吧
前端面試之1---職位要求分析
這是崗位職責：
- 1、使用 HTML/CSS/JavaScript/AJAX 等各種 Web 技術進行移動端、PC端界面開發；
- 2、整體頁面結構及樣式層結構的設計、優化；
- 3、在團隊的代碼格式、結構的規定下，編寫易讀、易維護、高質量、高效率的代碼；
- 4、具有良好的溝通能力、團隊配合精神，對新技術敏感。
這是任職要求：
- 1、兩年以上專職Javascript開發經驗，有微信公眾號開發經驗優先考慮；
- 2、熟悉 angularjs 、react、vue其中一種
- 3、熟練運用CSS3新特性，熟悉HTML5最新規范；
- 4、能夠熟練運用HTML5特性構建移動端的WebApp；
- 5、熟悉less/sass、es6語法；
- 6、熟悉常用的構建工具（包括gulp或webpack）；
- 7、熟悉常用的包管理器（包括bower或npm）
- 8、熟悉微信公眾號h5開發；
- 9、開發速度快、抗壓能力強，可應對較大的工作壓力；
崗位職責：
- 1 使用HTML，CSS，Javascript ，Ajax等各種Web技術進行移動端，PC端界面開發
常見WEB要求，進行界面開發，WEB前端工作者必須的技能，html頁面結構，css頁面樣式表，js頁面邏輯實現交互，ajax異步加載渲染。知識點：移動端，PC端。雙端開發：主要要考慮到PC端和移動端開發的區別，主要考慮的方面有：兼容性，網速，適配，頁面布局等方面的不同。
兼容性
PC端考慮的是瀏覽器的兼容性，而移動端開發考慮的更多考慮的是手機兼容性，原因：目前移動端瀏覽器基本都是使用webkit內核，而且在手機端瀏覽器基本會更新為最新版本，不會存在過舊的瀏覽器版本。主要需要考慮的是手機分辨率的適配和操作系統的略微差異事件
移動端和PC端的差異還表現在事件方面，例如移動端會多出來觸屏事件，缺少hover事件。另外移動端包括會有一些彈出手機鍵盤等移動端瀏覽器調用的事件，這些問題PC端是沒有的布局
移動端開發一般會針對不同分辨率做到布局自適應。（之前沒有做過移動端開發，這些解決辦法不是很清楚）動畫處理
PC端一般由于要考慮到兼容性會使用JS做動畫，但是移動端一般使用CSS3移動端的一些接口
移動端一般會用到一些聯動的接口，例如微信，例如位置信息等，移動端的應用一般會用到一些交互功能，而pc端一般沒有這些操作。移動端對JS資源或者插件流量優化
PC端考慮性能一般在加載速度和頁面響應時間，而移動端還可能在流量方面有所考慮，一般插件或者資源能小則小，所以PC端一般使用juery，移動端用zepto一些前端開發架構，性能優化，首屏打開時間，動畫幀率等
- 2 整體頁面結構及樣式層結構的設計、優化；
由于之前布局結構設計不是由我主要負責，所以這一塊技巧有點空缺。不過基本的盒模型和彈性布局還是有了解。之前項目中主要使用到的解決辦法是：Bootstrap的柵欄扁平化設計。col-md,col-sm針對列的柵欄化，VUE.js的第三方UI庫的element和iview等也有這種柵欄設計，使用這類設計能夠快速的完成頁面布局和結構設計
- 3 在團隊的代碼格式、結構的規定下，編寫易讀、易維護、高質量、高效率的代碼；
這就是基本的程序員素養問題。易讀易維護的高效率代碼是每個程序員追求的代碼之道。主要體現在，代碼的結構性，可讀性，代碼的效率性等。
- 4 具有良好的溝通能力、團隊配合精神，對新技術敏感。
程序員這個行業，自己一年的工作經驗看來，說苦逼吧，也苦逼，說還行吧，也還行。享受著社會較高的教育資源和較為舒適的工作環境和氛圍。但是依然是勞動創造價值，靠自己的勞動成本換取高額的薪酬，或者說透支自己的未來時間來獲得今日的高薪。程序員要一直保持一顆學無止境的心態這個基本每個程序員都會知道我就不用多說了。我也是個小菜鳥/
任職要求分析（知識點，敲黑板記好，哈哈）：
- 1、兩年以上專職Javascript開發經驗，有微信公眾號開發經驗優先考慮；
- 之前沒有做過小程序開發，但是聽說美團最近新出的mpvue是一套快速開發小程序的框架，同時語法和vue.js是一樣的，只需要使用vue.js的開發規范，并且支持轉換為H5熟悉VUE.js即可使用。之前有過vue.js使用經驗，之后再補充一下，應該可以的。
- 2、熟悉 angularjs 、react、vue其中一種
- 上一個項目有使用vue.js開發重構項目。數據雙向綁定，以數據驅動，并且頁面組件化，對于上一個項目那種數據可視化單頁面應用簡直不能太合適。MVVC設計模式-Model，View，View-Controller。view即為視圖層，表現為所有的DOM元素，Model層為模型，即相關業務邏輯的數據對象，聰數據庫映射而來。而vm（ViewModel）層就是與界面對應的model，把model數據對象封裝和關聯上界面View，并且實現綁定，視同會根據數據對象的改變而改變，而數據對象也會因為視圖操作而改變。視圖View與Model進行綁定是通過DataBinding監聽model層數據，Model與View層綁定是通過DOMListenner監聽頁面元素的變化。這樣做的好處是：數據驅動，自動計算屬性和追蹤依賴的模板表達式。同時VUE.js支持組件化開發，將可復用的頁面元素封裝成組件，只需要在使用的頁面中用es6的語法將其注冊并且聲明即可直接使用自定義標簽。
- 3、熟練運用CSS3新特性，熟悉HTML5最新規范；
- HTML5新增特性：
- 1 更多語義化標簽，header，footer，aside，mark等
- 2 Canvas畫布，用過JavaScript來完成圖形繪制
- 3 HTML拖放，draggable屬性，設置為true，會有一些拖放的事件鉤子，比如OnDragstart，SetData還有OnDragover等
- 4 HTML地理定位API，用于獲取用戶的地理位置
- 5 HTML允許嵌入音頻元素，audio，vdieo標簽
- 6 HTML新增更多的表單輸入類型，這些新特性提供了更好的輸入控制和驗證
- 7 HTML Web存儲 HTML5提供了一個能夠代替cookie的Javascript解決方案，sessionStorage和localStorage.
區別是：SessionStorage是針對一個Session進行數據存儲，當用戶關閉瀏覽器窗口i之后數據會被刪除LocalStorage對象存儲的數據沒有時間限制兩種存儲模式均為客戶端數據存儲方式- 8 HTML提供了新的離線Web應用。由于引入了應用程序緩存，這意味著Web應用可以進行緩存，并可在沒有因特網鏈接是進行訪問，三大優勢
- 1離線瀏覽-用戶可在應用離線時使用它們
- 2 速度-已緩存的資源會直接請求本地資源，獲得更快的資源加載速度
- 3 減少服務器負載-瀏覽器將只從服務器下載更新過或者更改過的資源
- 9 HTML5 Web Worker
當在HTML頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。web worker是運行在后臺的JavaScript，獨立于其他腳本，不會影響頁面的性能，可以繼續做其他的交互相應，實現多線程并發- 10 HTML5 WebSocket
WebSocket是HTML5開始提供的一種在單個TCP連接上進行全雙工通訊的協議，在web socket API中，瀏覽器和服務器只需要做一個握手動作，然后瀏覽器和服務器之間就形成了一條快速通道，兩只直接就可以直接進行數據相互傳送。瀏覽器通過JavaScript向服務器發出尖利WebSockt連接的請求，連接請求建立之后，客戶端和服務器端就可以通過tcp連接直接進行數據交換。
- CSS3新特性
- css3選擇器
- css3邊框樣式
- css3背景
- css3漸變
- css3文本效果
- css3字體
- css3轉換和變形
- css3 3D轉換屬性
- css3過度
- css3動畫（暫未使用過）
- css3多列
- css3盒模型
- css3彈性布局
- css3多媒體查詢
- 4、能夠熟練運用HTML5特性構建移動端的WebApp；
- 之前沒有過web App項目經驗=-=，需要再補充。只能再這里補充一下網上找到的相關概念吧。web app指的是：使用HTML5編寫的移動web應用，由于可以運行在多端，所以一套代碼到處運行，減少了開發成本。不過vue.js也適合再移動端開發，首先vue.js有易用的過度系統效果，vue.js可以快速的復用已有的組件，vue.js有豐富的第三方UI框架，并且有有做自適應樣式。app開發過程中只需要關注app的數據走向
- 5、熟悉less/sass、es6語法；
- Less is More
Less是基于Javascript的客戶端CSS plus 需要特定的工具將Less編譯為CSS才能夠解析。主要是在CSS的基礎上增加變量，Mixin（混入）運算一級函數功能等功能，目的是為了方便css的維護成本和編寫成本
而Sass是基于Ruby的服務器端CSS擴充。是最早也是最成熟的CSS預處理語言，可以使用變量常量嵌套混入函數等功能。并且整體來說sass功能更強大一些。
同時Bootstrap就是基于Less語法編寫
- 6、熟悉常用的構建工具（包括gulp或webpack）；
- 為什么使用WebPack
- 由于現在網頁功能越發豐富，擁有復雜的JavaScript和一大堆依賴包，于是就有了很多常用的構建工具。比如webpack，他可以實現以下功能：
- 1 模塊化 把復雜的程序細化為小的未見
- 2 類似TypeScript，Less這種在JavaScript上拓展的開發語言，能夠提前調用工具實現預編譯和轉換
- webpack的工作方式是把Web項目整個看作一個整體，通過給定主文件，例如Index.js，webpack將從這個主文件作為入口開始找到項目所有的依賴文件，最后打包成一個或者多個瀏覽器可以識別的Javascript文件，相比gulp webpack的處理速度更快耿直饑餓，能打包更多不同類型的文件。
- webpack的使用方式。
使用npm進行安裝，并且使用webpack構建項目，通過配置文件進行配置修改，
。。。等等詳細的需要另起一篇文章介紹了
- 7、熟悉常用的包管理器（包括bower或npm）
之前項目有使用過npm作為包管理器，實現一些前端依賴包的安裝和管理，npm install，并且可以寫一些簡單的npm腳本，批量安裝或者什么的 - 8、熟悉微信公眾號h5開發；
- 其實之前并沒有什么微信公眾號相關開發經驗，之后再補充
- 9、開發速度快、抗壓能力強，可應對較大的工作壓力；
- 這種情況在面試的時候很有可能發生。如果參加的是壓力面，面試官的問題會非常尖銳、尖刻，即使你回答得很好，也會被他說得啞口無言，無力辯駁。其實這個時候面試官不是看你回答得好或壞，是看你承受壓力的能力，所以對這種情況，你一定要以積極、健康、樂觀的心態面對，千萬不要驚慌失措，語無倫次，微笑著看著面試官，再說些個人有個人的看法之類的話，顯得自己并沒有很緊張，很從容的樣子。 如果是一般的面試被面試官問倒了，自己一時無法回答，可以直接跟面試官說：給我5秒鐘時間想想，然后再做回答，如果實在不知道怎么回答得，只有老實一點了，說不會，或者說現在暫時沒有想到合適的答案。特別是問的是技術性方面的問題，不會就不會，沒有關系的，瞎扯也扯不出什么來，反而給面試官留下不誠實的印象。 希望我的意見能對你有用！
