面試題

一:什么是閉包?閉包的用處?

(1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上,閉包就

是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。

(2)閉包可以用在許多地方。它的最大用處有兩個,一個是可以讀取函數(shù)內(nèi)部的變量,另一個就是讓這些變量的值始終保持在內(nèi)存中

閉包的特性:

①.封閉性:外界無法訪問閉包內(nèi)部的數(shù)據(jù),如果在閉包內(nèi)聲明變量,外界是無法訪問的,除非閉包主動向外界提供訪問接口;

②.持久性:一般的函數(shù),調(diào)用完畢之后,系統(tǒng)自動注銷函數(shù),而對于閉包來說,在外部函數(shù)被調(diào)用之后,閉包結(jié)構(gòu)依然保存在系統(tǒng)中,閉包中的數(shù)據(jù)依然存在,從而實現(xiàn)對數(shù)據(jù)的持久使用。

閉包的缺點就是常駐內(nèi)存,會增大內(nèi)存使用量,使用不當很容易造成內(nèi)存泄露。

vue面試題

一:簡述vue的理解

Vue是一個漸進式的輕量級框架,核心是關(guān)注視圖層,是一個構(gòu)建數(shù)據(jù)驅(qū)動的頁面,將數(shù)據(jù)綁定視圖上,vue提供數(shù)據(jù)和視圖雙向綁定原理使我們開發(fā)頁面更簡單,修改數(shù)據(jù),視圖自動更新。?vue是模塊化和組塊化,如果頁面要更改數(shù)據(jù)之類的,就只在組件來修改就可以,vue有幾大特點:(1)?簡潔 (2) 輕量 (3)快速 (4) 數(shù)據(jù)驅(qū)動 (5) 模塊化(6) 組件化Vue

通過添加組件系統(tǒng)、客戶端路由、大規(guī)模狀態(tài)管理來構(gòu)建一個完整的框架,可以通過豐富的指令擴展模板,可以通過各種各樣的插件來增強功能

過濾器是針對一些數(shù)據(jù)?進行篩選、過濾、格式化等相關(guān)的處理,變成我們想要的數(shù)據(jù)。

過濾器的本質(zhì)?就是一個帶有參數(shù)帶有返回值的方法。

Vue組件的過程:組件可以提升整個項目的開發(fā)效率,能夠把頁面拆分為多個獨立的模塊,解決了效率低,難維護,復用性,等問題。

Vue是一個數(shù)據(jù)驅(qū)動頁面的一個框架,基于MVVM模式,M指的是數(shù)據(jù),V值得是視圖,VM是視圖模型,將數(shù)據(jù)綁定視圖上(雙向綁定)

Vue.js是一套構(gòu)建用戶界面的漸進式(沒有強主張,沒有多做職責之外的事。)框架。

Vue的生命周期

生命周期就是鉤子函數(shù),主要是在什么時候來調(diào)用這些函數(shù),比如是在創(chuàng)建,掛載,更新,銷毀完成之后還是之前,初始化數(shù)據(jù)完成之前還是之后等

???從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程,我們稱這是?Vue 的生命周期beforeCreate :?數(shù)據(jù)聲明還沒被調(diào)用時使用created :?vue渲染完畢后,所有數(shù)據(jù)和方法初始化后調(diào)用mounted : 掛載元素之后

updated : 如果對數(shù)據(jù)統(tǒng)一處理,在這里寫上相應函數(shù)beforeDestroy : 可以做一個確認停止事件的確認框nextTick : 更新數(shù)據(jù)后立即操作dom

BeforeMount 掛載開始之前被調(diào)用

1.?vue生命周期的作用是什么?答:它的生命周期中有多個事件鉤子,讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。

2.?第一次頁面加載會觸發(fā)哪幾個鉤子?答:第一次頁面加載時會觸發(fā)?beforeCreate, created, beforeMount, mounted 這幾個鉤子

3.vue的優(yōu)點是什么?

低耦合。視圖(View)可以獨立于Model變化和修改,一個ViewModel可以綁定到不同的"View"上,當View變化的時候Model可以不變,當Model變化的時候View也可以不變。

可重用性。你可以把一些視圖邏輯放在一個ViewModel里面,讓很多view重用這段視圖邏輯。

獨立開發(fā)。開發(fā)人員可以專注于業(yè)務邏輯和數(shù)據(jù)的開發(fā)(ViewModel),設(shè)計人員可以專注于頁面設(shè)計,使用Expression Blend可以很容易設(shè)計界面并生成xml代碼。

可測試。界面素來是比較難于測試的,而現(xiàn)在測試可以針對ViewModel來寫。

5.vue組件之間的傳值??

1.父組件給子組件傳值 (props)?

2.子組件給父組件傳值 (emit)

3.兄弟組件間的傳值(on和emit)

6.框架的好處

提高代碼的質(zhì)量,開發(fā)速度

提高代碼的復用率

降低模塊之間的耦合度(高內(nèi)聚低耦合)

二。Vue.js開發(fā)環(huán)境

1.安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘寶npm鏡像安裝相關(guān)依賴

?在cmd里直接輸入:npm install -g cnpm --registry=https://registry.npm.taobao.org,回車,等待安裝...

3.安裝全局vue-cli腳手架,用于幫助搭建所需的模板框架

在cmd里 1)輸入:cnpm install -g vue-cli,回車,等待安裝...

? ? ? ? ? ? 2).輸入:vue,回車,若出現(xiàn)vue信息說明表示成功

4.創(chuàng)建項目

在cmd里輸入:vue init webpack vue_test(項目文件夾名),回車,等待一小會兒

5.安裝依賴

在cmd里 ?1).輸入:cd vue_test(項目名),回車,進入到具體項目文件夾

? ? ? ?2).輸入:cnpm install,回車,等待一小會兒

回到項目文件夾,會發(fā)現(xiàn)項目結(jié)構(gòu)里,多了一個node_modules文件夾(該文件里的內(nèi)容就是之前安裝的依賴)

6.測試環(huán)境是否搭建成功

方法1:在cmd里輸入:cnpm run?dev

方法2:在瀏覽里輸入:localhost:8080(默認端口為8080)

三、vue中常見的指令有哪些?

v-for/v-if/v-else-if/v-else/v-on/v-bind/v-show/v-html/v-model

四、雙向數(shù)據(jù)綁定是如何實現(xiàn)的?好處有哪些

v-model

好處?

組件是一個具有特定功能的?可被反復使用的視圖,

各個指令實現(xiàn)數(shù)據(jù)和視圖的綁定,解耦(降低耦合度的過程)

組件有什么好處?

封裝好了組件,提高了代碼復用率

提高了代碼的可讀性

降低了測試難度

五、Vue實例中常見的屬性有哪些?

data 存儲數(shù)據(jù)

methods 方法

directives 指令

filters 過濾器/管道

router 路由

props 接收調(diào)用該組件時傳來的數(shù)據(jù)

watch 監(jiān)聽雙向數(shù)據(jù)綁定的數(shù)據(jù)的變化

computed 用在邏輯復雜的地方,計算屬性是基于它們的依賴進行緩存的,提高性能

六、過濾器

本質(zhì)是一個帶有參數(shù)?有返回值的方法;支持多重過濾

{{表達式?| myFilter(arg1,arg2) | myFilter2}}

七、refs

1、給子組件要指定一個屬性?

2、通過引用名字mySon怎么得到子組件的實例??this.$refs.mySon

1Vue組件化的理解

首先組件的基本構(gòu)成分別是:樣式結(jié)構(gòu),行為邏輯,數(shù)據(jù)。web中的組件其實就是頁面組成的一部分,每個組件都會提供一些對外接口,允許使用者設(shè)置和調(diào)整參數(shù)屬性,可以將不同功能的組件結(jié)合在一起,快速的構(gòu)成一個符合實際需求的應用。


2Vue路由的理解

首先Vue的單頁面應用是基于路由和組件的,路由用于設(shè)定訪問路徑,并將路徑和組件映射起來。傳統(tǒng)的頁面應用,是通過超鏈接來實現(xiàn)頁面的切換和跳轉(zhuǎn)。在Vue-router中是路徑之間的切換,也就是組件的切換。


