筆者介紹：13級畢業(yè)生铃辖，目前畢業(yè)一年剩愧，前就職地點北京，任職一年娇斩。前端小菜鳥吧仁卷，前一家公司是個創(chuàng)業(yè)小公司，畢業(yè)時做的是python 后端開發(fā)犬第，由于前端人員緊張锦积，后來主要參與前端頁面開發(fā)。才發(fā)現(xiàn)自己愛上了這種直面用戶的設計型程序工作歉嗓，理工與設計相結(jié)合吧丰介。
目前技術能力：后端python 使用過flask做web容器，前端之前主要負責頁面邏輯實現(xiàn)鉴分，所以css和html比較弱項哮幢，js有看過JS高程三，有學習過js面向?qū)ο缶幊滔嚓P學習視頻志珍。上一個公司項目主要做數(shù)據(jù)可視化家浇，所以百度出的echarts使用比較多。整體框架使用過MVVC模式的vue.js碴裙，源碼沒有看過钢悲。其他相關技能如：數(shù)據(jù)庫点额，git操作等
不驕不躁吧，一步一個腳印莺琳，趁這段時間好好總結(jié)还棱，好好沉淀
好,廢話不多說，進入正題吧
前端面試之1---職位要求分析
這是崗位職責：
- 1惭等、使用 HTML/CSS/JavaScript/AJAX 等各種 Web 技術進行移動端珍手、PC端界面開發(fā)；
- 2辞做、整體頁面結(jié)構及樣式層結(jié)構的設計琳要、優(yōu)化；
- 3秤茅、在團隊的代碼格式稚补、結(jié)構的規(guī)定下，編寫易讀框喳、易維護课幕、高質(zhì)量、高效率的代碼五垮；
- 4乍惊、具有良好的溝通能力、團隊配合精神放仗，對新技術敏感润绎。
這是任職要求：
- 1、兩年以上專職Javascript開發(fā)經(jīng)驗诞挨，有微信公眾號開發(fā)經(jīng)驗優(yōu)先考慮凡橱；
- 2、熟悉 angularjs 亭姥、react、vue其中一種
- 3顾稀、熟練運用CSS3新特性达罗，熟悉HTML5最新規(guī)范；
- 4静秆、能夠熟練運用HTML5特性構建移動端的WebApp粮揉；
- 5、熟悉less/sass抚笔、es6語法扶认；
- 6、熟悉常用的構建工具（包括gulp或webpack）殊橙；
- 7辐宾、熟悉常用的包管理器（包括bower或npm）
- 8狱从、熟悉微信公眾號h5開發(fā)；
- 9叠纹、開發(fā)速度快季研、抗壓能力強，可應對較大的工作壓力誉察；
崗位職責：
- 1 使用HTML与涡，CSS，Javascript 持偏，Ajax等各種Web技術進行移動端驼卖，PC端界面開發(fā)
常見WEB要求，進行界面開發(fā)鸿秆，WEB前端工作者必須的技能酌畜，html頁面結(jié)構，css頁面樣式表谬莹，js頁面邏輯實現(xiàn)交互檩奠，ajax異步加載渲染。知識點：移動端附帽，PC端埠戳。雙端開發(fā)：主要要考慮到PC端和移動端開發(fā)的區(qū)別，主要考慮的方面有：兼容性蕉扮，網(wǎng)速整胃，適配，頁面布局等方面的不同喳钟。
兼容性
PC端考慮的是瀏覽器的兼容性屁使，而移動端開發(fā)考慮的更多考慮的是手機兼容性，原因：目前移動端瀏覽器基本都是使用webkit內(nèi)核奔则，而且在手機端瀏覽器基本會更新為最新版本蛮寂，不會存在過舊的瀏覽器版本。主要需要考慮的是手機分辨率的適配和操作系統(tǒng)的略微差異事件
移動端和PC端的差異還表現(xiàn)在事件方面易茬，例如移動端會多出來觸屏事件酬蹋，缺少hover事件。另外移動端包括會有一些彈出手機鍵盤等移動端瀏覽器調(diào)用的事件抽莱，這些問題PC端是沒有的布局
移動端開發(fā)一般會針對不同分辨率做到布局自適應范抓。（之前沒有做過移動端開發(fā)，這些解決辦法不是很清楚）動畫處理
PC端一般由于要考慮到兼容性會使用JS做動畫食铐，但是移動端一般使用CSS3移動端的一些接口
移動端一般會用到一些聯(lián)動的接口匕垫，例如微信，例如位置信息等虐呻，移動端的應用一般會用到一些交互功能象泵，而pc端一般沒有這些操作寞秃。移動端對JS資源或者插件流量優(yōu)化
PC端考慮性能一般在加載速度和頁面響應時間，而移動端還可能在流量方面有所考慮单芜，一般插件或者資源能小則小蜕该，所以PC端一般使用juery，移動端用zepto一些前端開發(fā)架構洲鸠，性能優(yōu)化堂淡，首屏打開時間，動畫幀率等
- 2 整體頁面結(jié)構及樣式層結(jié)構的設計扒腕、優(yōu)化绢淀；
由于之前布局結(jié)構設計不是由我主要負責，所以這一塊技巧有點空缺瘾腰。不過基本的盒模型和彈性布局還是有了解皆的。之前項目中主要使用到的解決辦法是：Bootstrap的柵欄扁平化設計。col-md,col-sm針對列的柵欄化蹋盆，VUE.js的第三方UI庫的element和iview等也有這種柵欄設計费薄，使用這類設計能夠快速的完成頁面布局和結(jié)構設計
- 3 在團隊的代碼格式、結(jié)構的規(guī)定下栖雾，編寫易讀楞抡、易維護、高質(zhì)量析藕、高效率的代碼召廷；
這就是基本的程序員素養(yǎng)問題。易讀易維護的高效率代碼是每個程序員追求的代碼之道账胧。主要體現(xiàn)在竞慢，代碼的結(jié)構性，可讀性治泥，代碼的效率性等筹煮。
- 4 具有良好的溝通能力、團隊配合精神居夹，對新技術敏感败潦。
程序員這個行業(yè)，自己一年的工作經(jīng)驗看來吮播，說苦逼吧，也苦逼眼俊，說還行吧意狠，也還行。享受著社會較高的教育資源和較為舒適的工作環(huán)境和氛圍疮胖。但是依然是勞動創(chuàng)造價值环戈，靠自己的勞動成本換取高額的薪酬闷板，或者說透支自己的未來時間來獲得今日的高薪。程序員要一直保持一顆學無止境的心態(tài)這個基本每個程序員都會知道我就不用多說了院塞。我也是個小菜鳥/
任職要求分析（知識點遮晚，敲黑板記好，哈哈）：
- 1拦止、兩年以上專職Javascript開發(fā)經(jīng)驗县遣，有微信公眾號開發(fā)經(jīng)驗優(yōu)先考慮；
- 之前沒有做過小程序開發(fā)汹族，但是聽說美團最近新出的mpvue是一套快速開發(fā)小程序的框架萧求，同時語法和vue.js是一樣的，只需要使用vue.js的開發(fā)規(guī)范顶瞒，并且支持轉(zhuǎn)換為H5熟悉VUE.js即可使用夸政。之前有過vue.js使用經(jīng)驗，之后再補充一下榴徐，應該可以的守问。
- 2、熟悉 angularjs 坑资、react耗帕、vue其中一種
- 上一個項目有使用vue.js開發(fā)重構項目。數(shù)據(jù)雙向綁定盐茎，以數(shù)據(jù)驅(qū)動兴垦，并且頁面組件化，對于上一個項目那種數(shù)據(jù)可視化單頁面應用簡直不能太合適字柠。MVVC設計模式-Model探越，View，View-Controller窑业。view即為視圖層钦幔，表現(xiàn)為所有的DOM元素，Model層為模型常柄，即相關業(yè)務邏輯的數(shù)據(jù)對象鲤氢，聰數(shù)據(jù)庫映射而來。而vm（ViewModel）層就是與界面對應的model西潘，把model數(shù)據(jù)對象封裝和關聯(lián)上界面View卷玉，并且實現(xiàn)綁定，視同會根據(jù)數(shù)據(jù)對象的改變而改變喷市，而數(shù)據(jù)對象也會因為視圖操作而改變相种。視圖View與Model進行綁定是通過DataBinding監(jiān)聽model層數(shù)據(jù)，Model與View層綁定是通過DOMListenner監(jiān)聽頁面元素的變化品姓。這樣做的好處是：數(shù)據(jù)驅(qū)動寝并，自動計算屬性和追蹤依賴的模板表達式箫措。同時VUE.js支持組件化開發(fā)，將可復用的頁面元素封裝成組件衬潦，只需要在使用的頁面中用es6的語法將其注冊并且聲明即可直接使用自定義標簽斤蔓。
- 3、熟練運用CSS3新特性镀岛，熟悉HTML5最新規(guī)范弦牡；
- 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.
區(qū)別是：SessionStorage是針對一個Session進行數(shù)據(jù)存儲，當用戶關閉瀏覽器窗口i之后數(shù)據(jù)會被刪除LocalStorage對象存儲的數(shù)據(jù)沒有時間限制兩種存儲模式均為客戶端數(shù)據(jù)存儲方式- 8 HTML提供了新的離線Web應用蔗蹋。由于引入了應用程序緩存何荚，這意味著Web應用可以進行緩存，并可在沒有因特網(wǎng)鏈接是進行訪問猪杭，三大優(yōu)勢
- 1離線瀏覽-用戶可在應用離線時使用它們
- 2 速度-已緩存的資源會直接請求本地資源餐塘，獲得更快的資源加載速度
- 3 減少服務器負載-瀏覽器將只從服務器下載更新過或者更改過的資源
- 9 HTML5 Web Worker
當在HTML頁面中執(zhí)行腳本時，頁面的狀態(tài)是不可響應的皂吮，直到腳本已完成戒傻。web worker是運行在后臺的JavaScript，獨立于其他腳本蜂筹，不會影響頁面的性能需纳，可以繼續(xù)做其他的交互相應，實現(xiàn)多線程并發(fā)- 10 HTML5 WebSocket
WebSocket是HTML5開始提供的一種在單個TCP連接上進行全雙工通訊的協(xié)議艺挪，在web socket API中不翩，瀏覽器和服務器只需要做一個握手動作，然后瀏覽器和服務器之間就形成了一條快速通道，兩只直接就可以直接進行數(shù)據(jù)相互傳送慌盯。瀏覽器通過JavaScript向服務器發(fā)出尖利WebSockt連接的請求，連接請求建立之后掂器，客戶端和服務器端就可以通過tcp連接直接進行數(shù)據(jù)交換亚皂。
- CSS3新特性
- css3選擇器
- css3邊框樣式
- css3背景
- css3漸變
- css3文本效果
- css3字體
- css3轉(zhuǎn)換和變形
- css3 3D轉(zhuǎn)換屬性
- css3過度
- css3動畫（暫未使用過）
- css3多列
- css3盒模型
- css3彈性布局
- css3多媒體查詢
- 4、能夠熟練運用HTML5特性構建移動端的WebApp国瓮；
- 之前沒有過web App項目經(jīng)驗=-=灭必，需要再補充。只能再這里補充一下網(wǎng)上找到的相關概念吧乃摹。web app指的是：使用HTML5編寫的移動web應用禁漓，由于可以運行在多端，所以一套代碼到處運行孵睬，減少了開發(fā)成本播歼。不過vue.js也適合再移動端開發(fā)，首先vue.js有易用的過度系統(tǒng)效果掰读，vue.js可以快速的復用已有的組件秘狞，vue.js有豐富的第三方UI框架，并且有有做自適應樣式蹈集。app開發(fā)過程中只需要關注app的數(shù)據(jù)走向
- 5烁试、熟悉less/sass、es6語法拢肆；
- Less is More
Less是基于Javascript的客戶端CSS plus 需要特定的工具將Less編譯為CSS才能夠解析减响。主要是在CSS的基礎上增加變量，Mixin（混入）運算一級函數(shù)功能等功能郭怪，目的是為了方便css的維護成本和編寫成本
而Sass是基于Ruby的服務器端CSS擴充支示。是最早也是最成熟的CSS預處理語言，可以使用變量常量嵌套混入函數(shù)等功能移盆。并且整體來說sass功能更強大一些悼院。
同時Bootstrap就是基于Less語法編寫
- 6、熟悉常用的構建工具（包括gulp或webpack）咒循；
- 為什么使用WebPack
- 由于現(xiàn)在網(wǎng)頁功能越發(fā)豐富据途，擁有復雜的JavaScript和一大堆依賴包，于是就有了很多常用的構建工具叙甸。比如webpack颖医，他可以實現(xiàn)以下功能：
- 1 模塊化 把復雜的程序細化為小的未見
- 2 類似TypeScript，Less這種在JavaScript上拓展的開發(fā)語言裆蒸，能夠提前調(diào)用工具實現(xiàn)預編譯和轉(zhuǎn)換
- webpack的工作方式是把Web項目整個看作一個整體熔萧，通過給定主文件，例如Index.js，webpack將從這個主文件作為入口開始找到項目所有的依賴文件佛致，最后打包成一個或者多個瀏覽器可以識別的Javascript文件贮缕，相比gulp webpack的處理速度更快耿直饑餓，能打包更多不同類型的文件俺榆。
- webpack的使用方式感昼。
使用npm進行安裝，并且使用webpack構建項目罐脊，通過配置文件進行配置修改定嗓，
。萍桌。宵溅。等等詳細的需要另起一篇文章介紹了
- 7、熟悉常用的包管理器（包括bower或npm）
之前項目有使用過npm作為包管理器上炎，實現(xiàn)一些前端依賴包的安裝和管理恃逻，npm install，并且可以寫一些簡單的npm腳本藕施，批量安裝或者什么的 - 8辛块、熟悉微信公眾號h5開發(fā)；
- 其實之前并沒有什么微信公眾號相關開發(fā)經(jīng)驗铅碍，之后再補充
- 9润绵、開發(fā)速度快、抗壓能力強胞谈，可應對較大的工作壓力尘盼；
- 這種情況在面試的時候很有可能發(fā)生。如果參加的是壓力面烦绳，面試官的問題會非常尖銳卿捎、尖刻，即使你回答得很好径密，也會被他說得啞口無言午阵，無力辯駁。其實這個時候面試官不是看你回答得好或壞享扔，是看你承受壓力的能力底桂，所以對這種情況，你一定要以積極惧眠、健康籽懦、樂觀的心態(tài)面對，千萬不要驚慌失措氛魁，語無倫次暮顺，微笑著看著面試官厅篓，再說些個人有個人的看法之類的話，顯得自己并沒有很緊張捶码，很從容的樣子羽氮。 如果是一般的面試被面試官問倒了，自己一時無法回答惫恼，可以直接跟面試官說：給我5秒鐘時間想想乏苦，然后再做回答，如果實在不知道怎么回答得尤筐，只有老實一點了，說不會洞就，或者說現(xiàn)在暫時沒有想到合適的答案盆繁。特別是問的是技術性方面的問題，不會就不會旬蟋，沒有關系的油昂，瞎扯也扯不出什么來，反而給面試官留下不誠實的印象倾贰。 希望我的意見能對你有用冕碟！
