最近博主想換一個工做環境,因而自信滿滿的遇上了金三銀四的好時候。卻不知外面的世界早於之前不一樣了,特別是前端這一塊。javascript
在開始以前申明一下,博主的公司一直用的技術棧是vue,期間也開發過兩個小程序,相比較而言,原生js以及jquery的項目已經好久好久沒作過了。css
言歸正傳,放上此次面試題的題目:html
css、html 方面:前端
1.css盒模型分爲哪兩種?vue
標準盒子模型 IE盒子模型,主要區別在於width計算。java
2.選擇器的優先級排序?jquery
內聯樣式>id選擇器>類選擇器=屬性選擇器=僞類選擇器>標籤選擇器=僞元素選擇器面試
3.你知道哪些H5新標籤?算法
header:定義文檔的頁眉 頭部vuex
nav:定義導航連接的部分
footer:定義文檔或節的頁腳 底部
article:定義文章。
section:定義文檔中的節(section、區段)
aside:定義其所處內容以外的內容 側邊
4.display:flex;justify-content:center;align-items:center呈現的效果是什麼樣?
水平居中,垂直居中
5.什麼狀況須要清除浮動,如何清除?
有時候父容器沒有給固定高度的時候,因此給浮動的元素的祖先元素加上高度;
clear:both;(這個方法有一個很是大的,而且致命的問題,margin失效了!)
overflow:hidden
6.行內元素,塊級元素列舉幾個?
塊元素:獨佔一行,可設置寬高(div、p、ul、ol、h1-h5)
行內塊元素:可設置寬高,不能換行(img、iput)
行元素:不能設置寬高,不能換行(span、i、s、u)
原生js方面:
1.解釋下數組中的join()以及split()
join()是把數組中的全部元素放入字符串中,再用指定的分隔符進行分隔。
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join(".")) </script>
輸出:
George.John.Thomas
split()是把字符串分隔成一個字符串數組。
它接受兩個參數:
stringObject.split(separator,howmany)
例如:
<script type="text/javascript"> var str="How are you doing today?" document.write(str.split(" ") + "<br />") document.write(str.split("") + "<br />") document.write(str.split(" ",3)) </script>
輸出:
How,are,you,doing,today? H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? How,are,you
2.數字轉化爲字符串有哪幾種方法?
toString();String();" "+value
3.說一說閉包?優勢?缺點?
閉包就是可以讀取其餘函數內部變量的函數,只有函數內部的子函數才能讀取局部變量,所以能夠把閉包簡單理解成‘定義在函數內部的函數’,它就是將函數內部和函數外部連接起來的一座橋樑。因爲閉包會使函數中的變量都被保存在內存中,內存消耗很大,因此不能濫用閉包,不然會形成網頁的性能問題,解決方法是在退出函數以前將不使用的局部變量所有刪除。
4.說一說call,bind,apply的相同與不一樣之處?
首先他們都是用來改變 this 指向的(其實我用的最多的是箭頭函數,感受更簡潔一點)。
call 方法第一個參數是要綁定給this的值,後面傳入的是一個參數列表。當第一個參數爲 null、undefined 的時候,默認指向 window。
apply 接受兩個參數,第一個參數是要綁定給 this 的值,第二個參數是一個參數數組。當第一個參數爲 null、undefined 的時候,默認指向 window。
事實上 apply 和 call 的用法幾乎相同, 惟一的差異在於:當函數須要傳遞多個變量時, apply 能夠接受一個數組做爲參數輸入, call 則是接受一系列的單獨變量。
bind 和 call 很類似,第一個參數是 this 的指向,從第二個參數開始是接收的參數列表。區別在於 bind 方法返回值是函數以及 bind 接收的參數列表的使用。
5.你經常使用哪些ES6新特性?
我簡單的說了幾個,好比const、let聲明變量,他們與var聲明的區別。
箭頭函數,模板字符串還有解構賦值等等。
6.你瞭解原型和原型鏈嗎?
關於這方面我一年前寫過有關面向對象的內容,這裏不作解釋了。
vue方面:
1.說一說vue的生命週期?
beforeCreate()、created()、beforeMount()、mounted()、beforeUpdate()、updated()、beforeDestory()、
destroyed()
2.vue的組件通訊幾種方式?
父傳子:props
子傳父:emit
兄弟組件傳遞數據eventBus
具體實現不做解釋了
3.keep-alive幹嗎用的?
是vue的一個內置組件,可使被包含的組件保留狀態,避免從新被渲染
4.v-for循環中key的用處是什麼?
key的做用主要是爲了高效的更新虛擬DOM(有興趣的能夠看下虛擬DOM的Diff算法原理)
5.解釋下雙向綁定原理?
vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式,經過Object.defineProperty()
來劫持各個屬性的setter
,getter
,在數據變更時發佈消息給訂閱者,觸發相應的監聽回調。
1、實現一個數據監聽器Observer,可以對數據對象的全部屬性進行監聽,若有變更可拿到最新值並通知訂閱者 2、實現一個指令解析器Compile,對每一個元素節點的指令進行掃描和解析,根據指令模板替換數據,以及綁定相應的更新函數 3、實現一個Watcher,做爲鏈接Observer和Compile的橋樑,可以訂閱並收到每一個屬性變更的通知,執行指令綁定的相應回調函數,從而更新視圖 四、mvvm入口函數,整合以上三者
6.用過vuex嗎?說一說工做流程?
vuex是對數據的集中式管理,在開發大中型項目須要不少公共數據的傳遞,咱們就能經過狀態管理來實現。
大致流程是在組建components中能夠經過vuex中解構的mapActions方法發送請求到actions進行業務邏輯處理,而後actions經過commit方法和mutations進行通信,由mutations修改state裏邊的數據狀態。要想拿到state裏邊的數據須要在組建內經過vuex中結構的mapGetters方法到getters中讀取state中的數據。