3你對Vue鉤子函數(shù)的理解

vue-router的導航鉤子主要用來攔截導航,讓他完成跳轉(zhuǎn)或取消。


4如何讓css只在當前組件中起作用

在每一個vue組件中都可以定義各自的css,js,如果希望組件內(nèi)寫的css只對當前組件起作用,只需要在style中寫入scoped:


5created和mounted區(qū)別

created實例創(chuàng)建完成之后的鉤子函數(shù);$el屬性不可見為undefined

mounted將編譯好的HTML掛載到頁面完成后執(zhí)行的鉤子函數(shù),在整個實例生命周期中只執(zhí)行一次;$el已創(chuàng)建,同時DOM結(jié)構(gòu)已生成


6mounted和created分別什么時候用

只有ajax數(shù)據(jù)請求放在created里面就可以了,這樣可以及早發(fā)請求獲取數(shù)據(jù);如果有依賴DOM的情況下,就放到mounted里面


7Vue和angular分別采用什么技術(shù)實現(xiàn)雙向數(shù)據(jù)綁定?

AngularJS?采用“臟值檢測”的方式,數(shù)據(jù)發(fā)生變更后,對于所有的數(shù)據(jù)和視圖的綁定關(guān)系進行一次檢測,識別是否有數(shù)據(jù)發(fā)生了改變,有變化進行處理,可能進一步引發(fā)其他數(shù)據(jù)的改變,所以這個過程可能會循環(huán)幾次,一直到不再有數(shù)據(jù)變化發(fā)生后,將變更的數(shù)據(jù)發(fā)送到視圖,更新頁面展現(xiàn)。如果是手動對?ViewModel?的數(shù)據(jù)進行變更,為確保變更同步到視圖,需要手動觸發(fā)一次“臟值檢測”。

VueJS?則使用?ES5?提供的?Object.defineProperty()?方法,監(jiān)控對數(shù)據(jù)的操作,從而可以自動觸發(fā)數(shù)據(jù)同步。并且,由于是在不同的數(shù)據(jù)上觸發(fā)同步,可以精確的將變更發(fā)送給綁定的視圖,而不是對所有的數(shù)據(jù)都執(zhí)行一次檢測。


8v-show和v-if區(qū)別

v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏

v-if指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果

一般來說,?v-if?有更高的切換開銷,而?v-show?有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用?v-show?較好;如果在運行時條件不太可能改變,則使用?v-if?較好


9的作用是什么

?包裹動態(tài)組件時,會緩存不活動的組件實例,主要用于保留組件狀態(tài)或避免重新渲染。

大白話:?比如有一個列表和一個詳情,那么用戶就會經(jīng)常執(zhí)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面,那么就可以對列表組件使用進行緩存,這樣用戶每次返回列表的時候,都能從緩存中快速渲染,而不是重新渲染


10Vue中引入組件的步驟

1.采用ES6的import ... from ...語法或CommonJS的require()方法引入組件

2.對組件進行注冊,代碼如下

//?注冊Vue.component('my-component', { ?template:?'

A custom component!
'})

3.使用組件


11請列舉出3個Vue中常用的生命周期鉤子函數(shù)

created:?實例已經(jīng)創(chuàng)建完成之后調(diào)用,在這一步,實例已經(jīng)完成數(shù)據(jù)觀測,?屬性和方法的運算, watch/event事件回調(diào).?然而,?掛載階段還沒有開始, $el屬性目前還不可見

mounted: el被新創(chuàng)建的?vm.$el?替換,并掛載到實例上去之后調(diào)用該鉤子。如果?root?實例掛載了一個文檔內(nèi)元素,當?mounted?被調(diào)用時?vm.$el?也在文檔內(nèi)。

activated::keep-alive組件激活時調(diào)用


12請簡述下Vuex的原理和使用方法


一個應用可以看作是由上面三部分組成: View, Actions,State,數(shù)據(jù)的流動也是從View => Actions => State =>View?以此達到數(shù)據(jù)的單向流動.但是項目較大的,?組件嵌套過多的時候,?多組件共享同一個State會在數(shù)據(jù)傳遞時出現(xiàn)很多問題.Vuex就是為了解決這些問題而產(chǎn)生的.

Vuex可以被看作項目中所有組件的數(shù)據(jù)中心,我們將所有組件中共享的State抽離出來,任何組件都可以訪問和操作我們的數(shù)據(jù)中心.


上圖可以很好的說明Vuex的組成,一個實例化的Vuex.Store由state, mutations和actions三個屬性組成:

state中保存著共有數(shù)據(jù)

改變state中的數(shù)據(jù)有且只有通過mutations中的方法,且mutations中的方法必須是同步的

如果要寫異步的方法,需要些在actions中,?并通過commit到mutations中進行state中數(shù)據(jù)的更改.

13vue與angular的區(qū)別

vue的雙向邦定是基于ES5?中的?3.getter/setter來實現(xiàn)的,而angular而是由自己實現(xiàn)一套模版編譯規(guī)則,需要進行所謂的“臟”檢查,vue則不需要。因此,vue在性能上更高效,但是代價是對于ie9以下的瀏覽器無法支持。

14active-class是哪個組件的屬性?

vue-router模塊的router-link組件

15怎么定義vue-router的動態(tài)路由?怎么獲取傳過來的動態(tài)參數(shù)

1、路由配置文件找到對應的路由,在path屬性上添加/:id

2、在需要出發(fā)跳轉(zhuǎn)的頁面router-link配置實際要傳遞的參數(shù)數(shù)據(jù)

3、在目標組件通過路由對象下的$route.params進行接收

16vue-router有哪幾種導航鉤子

鉤子函數(shù)種類:

router全局:beforeEach、afterEach

單個路由:beforeEnter

組件內(nèi)的鉤子:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

鉤子函數(shù)接收的參數(shù):

to:要進入的目標,路有對象 到哪里去

from:正要離開導航的路由對象 從哪里來

next:用來決定跳轉(zhuǎn)或取消導航


17在vue.cli中的安裝使用步驟是?有哪幾大特性?

第一步:用npm?下三個loader(sass-loader、css-loader、node-sass)

第二步:然后在組件的style標簽加上lang屬性 ,例如:lang=”scss”


18vue-router是什么?它有哪些組件

vue的路由插件。router-link、router-view


19請說出vue.cli項目中src目錄每個文件夾和文件的用法

assets文件夾是放靜態(tài)資源;components是放組件;router是定義路由相關(guān)的配置;view視圖;app.vue是一個應用主組件;main.js是入口文件


20什么是vue生命周期

Vue?實例從創(chuàng)建到銷毀的過程,就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程,我們稱這是?Vue?的生命周期。

vue生命周期的作用是什么?它的生命周期中有多個事件鉤子,讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。


21vue生命周期總共有幾個階段

它可以總共分為8個階段:創(chuàng)建前/后,?載入前/后,更新前/后,銷毀前/銷毀后


22第一次頁面加載會觸發(fā)哪幾個鉤子

第一次頁面加載時會觸發(fā)?beforeCreate, created, beforeMount, mounted?這幾個鉤子


23DOM?渲染在 哪個周期中就已經(jīng)完成

DOM?渲染在?mounted?中就已經(jīng)完成了


24簡單描述每個周期具體適合哪些場景

生命周期鉤子的一些使用方法:?beforecreate :?可以在這加個loading事件,在加載實例時觸發(fā)?created :?初始化完成時的事件寫在這里,如在這結(jié)束loading事件,異步請求也適宜在這里調(diào)用?mounted :?掛載元素,獲取到DOM節(jié)點?updated :?如果對數(shù)據(jù)統(tǒng)一處理,在這里寫上相應函數(shù)?beforeDestroy :?可以做一個確認停止事件的確認框?nextTick :?更新數(shù)據(jù)后立即操作dom

arguments是一個偽數(shù)組,沒有遍歷接口,不能遍歷


25computed VS methods

你可能已經(jīng)注意到我們可以通過在表達式中調(diào)用方法來達到同樣的效果:

Reversed message: "{{ reversedMessage() }}"


//?在組件中

methods: {

?reversedMessage: function () {

? ?return this.message.split('').reverse().join('')

?}

}

我們可以將同一函數(shù)定義為一個方法而不是一個計算屬性。兩種方式的最終結(jié)果確實是完全相同的。然而,不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。這就意味著只要message還沒有發(fā)生改變,多次訪問?reversedMessage計算屬性會立即返回之前的計算結(jié)果,而不必再次執(zhí)行函數(shù)。

這也同樣意味著下面的計算屬性將不再更新,因為Date.now()不是響應式依賴:

computed: {

?now: function () {

? ?return Date.now()

?}

}

相比之下,每當觸發(fā)重新渲染時,調(diào)用方法將總會再次執(zhí)行函數(shù)。

我們?yōu)槭裁葱枰彺??假設(shè)我們有一個性能開銷比較大的的計算屬性A,它需要遍歷一個巨大的數(shù)組并做大量的計算。然后我們可能有其他的計算屬性依賴于A。如果沒有緩存,我們將不可避免的多次執(zhí)行?A的?getter!如果你不希望有緩存,請用方法來替代。


26computed VS watch

Vue?提供了一種更通用的方式來觀察和響應?Vue?實例上的數(shù)據(jù)變動:偵聽屬性。當你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時,你很容易濫用watch——特別是如果你之前使用過?AngularJS。然而,通常更好的做法是使用計算屬性而不是命令式的?watch回調(diào)。細想一下這個例子:

{{ fullName }}


var vm = new Vue({

?el: '#demo',

?data: {

? ?firstName: 'Foo',

? ?lastName: 'Bar',

? ?fullName: 'Foo Bar'

?},

?watch: {

? ?firstName: function (val) {

? ? ?this.fullName = val + ' ' + this.lastName

? ?},

? ?lastName: function (val) {

? ? ?this.fullName = this.firstName + ' ' + val

? ?}

?}

})

jquery總結(jié)

一.對jquery的了解

jQuery是一個輕量級的javascript框架,極大的簡化了js的編程。

1.首先jQuery提供了強大的元素選擇器。用于獲取html頁面中封裝了html元素的jQuery對象。像常見的選擇器有:基本選擇器,層次選擇器,過濾選擇器,表單選擇器。

2.第二點就是jQuery提供了對css樣式操作的支持,像對class屬性的增加刪除切換操作。還有對單個樣式操作的支持的css方法,提供了一種簡潔統(tǒng)一的操作樣式的方法。

3.第三點就是jQuery出色的DOM操作的封裝,極大的簡化了javascript的對dom節(jié)點的增刪改查操作,讓我們可以使用一種更加簡潔的方法來操作節(jié)點。

4.第四點就是jQuery還是一個為事件處理特點設(shè)計的框架,提供了靜態(tài)綁定事件和動態(tài)綁定事件,完善了事件的處理機制。

5.jQuery解決了大量瀏覽器之間的兼容性的問題。

6.jQuery極大的簡化ajax編程,提供了一種更加簡潔,統(tǒng)一的編程方式。

7.jQuery內(nèi)置了一些簡單有用的內(nèi)置動畫,像常見的slideDown/slideUp,hide/show,fadeIn/fadeOut等,還支持基于定位機制使用animate來自定義動畫效果。

二.jQuery和Zepto的區(qū)別和用途

jQuery主要用于pc端,Zepto主要用于移動端,Zepto更加小巧

三.jquery里的ready與window.onload的區(qū)別的區(qū)別?

??ready:

1.具有簡寫寫法

2.一個HTML頁面中允許編寫多個

? 3.(效率高)需要在DOM加載后就可以執(zhí)行

? window.onload

1.沒有任何簡寫

2.一個HTML頁面中只能編寫一個

? 3.(效率低)必須在頁面中所有內(nèi)容都加載完畢后,才能執(zhí)行

四.請簡要說明jQuery框架的顯著特點。

答:jQuery強調(diào)的理念是寫的少,做的多。其主要特點有:輕量級、強大的選擇器、漂亮的DOM操作封裝、可靠的事件處理機制、完善的Ajax處理、出色的瀏覽器兼容性、鏈式操作方式、豐富的插件支持、開源產(chǎn)品。

五.jQuery如何解決跨域問題?

答:借助JSONP這個非官方的協(xié)議,其允許在服務器端集成script tags返回至客戶端,通過callback的形式實現(xiàn)跨域訪問JSONP即JSON with Padding。如果要進行跨域請求,我們可以通過使用html的script標記來進行跨域請求,并在響應中返回要執(zhí)行的script代碼,其中可以直接使用JSON傳遞javascript對象。

六.如何編寫高性能的jQuery代碼?

答:定義jQuery變量的時候添加var關(guān)鍵字;DOM操作請務必記住緩存(cache);盡量使用鏈式操作;盡量把一些代碼都整合到一起;避免使用全局類型的選擇器;盡量使用.on方法,因為其它任何方法都是最終使用.on方法來實現(xiàn)的;盡量使用最新版本的jQuery框架類庫。?

七.jQuery與jQuery UI有啥區(qū)別?

答:

(1)jQuery是一個js庫,主要提供的功能是選擇器,屬性修改和事件綁定等等。

(2)jQuery UI則是在jQuery的基礎(chǔ)上,利用jQuery的擴展性,設(shè)計的插件。提供了一些常用的界面元素,諸如對話框、拖動行為、改變大小行為等等。

八.jQuery鏈式調(diào)用的最大優(yōu)點是什么?

答:避免頻繁操作的DOM,鏈式調(diào)用可以實現(xiàn)先緩存再操作。

九.jQuery框架的源碼看過嗎?能不能簡單說一下它的實現(xiàn)原理?

首先是采用閉包技術(shù),然后用window作為形參傳入

答:jQuery框架通過改變javascript編碼方式來創(chuàng)建了全新的編程理念。譬如關(guān)于jQuery聲明的流程:先查找(創(chuàng)建)jQuery對象,然后調(diào)用jQuery對象的方法完成我們需要完成的工作。jQuery就是以這種可以說是最簡單的編碼邏輯來改變javascript編碼方式的,這個流程就是jQuery的編碼邏輯核心。?

十.jQuery中如何將對象轉(zhuǎn)化為json字符串,然后再轉(zhuǎn)化回來?

答:可以通過JSON.stringify方法把一個對象轉(zhuǎn)換成json字符串,再通過JSON.parse方法把一個json字符串解析成對象。?

十一.jQuery中的load方法一般怎么用的?

答:load方法一般在載入遠程HTML代碼并插入到DOM中的時候用,通常用來從Web服務器上獲取靜態(tài)的數(shù)據(jù)文件。如果要傳遞參數(shù)的話,可以使用$.get()或$.post()方法。

十二.描述一下.get()、[]和.eq()方法的區(qū)別。

答:eq返回原生jQuery對象,截取某些el元素生成jQuery新對象;get和[]返回的都是原生的DOM對象,原理一致;get和[]區(qū)別是get是通過jQuery對象的方法獲取,[]是根據(jù)jQuery是一個數(shù)組對象獲取。

十三。jQuery的理解:

jQuery是一個輕量級的javascript框架,極大的簡化了js的編程。

1.首先jQuery提供了強大的元素選擇器。用于獲取html頁面中封裝了html元素的jQuery對象。像常見的選擇器有:基本選擇器,層次選擇器,過濾選擇器,表單選擇器。

2.第二點就是jQuery提供了對css樣式操作的支持,像對class屬性的增加刪除切換操作。還有對單個樣式操作的支持的css方法,提供了一種簡潔統(tǒng)一的操作樣式的方法。

3.第三點就是jQuery出色的DOM操作的封裝,極大的簡化了javascript的對dom節(jié)點的增刪改查操作,讓我們可以使用一種更加簡潔的方法來操作節(jié)點。

?4.第四點就是jQuery還是一個為事件處理特點設(shè)計的框架,提供了靜態(tài)綁定事件和動態(tài)綁定事件,完善了事件的處理機制。

5.jQuery解決了大量瀏覽器之間的兼容性的問題。

6.jQuery極大的簡化ajax編程,提供了一種更加簡潔,統(tǒng)一的編程方式。

7.jQuery內(nèi)置了一些簡單有用的內(nèi)置動畫,像常見的slideDown/slideUp,hide/show,fadeIn/fadeOut等,還支持基于定位機制使用animate來自定義動畫效果。

十四、 bind()、live()、one()和on()的區(qū)別?

??????* bind() - 綁定事件

???????* live() - 老版本具有,新版本移除

???????* one() - 只綁定一次事件

???????* on() - 是jQuery底層提供的機制

十五:jquery里的ready與window.onload的區(qū)別的區(qū)別?

??ready

具有簡寫寫法

一個HTML頁面中允許編寫多個

??(效率高)需要在DOM加載后就可以執(zhí)行

??????window.onload

沒有任何簡寫

一個HTML頁面中只能編寫一個

??(效率低)必須在頁面中所有內(nèi)容都加載完畢后,才能執(zhí)行

十六:jQuery中如何將對象轉(zhuǎn)化為json字符串,然后再轉(zhuǎn)化回來?

答:可以通過JSON.stringify方法把一個對象轉(zhuǎn)換成json字符串,再通過JSON.parse方法把一個json字符串解析成對象。

ajax方面

一.Ajax是什么?

答:是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)。通過在后臺與服務器進行少量數(shù)據(jù)交換,AJAX可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進行更新。

什么是ajax,為什么要使用Ajax(請談一下你對Ajax的認識)?

答案:Ajax是客戶端請求服務器數(shù)據(jù)的一種技術(shù)。是一種向服務器發(fā)送異步請求的一種技術(shù),從服務器獲得數(shù)據(jù),Ajax技術(shù)不必刷新整個頁面,只需對頁面的局部進行更新,可以節(jié)省網(wǎng)絡(luò)帶寬,提高頁面的加載速度,從而縮短用戶等待時間,改善用戶體驗。

為什么要用ajax:Ajax應用程序的優(yōu)勢在于:

??通過異步模式,提升了用戶體驗

??優(yōu)化了瀏覽器和服務器之間的傳輸,減少不必要的數(shù)據(jù)往返,減少了帶寬占用

ajax引擎在客戶端運行,承擔了一部分本來由服務器承擔的工作,從而減少了大用戶量下的服務器負載。

二.同步請求和異步請求的區(qū)別?

答:

??同步:提交請求→等待服務器處理→處理完畢返回,這個期間客戶端瀏覽器不能干任何事。

??異步:請求通過事件觸發(fā)→服務器處理(這是瀏覽器仍然可以作其他事情)→處理完畢。

三.異步加載的方式有哪些?

答:

(1)defer,只支持IE;

(2)async;

(3)創(chuàng)建script,插入到DOM;

四、?JSON 的了解

輕量級數(shù)據(jù)交互格式,可以形成復雜的嵌套格式,解析非常方便

五、請解釋?ajax?的工作原理

Ajax?的工作原理相當于在用戶和服務器之間加了—個中間層,使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉(zhuǎn)嫁到客戶端,利于客戶端閑置的處理能力來處理,減輕服務器和帶寬的負擔,從而達到節(jié)約?ISP?的空間及帶寬租用成本的目的。簡單來說通過?XmlHttpRequest?對象來向服務器發(fā)異步請求,從服務器獲得數(shù)據(jù),然后用javascript?來操作?DOM而更新頁面。

六、ajax優(yōu)點:

1.無刷新更新數(shù)據(jù),減少用戶等到時間,更好的用戶體驗

2.異步與服務器通信,無需打斷用戶,響應更加迅速

3.可以把服務器的一些負擔轉(zhuǎn)到客戶端,利用客戶端閑置的能力來處理,減輕服務器和帶寬的負擔,節(jié)約空間和寬帶租用成本。并且減輕服務器的負擔,AJAX的原則是“按需取數(shù)據(jù)”,可以最大程度的減少冗余請求和響應對服務器造成的負擔,提升站點性能。

4.基于標準化,廣泛被支持

二:AJAX最大的特點是什么。Ajax可以實現(xiàn)動態(tài)刷新(局部刷新)頁面。就是能在不更新整個頁面的前提下維護數(shù)據(jù)。這使得Web應用程序更為迅捷地回應用戶動作,并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變過的信息。

七、ajax缺點

1.破壞了前進后退功能,用戶往往通過后退按鈕來取消上一步操作,但是使用ajax無法實現(xiàn)??梢允褂肎mail來解決這個問題,它只是采用的一個比較笨但是有效的辦法,即用戶單擊后退按鈕訪問歷史記錄時,通過創(chuàng)建或使用一個隱藏的IFRAME來重現(xiàn)頁面上的變更。

2.安全問題。ajax技術(shù)就如同對企業(yè)數(shù)據(jù)建立了一個直接通道。這使得開發(fā)者在不經(jīng)意間會暴露比以前更多的數(shù)據(jù)和服務器邏輯。ajax的邏輯可以對客戶端的安全掃描技術(shù)隱藏起來,允許黑客從遠端服務器上建立新的攻擊。還有自身受到如跨站腳本攻擊,SQL注入等攻擊。

3.對搜索引擎支持較弱

4.一些手持設(shè)備不能很好的支持等

八、json與jsonp的區(qū)別?

? Json:是一種輕量級的數(shù)據(jù)交換格式。它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小

Jsonp實現(xiàn)數(shù)據(jù)跨域傳輸?shù)囊环N手段

九、解釋jsonp的原理,以及為什么不是ajax

動態(tài)創(chuàng)建一個script標簽,利用script標簽src屬性訪問沒有限制,實現(xiàn)跨域。

九、實現(xiàn)原生ajax的四個步驟?

??(1)創(chuàng)建XHR對象

? ?var xhr = new XMLHttpRequest();

??(2)監(jiān)聽XHR的狀態(tài)改變

? ?xhr.onreadystatechange = function(){}

??(3)連接到Web服務器

? ?xhr.open(請求方法, URL, 是否為異步請求);

??(4)發(fā)送請求消息

?xhr.send( 請求主體 );

十、GET和POST的區(qū)別,何時使用POST?

GET:一般用于信息獲取

?POST:一般用于修改服務器上的資源

?(1) 傳遞給服務器端的參數(shù)的處理不同

????GET請求,參數(shù)跟在URL后面

????POST請求,參數(shù)放在請求體中提交

?(2) 參數(shù)的限制

????GET請求,對參數(shù)的大小和長度有限制

????POST請求,沒有限制

?(3) 安全性

????GET請求:安全性很差

????POST請求:相對安全

使用?POST 請求:

無法使用緩存文件(更新服務器上的文件或數(shù)據(jù)庫)

向服務器發(fā)送大量數(shù)據(jù)(POST 沒有數(shù)據(jù)量限制)

發(fā)送包含未知字符的用戶輸入時,POST 比 GET 更穩(wěn)定也更可靠

十一、http請求由三部分組成,分別是:請求行、消息報頭、請求正文

HTTP(超文本傳輸協(xié)議)是一個基于請求與響應模式的、無狀態(tài)的、應用層的協(xié)議,?;赥CP的連接方式,HTTP1.1版本中給出一種持續(xù)連接的機制,絕大多數(shù)的Web開發(fā),都是構(gòu)建在HTTP協(xié)議之上的Web應用。

簡歷面試題:

一.HTML5和CSS3新特性:

CSS3新特性:圓角border-radius,陰影 box-shadow,旋轉(zhuǎn)transform,動畫animation,過渡模塊transition,

HTML5新特性:視頻video ,音頻audio,畫布canvas,表單控件屬性data,url,email、file、time。新標簽footer,nav,header,section

二.對W3C的理解

1.?對于結(jié)構(gòu)要求:標簽閉合,標簽字母要小寫,標簽不要亂嵌套

2.對于css和js來說:使用外鏈css和js,結(jié)構(gòu),表現(xiàn),行為分離三塊,結(jié)構(gòu)清晰,提高頁面加載速度,用戶體驗提高

三.對Less理解

?Less語言是css的預處理器,動態(tài)性語言,可以聲明變量,存儲的值可以隨時調(diào)用,還可以值運算,函數(shù)等方式。

四.WebStorage和cookie的區(qū)別

?webStorage是html5的屬性,分別是sessionStorage和localStorage

相同點:都是保存在服務器端

1.存儲的大小不一樣,cookie存儲小,數(shù)量限制在20個,數(shù)據(jù)最多不能超過4k,webStorage存儲比較大,能達到5M或者更大。

2.共享方式,cookie在同源下只要沒過期就會一直共享,localStorage在同源中沒被刪除也會共享,sessionStorage在窗口關(guān)閉之前在同一個窗口同源下才會共享

3.cookie始終在同源的http請求中攜帶,而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)送給服務器,僅在本地保存

4.數(shù)據(jù)的有效期不一樣,?sessionStorage:僅在當前的瀏覽器窗口關(guān)閉有效

localStorage:始終有效,窗口或瀏覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù)

?Cookie:只在設(shè)置的cookie過期時間之前一直有效,即時窗口和瀏覽器關(guān)閉

五.你對ajax的理解

?Ajax是客戶端向服務器發(fā)送異步請求數(shù)據(jù)的一種技術(shù),從服務器獲取數(shù)據(jù),ajax不必刷新整個頁面,只需對局部頁面進行更新,提高頁面的加載速度,從而縮短用戶等待時間,改善用戶體驗。

Ajax優(yōu)點:

1.?無需刷新就可以更新數(shù)據(jù),減少用戶等待時間,更好的用戶體驗

2.?異步與服務器通信,無需打斷用戶,響應更加迅速

3.?可以把服務器端的一些負擔轉(zhuǎn)到客戶端,利用客戶端閑置的時間來處理。減去服務器的壓力

六.講一下MVVM和MVC模式

MVVM模式:

Model(數(shù)據(jù)模型)負責對數(shù)據(jù)的存和取,View(視圖負責頁面展示),ViewModel(視圖數(shù)據(jù)模型,負責業(yè)務邏輯處理),MVVM模式是通過視圖模型viewModel來實現(xiàn)連接,view和Model是通過viewModel實現(xiàn)數(shù)據(jù)雙向綁定,分離視圖和數(shù)據(jù)模型

優(yōu)點:1主要目的是分離視圖和模型

??????2降低代碼耦合度,提高視圖或者邏輯的復用性

??????3提高了模塊的可測試性

MVC模式:Model(模型)處理數(shù)據(jù),view(視圖)展示數(shù)據(jù)的界面,controller(控制器)鏈接模型和視圖的橋梁

MVC是一種業(yè)務邏輯,數(shù)據(jù),界面顯示分離的方法組織代碼,將業(yè)務邏輯聚集到一個部件里面,在改進界面及用戶交互的同時不需要重新編寫業(yè)務邏輯。實現(xiàn)分離數(shù)據(jù)模型和視圖的代碼。

優(yōu)點:低耦合,復用性高,可維護性高,分離視圖和模型

MVC和MVVM的區(qū)別:

?MVC的控制器變成MVVM的視圖模型,MVVM解決了MVC大量的DOM操作使頁面渲染性能降低,加載速度變慢,影響用戶體驗,當模型Model頻繁發(fā)生變化,開發(fā)者需要主動更新視圖,MVC的控制器不能直接改變視圖,視圖還要依賴于模型,所有MVVM解決了這些問題

七.SQL的理解

?SQL是結(jié)構(gòu)化查詢語言,是一種數(shù)據(jù)庫查詢語言,和數(shù)據(jù)庫通信的語言

八.MySQL的理解

?MySQL是關(guān)系型數(shù)據(jù)庫,特點:開源,免費,輕量,跨平臺

優(yōu)點:1.免費開源,節(jié)約成本

???????2.性能優(yōu)越,執(zhí)行速度非常快

???????3.操作簡單,學習成本低

???????4.應用廣泛

九.git的理解

?Git是構(gòu)建代碼管理工具,

優(yōu)點:1.適合分布式開發(fā),強調(diào)個體

??????2.公共服務器壓力和數(shù)據(jù)量都不會太大

??????3.速度快,靈活

??????4.任意兩個開發(fā)者之間可以很容易的解決沖突

??????5.離線工作

十.Git和svn的區(qū)別

?1.git是分布式的,svn不是

?2.git和svn的分支不同

?3.git的內(nèi)容完整性要高于svn

git和svn的區(qū)別是什么?

http://blog.csdn.net/saint1126/article/details/5953339

1.GIT是分布式的,SVN不是:

2.GIT把內(nèi)容按元數(shù)據(jù)方式存儲,而SVN是按文件:

3.GIT分支和SVN的分支不同:

4.GIT沒有一個全局的版本號,而SVN有:

5.GIT的內(nèi)容完整性要優(yōu)于SVN:

1.SVN優(yōu)缺點優(yōu)點:?1、管理方便,邏輯明確,符合一般人思維習慣。??2、易于管理,集中式服務器更能保證安全性。??3、代碼一致性非常高。??4、適合開發(fā)人數(shù)不多的項目開發(fā)。?缺點:?1、服務器壓力太大,數(shù)據(jù)庫容量暴增。??2、如果不能連接到服務器上,基本上不可以工作,看上面第二步,如果服務器不能連接 ??上,就不能提交,還原,對比等等。?3、不適合開源開發(fā)但 是一般集中式管理的有非常明確的權(quán)限管理機制(例如分支訪問限制),可以實現(xiàn)分層管理,從而很好的解決開發(fā)人數(shù)眾多的問題。

2.Git優(yōu)缺點優(yōu)點:1、適合分布式開發(fā),強調(diào)個體。?2、公共服務器壓力和數(shù)據(jù)量都不會太大。?3、速度快、靈活。?4、任意兩個開發(fā)者之間可以很容易的解決沖突。?5、離線工作。?缺點:1、學習周期相對而言比較長。?2、不符合常規(guī)思維。?3、代碼保密性差,一旦開發(fā)者把整個庫克隆下來就可以完全公開所有代碼和版本信息。

十一.Vue的理解

??Vue是一套用于構(gòu)建用戶界面的漸進式框架,可以為復雜的單頁面應用提供驅(qū)動,支持組件化,可以將頁面封裝成很多個組件,數(shù)據(jù)驅(qū)動加組件化的前端開發(fā),通過簡單的API實現(xiàn)響應式的數(shù)據(jù)綁定和組合的視圖組件,核心是關(guān)注視圖層,是一個構(gòu)建數(shù)據(jù)驅(qū)動頁面的一個框架,將數(shù)據(jù)綁定視圖上,vue提供數(shù)據(jù)和視圖雙向綁定原理使我們開發(fā)頁面更簡單,修改了數(shù)據(jù),視圖會自動更新。Vue是模塊化和組件化,如果頁面要更新數(shù)據(jù),在組件來修改就可以。

Vue有幾個特點:1簡潔2輕量3快速4模塊化5組件化6數(shù)據(jù)驅(qū)動

Vue組件的過程:組件可以提升整個項目的開發(fā)效率,能夠把頁面拆分為多個獨立的模塊,解決了效率低,難維護,復用性,等問題。

Vue的生命周期

生命周期就是鉤子函數(shù),主要是在什么時候來調(diào)用這些函數(shù),比如是在創(chuàng)建,掛載,更新,銷毀完成之后還是之前,初始化數(shù)據(jù)完成之前還是之后等

從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列

過程,我們稱這是?Vue 的生命周期

beforeCreate : 數(shù)據(jù)聲明還沒被調(diào)用時使用

created : vue渲染完畢后,所有數(shù)據(jù)和方法初始化后調(diào)用

mounted : 掛載元素之后

updated : 如果對數(shù)據(jù)統(tǒng)一處理,在這里寫上相應函數(shù)

beforeDestroy : 可以做一個確認停止事件的確認框

nextTick : 更新數(shù)據(jù)后立即操作dom

BeforeMount 掛載開始之前被調(diào)用

vue生命周期的作用是什么?

答:它的生命周期中有多個事件鉤子,讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。

第一次頁面加載會觸發(fā)哪幾個鉤子?

答:第一次頁面加載時會觸發(fā)?beforeCreate, created, beforeMount, mounted 這幾個鉤子


十二.jQuery的理解

?jQuery是一個輕量級的javascript框架,極大的簡化了js的編程。

1.首先jQuery提供了強大的元素選擇器。用于獲取html頁面中封裝了html元素的jQuery對象。像常見的選擇器有:基本選擇器,層次選擇器,過濾選擇器,表單選擇器。

2.第二點就是jQuery提供了對css樣式操作的支持,像對class屬性的增加刪除切換操作。還有對單個樣式操作的支持的css方法,提供了一種簡潔統(tǒng)一的操作樣式的方法。

3.第三點就是jQuery出色的DOM操作的封裝,極大的簡化了javascript的對dom節(jié)點的增刪改查操作,讓我們可以使用一種更加簡潔的方法來操作節(jié)點。

4.第四點就是jQuery還是一個為事件處理特點設(shè)計的框架,提供了靜態(tài)綁定事件和動態(tài)綁定事件,完善了事件的處理機制。

5.jQuery解決了大量瀏覽器之間的兼容性的問題。

6.jQuery極大的簡化ajax編程,提供了一種更加簡潔,統(tǒng)一的編程方式。

7.jQuery內(nèi)置了一些簡單有用的內(nèi)置動畫,像常見的slideDown/slideUp,hide/show,fadeIn/fadeOut等,還支持基于定位機制使用animate來自定義動畫效果。

十三:webpack和gulp的理解

Gulp 是一個任務管理工具,讓簡單的任務更清晰,讓復雜的任務易于掌控,對代碼進行構(gòu)建的工具

webpack是一個前端模塊化方案,更側(cè)重模塊打包,webpack是一款模塊加載兼打包工具,它可以將js、jsx、coffee、樣式sass、less,圖片等作為模塊來使用和處理。

十四:為什么離開上一家公司

?1.與自己的規(guī)劃不符合了,需要重新調(diào)整自己

?2.自己嘗試新的挑戰(zhàn)

十五、什么是?MVVM , mvp和?MVC 是什么區(qū)別, 原理是什么?

mvc的界面和邏輯關(guān)聯(lián)緊密,數(shù)據(jù)直接從數(shù)據(jù)庫讀取,必須通過Controller來承上啟下,通信都是單向的。mvvm的View 和 ViewModel可以互相通信,界面數(shù)據(jù)從viewmodel中獲取。

區(qū)別:mvc和mvvm都是一種設(shè)計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低,加載速度變慢,影響用戶體驗。和當 Model 頻繁發(fā)生變化,開發(fā)者需要主動更新到View 。

Mvc的實現(xiàn)視圖和模型的分離,避免了視圖和模型糅合在一起,當視圖改變的時候只要業(yè)務邏輯沒變就不需要改變模型,缺點控制器不能直接更新視圖,視圖依然依賴模型的數(shù)據(jù)來顯示

Mvp是針對mvc缺點進行改進,mvp分為模型,視圖,展示器。Mvp用展示器代替了控制器,展示器直接更新視圖,所以mvp的展示器可以處理視圖的請求并傳送到模型又可以根據(jù)模型的變化更新視圖,實現(xiàn)了視圖和模型的完全分離

Mvvm是mvp的進一步發(fā)展,完全實現(xiàn)視圖和模型的分離。Mvvm的視圖模型代替了mvp的展示器,視圖模型和視圖實現(xiàn)雙向綁定,當視圖發(fā)生變化的時候視圖模型也會改變,視圖模型變化的時候視圖也發(fā)生改變

十六、MVC的理解

用一種業(yè)務邏輯,數(shù)據(jù),界面顯示分離的方法組織代碼,將業(yè)務邏輯聚集到一個部件里面.在改進和個性化定制界面及用戶交互的同時不需要重新編寫業(yè)務邏輯,這種開發(fā)模式為合理組織代碼提供了方便、降低了代碼間的耦合度、功能結(jié)構(gòu)清晰可見

M模型(Model)一般用來處理數(shù)據(jù)(讀取/設(shè)置),一般指操作數(shù)據(jù)庫。

V視圖(View)一般用來展示數(shù)據(jù),比如通過HTML展示。

C控制器(Controller)一般用做連接模型和視圖的橋梁。

css面試題

一.描述基于class的選擇器與基于id選擇器在性能上的區(qū)別。

答:基于class的選擇性的性能相對于基于id選擇器開銷很大,因為其需要遍歷所有DOM元素。?

二、如何優(yōu)化網(wǎng)頁加載速度

1.??減少css,js文件數(shù)量及大小,壓縮css和js代碼

2.?圖片預加載

3.?把css放置頂部。把js放置在底部

4.?減少http請求

5.?使用外部文件js和css

6.?少用全局變量,緩存dom節(jié)點查找的結(jié)果

三、display:none和visibility:hidden的區(qū)別?

display:none ?隱藏對應的元素,在文檔布局不占據(jù)空間

visibility:hidden ?隱藏對應的元素,但是在文檔布局中仍保留原來的空間。

四、CSS中?link 和@import?的區(qū)別是?

(1) link屬于HTML標簽,而@import是CSS提供的;

(2) 頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;

(3) import只在IE5以上才能識別,而link是HTML標簽,無兼容問題;

(4) link方式的樣式的權(quán)重?高于@import的權(quán)重.

五、介紹一下CSS的盒子模型?

(1)有兩種,IE 盒子模型、標準 W3C 盒子模型;IE的content部分包含了border和padding;

(2)盒模型: 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).

六.解釋下浮動和它的工作原理

浮動元素不會占據(jù)文檔流

當浮動元素碰到包含它的元素的邊框或者其他浮動元素的邊框時會停留下來。

七、.?前端頁面有哪三層構(gòu)成,分別是什么?作用是什么?

?結(jié)構(gòu)層Html?表示層CSS?行為層?js

結(jié)構(gòu)層:對網(wǎng)頁內(nèi)容的語義含義做出了描述,

表示層:如何顯示有關(guān)內(nèi)容”的問題做出了回答。

?行為層:內(nèi)容應該如何對事件做出反應

八、標簽上title與alt屬性的區(qū)別是什么?

Alt?當圖片不顯示是?用文字代表。Title?為該屬性提供信息

九:簡述一下src與href的區(qū)別

href 是指向網(wǎng)絡(luò)資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接,用于超鏈接。

src是指向外部資源的位置,指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置;在請求src資源時會將其指向的資源下載并應用到文檔內(nèi),例如js腳本,img圖片和frame等元素。當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執(zhí)行完畢,圖片和框架等元素也如此,類似于將所指向資源嵌入當前標簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

十:對WEB標準以及W3C的理解與認識?????

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外?鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件,容易維 護、改版方便,不需要變動頁面內(nèi)容、提供打印版本而不需要復制內(nèi)容、提高網(wǎng)站易用性;

十一:語義化的理解?

??HTML語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化,便于對瀏覽器、搜索引擎解析;

??在沒有樣式CSS情況下也以一種文檔格式顯示,并且是容易閱讀的;

??搜索引擎的爬蟲依賴于標記來確定上下文和各個關(guān)鍵字的權(quán)重,利于SEO。

??使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護理解。

十二:前端頁面有哪三層構(gòu)成,分別是什么?作用是什么?

結(jié)構(gòu)層、表示層、行為層。

網(wǎng)頁的結(jié)構(gòu)層(structural layer)由HTML或XHTML之類的標記語言負責創(chuàng)建。

網(wǎng)頁的表示層(presentation layer)由CSS負責創(chuàng)建。?CSS對“如何顯示有關(guān)內(nèi)容”的問題做出了回答。

網(wǎng)頁的行為層(behavior layer)負責回答“內(nèi)容應該如何對事件做出反應

angular面試題

一。angular理解:

·使用AngularJS構(gòu)建應用時是以模塊化(Module)的方式組織的,即將整個應用劃分成若干模塊.每一個模塊完成一個特定的子功能,所有的模塊按某種方式組織起來,成為一個整體,完成整個系統(tǒng)所要求的功能.采用模塊化的組織方式,可以最大程度的實現(xiàn)代碼的復用

二、jQuery、vue、angular的區(qū)別

·(1)angular是一個mvc框架, ?采用model, controller以及view的方式去組織代碼, 會將一個html頁面分成若干個模塊, 每個模塊都有自己的scope, service, directive, 各個模塊之間也可以進行通信, 但是整體結(jié)構(gòu)上是比較清晰的, 就是說其代碼組織是模塊化的, angular的view可能僅僅是一個框架, , 對view的dom操作或者時間監(jiān)聽都是在directive中實現(xiàn)的, 而且一般情況下很少直接去寫dom操作代碼, 只要你監(jiān)聽model, model發(fā)生變化后view也會發(fā)生變化, 就是雙向綁定機制, angularjs適用于單頁面開發(fā)

(2)jQuery是使用選擇器($)選取DOM對象,對其進行賦值、取值、事件綁定等操作,

?(3)vue是一個漸進式的輕量級框架, 他核心只關(guān)注視圖層, 是一個構(gòu)建數(shù)據(jù)驅(qū)動的web界面,易于上手, 還便于與第三方庫或與既有項目整合,也能夠為復雜的單頁應用程序提供驅(qū)動, ?vue的話是模塊化和組塊化,如果頁面要更改數(shù)據(jù)之類的,就只在組件來修改就可以了,

三。Angular和jQuery的區(qū)別

jQuery只是一個類庫以DOM做為驅(qū)動(核心),jquery是基于操作DOM,?適用于操作DOM比較多的項目, jquery是一個庫,?比較大,兼容大部分瀏覽器,?有豐富的插件,?可拓展性強, jquery不能向后兼容,?使用插件時,可能會有沖突,?而AngularJS則一個框架(諸多類庫的集合)以數(shù)據(jù)和邏輯做為驅(qū)動(核心),包含模板和雙向數(shù)據(jù)綁定,?路由,?模塊化,?服務,?過濾器,?依賴注入等所有功能

四。jQuery和vue的區(qū)別

????1.jQuery首先要獲取到dom對象,然后對dom對象進行進行值的修改等操作2.Vue是首先把值和js對象進行綁定,然后修改js對象的值,Vue框架就會自動把dom的值就行更新。3.可以簡單的理解為Vue幫我們做了dom操作,我們以后用Vue就需要修改對象的值和做好元素和對象的綁定,Vue這個框架就會自動幫我們做好dom的相關(guān)操作

4.這種dom元素跟隨JS對象值的變化而變化叫做單向數(shù)據(jù)綁定,如果JS對象的值也跟隨著dom元素的值的變化而變化就叫做雙向數(shù)據(jù)綁定

五。angularJS和vue.js的區(qū)別

一angular是mvvm框架, 而vue是一個漸進式的框架, 相當于view層, 都有雙向數(shù)據(jù)綁定, ?但是angular中的雙向數(shù)據(jù)綁定是基于臟檢查機制, vue的雙向數(shù)據(jù)綁定是基于??ES5的getter和setter來實現(xiàn), 而angular是有自己實現(xiàn)一套模板編譯規(guī)則,vue比angular更輕量, 性能上更高效, 比angular更容易上手, 學習成本低, vue需要一個el對象進行實例化, 而angular是整個html頁面下的,單頁面應用, 而vue可以有過個vue實例

六。angularJS雙向數(shù)據(jù)綁定的原理?

監(jiān)視函數(shù)?$watch隊列

當我們?nèi)プ鰯?shù)據(jù)綁定時,ng框架會自動的給數(shù)據(jù)添加一個監(jiān)聽watcher,對應有一個回調(diào)當數(shù)據(jù)變化時,更新視圖

如果知道數(shù)據(jù)發(fā)生了變化?

ng會周期性的執(zhí)行一個函數(shù)來檢查模型數(shù)據(jù)是否發(fā)生了變化->$digest

什么時候會執(zhí)行$digest?

ngClick ngSrc常用的ng指令都會觸發(fā)$digest,也可以手工觸發(fā)$scope.$digest()

$scope.$apply();-->$rootScope.$digest()

七、Setinterval和$interval的區(qū)別?

?Setintercal 是js 提供的 不帶有自動輪訓功能,無法進行時刻改變dom數(shù)據(jù)

?只能手動添加$apply()或者$digest();

$interval是angularJS提供的一中服務,自帶dom數(shù)據(jù)也循環(huán)

談談你對webpack的看法

一。WebPack 是一個模塊打包工具,你可以使用WebPack管理你的模塊依賴,并編繹輸出模塊們所需的靜態(tài)文件。它能夠很好地管理、打包Web開發(fā)中所用到的HTML、JavaScript、CSS以及各種靜態(tài)文件(圖片、字體等),讓開發(fā)過程更加高效。對于不同類型的資源,webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關(guān)系,最后 生成了優(yōu)化且合并后的靜態(tài)資源。

二。Gulp 和webpack的區(qū)別

gulp強調(diào)的是前端開發(fā)的工作流程,我們可以通過配置一系列的task,定義task處理的事務(例如文件壓縮合并、雪碧圖、啟動server、版本控制等),然后定義執(zhí)行順序,來讓gulp執(zhí)行這些task,從而構(gòu)建項目的整個前端開發(fā)流程。webpack是一個前端模塊化方案,更側(cè)重模塊打包,我們可以把開發(fā)中的所有資源(圖片、js文件、css文件等)都看成模塊,通過loader(加載器)和plugins(插件)對資源進行處理,打包成符合生產(chǎn)環(huán)境部署的前端資源。

js面試題

一.描述垃圾回收器的功能。

答:垃圾回收器定期掃描對象,并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為0(沒有其他對象引用過該對象),或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的,那么該對象的內(nèi)存即可回收。

二.documen.write和innerHTML的區(qū)別?

答:document.write只能重繪整個頁面,innerHTML可以重繪頁面的一部分

三.那些操作會造成內(nèi)存泄漏?

答:

??給DOM對象添加的屬性是一個對象的引用。

??DOM對象與JS對象相互引用。

??給DOM對象用attachEvent綁定事件。

??從外到內(nèi)執(zhí)行appendChild,這時即使調(diào)用removeChild也無法釋放。

??反復重寫同一個屬性會造成內(nèi)存大量占用。

四.一句話說明內(nèi)存泄漏的定義。

答:內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。

五.eval是做什么的?

答:eval功能是把對應的字符串解析成JS代碼并運行;但不安全,非常耗性能。

六.null與undefined的區(qū)別?

答:Undefined類型只有一個值,即undefined,當聲明的變量還未被初始化時,變量的默認值為undefined。Null類型也只有一個值,即null,null用來表示尚未存在的對象,常用來表示函數(shù)企圖返回一個不存在的對象。?

七.談談對this對象的理解。

答:this是js的一個關(guān)鍵字,隨著函數(shù)使用場合不同,this的值會發(fā)生變化。但是有一個總原則,那就是this指的是調(diào)用函數(shù)的那個對象。

八.use strict是什么意思?

答:表示代碼標志為“嚴格模式”,則其中運行的所有代碼都必然是嚴格模式下的。如果在語法檢測時發(fā)現(xiàn)語法問題,則整個代碼塊失效,并導致一個語法異常。如果在運行期出現(xiàn)了違反嚴格模式的代碼,則拋出執(zhí)行異常。

九.簡述new操作符的功能。

答:

(1)創(chuàng)建一個空對象,使用this變量引用該對象,同時還繼承了該函數(shù)的原型

(2)屬性和方法被加入到this引用的對象中。

(3)新創(chuàng)建的對象由this所引用,并且最后隱式的返回this。?

十.描述typeof關(guān)鍵字的功能。

答:typeof可用來判斷一個變量是否為空或是什么類型的變量。typeof一般只能返回如下幾個結(jié)果:number、boolean、string、function、object、undefined。?

十一.描述instanceof關(guān)鍵字的功能。

答:instanceof可用來判斷一個變量是否為空或是什么類型的變量。如果想判斷一個變量是否某個對象的實例建議使用instanceof關(guān)鍵字。

十二.簡述hasOwnProperty函數(shù)的功能。

答:hasOwnProperty函數(shù)是用來判斷一個對象是否有你給出名稱的屬性或?qū)ο?。不過需要注意的是,此方法無法檢查該對象的原型鏈中是否具有該屬性,該屬性必須是對象本身的一個成員。?

十三.簡述一下isPrototypeOf函數(shù)的功能。

答:isPrototypeOf函數(shù)是用來判斷要檢查其原型鏈的對象是否存在于指定對象實例中,是則返回true,否則返回false。

十四.談談對JSON的了解。

答:JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。其是基于JavaScript的一個子集,具有數(shù)據(jù)格式簡單,易于讀寫,占用空間小的特點。

十五.描述一下context的概念。

答:context就是限定查找的范圍,context必須是一個DOM元素,context底層還是用了.find()方法來實現(xiàn)的。

十六.描述一下.delegate()和.live()方法的區(qū)別。

答:delegate方法指定了委托對象,live方法委托給了jQuery的context,1.9版本以后用on方法代替了。

十七.描述一下.attr()和.prop()方法的區(qū)別。

答:.attr()方法是操作屬性節(jié)點,.prop()方法是操作獲取到的對應js對象的屬性。在遇到要獲取或設(shè)置checked、selected、readonly和disabled等屬性時,用prop方法顯然更好。.prop()方法更高效,因為.attr()方法要訪問DOM。

十八。apply()與call()的區(qū)別?

功能一樣,?都是將當前函數(shù)作為指定對象的方法執(zhí)行,?即函數(shù)中的this是指定對象

參數(shù)不一樣,apply傳遞的參數(shù)是this和一個數(shù)組,call傳入的參數(shù)是this和一串參數(shù)列表

十九.JavaScript 中 this 是如何工作的。

?作為函數(shù)調(diào)用,this指向window

?外層函數(shù)對應的對象上,這是JavaScript的缺陷,用that替換。

?作為構(gòu)造函數(shù)使用,this 綁定到新創(chuàng)建的對象。

?作為對象方法使用,this 綁定到該對象。

?使用apply或call調(diào)用 this 將會被顯式設(shè)置為函數(shù)調(diào)用的第一個參數(shù)。

二十、十次完整的HTTP事務是怎樣一個過程

域名解析?--> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請求?--> 服務器響應http請求,瀏覽器得到html代碼?--> 瀏覽器解析html代碼,并請求html代碼中的資源(如js、css、圖片等) --> 瀏覽器對頁面進行渲染呈現(xiàn)給用戶

二十一、HTML5的離線儲存?

??localStorage ???長期存儲數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

??sessionStorage ?數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。

二十二、如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信?

調(diào)用localstorge、cookies等本地存儲方式

二十三、線程與進程的區(qū)別?

一個程序至少有一個進程,一個進程至少有一個線程.

線程的劃分尺度小于進程,使得多線程程序的并發(fā)性高。?

另外,進程在執(zhí)行過程中擁有獨立的內(nèi)存單元,而多個線程共享內(nèi)存,從而極大地提高了程序的運行效率。?

線程在執(zhí)行過程中與進程還是有區(qū)別的。每個獨立的線程有一個程序運行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨立執(zhí)行,必須依存在應用程序中,由應用程序提供多個線程執(zhí)行控制。?

從邏輯角度來看,多線程的意義在于一個應用程序中,有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應用,來實現(xiàn)進程的調(diào)度和管理以及資源分配。這就是進程和線程的重要區(qū)別。

二十四、js的全局函數(shù)有哪些,js的內(nèi)置對象有那些?分別各列舉5個

decodeURI() 解碼某個編碼的 URI。

decodeURIComponent() 解碼一個編碼的 URI 組件。

encodeURI() 把字符串編碼為 URI。

encodeURIComponent() 把字符串編碼為 URI 組件。

escape() 對字符串進行編碼。

eval() 計算 JavaScript 字符串,并把它作為腳本代碼來執(zhí)行。

getClass() 返回一個 JavaObject 的 JavaClass。

isFinite() 檢查某個值是否為有窮大的數(shù)。

isNaN() 檢查某個值是否是數(shù)字。

Number() 把對象的值轉(zhuǎn)換為數(shù)字。

parseFloat() 解析一個字符串并返回一個浮點數(shù)。

parseInt() 解析一個字符串并返回一個整數(shù)。

String() 把對象的值轉(zhuǎn)換為字符串。

unescape() 對由 escape() 編碼的字符串進行解碼。

二十五、哪些操作會造成內(nèi)存泄漏?

內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。

垃圾回收器定期掃描對象,并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為?0(沒有其他對象引用過該對象),或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的,那么該對象的內(nèi)存即可回收。

1. setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話,會引發(fā)內(nèi)存泄漏。

2. 閉包

3. 控制臺日志

4. 循環(huán)(在兩個對象彼此引用且彼此保留時,就會產(chǎn)生一個循環(huán))

二十六、DOM操作——怎樣添加、移除、移動、復制、創(chuàng)建和查找節(jié)點。

(1)創(chuàng)建新節(jié)點

?????? ?createDocumentFragment() ?//創(chuàng)建一個DOM片段

????? ?createElement() ??//創(chuàng)建一個具體的元素

???? ? ?createTextNode() ??//創(chuàng)建一個文本節(jié)點

(2)添加、移除、替換、插入

????? ?appendChild()

?????? ?removeChild()

?????? ?replaceChild()

???????????insertBefore() //在已有的子節(jié)點前插入一個新的子節(jié)點

(3)查找

????? ?getElementsByTagName() //通過標簽名稱

??getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強,會得到一個數(shù)組,其中包括id等于name值的)

??getElementById() //通過元素Id,唯一性

二十七:js的類型轉(zhuǎn)換,強制轉(zhuǎn)換和隱式轉(zhuǎn)換

顯示:toString()轉(zhuǎn)換為字符串

??parseInt()轉(zhuǎn)換為整數(shù)

parseFloat()轉(zhuǎn)換為浮點型數(shù)據(jù)

Number()如果轉(zhuǎn)換的內(nèi)容中包含非法字符,結(jié)果為 NaN

強制:Boolean(value) - 把給定的值轉(zhuǎn)換成 Boolean 型;

Number(value) - 把給定的值轉(zhuǎn)換成數(shù)字(可以是整數(shù)或浮點數(shù));

String(value) - 把給定的值轉(zhuǎn)換成字符串;

隱式:null,undefined,boolean,string,number,object。object是引用類型

二十八:簡述同步和異步的區(qū)別

同步是阻塞模式,異步是非阻塞模式。

同步就是指一個進程在執(zhí)行某個請求的時候,若該請求需要一段時間才能返回信息,那么這個進程將會一直等待下去,直到收到返回信息才繼續(xù)執(zhí)行下去;

異步是指進程不需要一直等下去,而是繼續(xù)執(zhí)行下面的操作,不管其他進程的狀態(tài)。當有消息返回時系統(tǒng)會通知進程進行處理,這樣可以提高執(zhí)行的效率。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進階之旅閱讀 115,506評論 24 450
  • 1.一些開放性題目 1.自我介紹:除了基本個人信息以外,面試官更想聽的是你與眾不同的地方和你的優(yōu)勢。 2.項目介紹...
    55lover閱讀 700評論 0 6
  • 【轉(zhuǎn)載】CSDN - 張林blog http://blog.csdn.net/XIAOZHUXMEN/articl...
    竿牘閱讀 3,577評論 1 14
  • 1.幾種基本數(shù)據(jù)類型?復雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型:Undefined、Nul...
    極樂君閱讀 5,868評論 0 106
  • 瑞雪兆豐年,期盼已久的雪終于來了雖不大但足夠讓人心情振奮,睡眠質(zhì)量一直不好昨晚上就聽見了北風吹但沒想到會下雪,早上...
    李潤澤媽媽閱讀 264評論 1 0

友情鏈接更多精彩內(nèi)容