1、移動(dòng)端你遇到過(guò)什么兼容問(wèn)題?

1、如果在input設(shè)置邊框顏色在ios系統(tǒng)里會(huì)出現(xiàn)兼容性問(wèn)題，需要在外面加一個(gè)div設(shè)置div的邊框代替input邊框。
2、文字溢出，用overflow:auto做滾動(dòng)條在ios上面會(huì)卡頓，需要用iscroll解決。
3、防止手機(jī)中網(wǎng)頁(yè)放大和縮小。
4、禁用自動(dòng)匹配手機(jī)號(hào)、地址、email。
5、用好rem和css3的媒體查詢解決適配問(wèn)題。
6、ios和android下觸摸元素時(shí)出現(xiàn)半透明灰色遮罩。用 -webkit-tap-highlight-color:rgba(255,255,255,0)解決。
7、iphone及ipad下輸入框默認(rèn)內(nèi)陰影。用-webkit-appearance:none;解決。
8、移動(dòng)端點(diǎn)擊穿透問(wèn)題。盡量不用要touch事件，用click事件，然后防止冒泡就事件可以了

2、http和https的區(qū)別？

http是超文本傳輸協(xié)議。用于Web瀏覽器和網(wǎng)站服務(wù)器之間傳遞信息。
https是以安全為目標(biāo)的HTTP通道，簡(jiǎn)單講是HTTP的安全版，即HTTP下加入SSL層，HTTPS的安全基礎(chǔ)是SSL，因此加密的詳細(xì)內(nèi)容就需要SSL?？梢苑乐棺グ膯?wèn)題，一般做接口都是使用https。

3、如何提高網(wǎng)頁(yè)性能？

1、用圖片懶加載減少請(qǐng)求數(shù)。
2、用好偽元素降低標(biāo)簽的數(shù)量。
3、不要有冗余代碼。
4、用好打包合并壓縮工具，將css、js文件合并壓縮，減少請(qǐng)求數(shù)。常見(jiàn)的工具：grunt、gulp、webpack。最強(qiáng)大的合并壓縮工具：grunt。

4、移動(dòng)端的適配怎么做？

最常用的就是rem和css3媒體查詢。

5、什么是閉包？在開(kāi)發(fā)項(xiàng)目時(shí)什么地方用閉包？

閉包就是父函數(shù)給子函數(shù)傳值，解決作用域問(wèn)題。比如做一個(gè)隨機(jī)抽題功能、選項(xiàng)卡、幻燈片等。一般用setInterval的地方用的比較多。

6、說(shuō)說(shuō)對(duì)象的繼承？

我一般都用call、apply、bind做繼承，bind指向?qū)ο蟊旧怼?/p>

7、jquery的優(yōu)點(diǎn)？

簡(jiǎn)單易用，尤其是對(duì)dom的操作很方便。

8、調(diào)試是怎么做的？

用chrome的開(kāi)發(fā)者工具調(diào)試，console.log，alert等。

9、本地存儲(chǔ)localStorage與sessionStorage的區(qū)別，都在什么地方使用？

localStorage關(guān)閉瀏覽器還是可以保存記錄。sessionStorage關(guān)閉瀏覽器后數(shù)據(jù)消失。用在會(huì)員登錄后保存狀態(tài)，購(gòu)物車等地方。

10、訂單支付怎么實(shí)現(xiàn)？

1、登錄會(huì)員。
2、進(jìn)入商品頁(yè)面。
3、將商品放入購(gòu)物車。
4、提交訂單。
5、對(duì)接支付寶或微信支付進(jìn)行支付。

11、DOM執(zhí)行事件流程?

1、捕獲階段：先由文檔的根節(jié)點(diǎn)document往事件觸發(fā)對(duì)象，從外向內(nèi)捕獲事件對(duì)象；
2、目標(biāo)階段：到達(dá)目標(biāo)事件位置（事發(fā)地），觸發(fā)事件；
3、冒泡階段：再?gòu)哪繕?biāo)事件位置往文檔的根節(jié)點(diǎn)方向回溯，從內(nèi)向外冒泡事件對(duì)象。

12、scss和sass，less區(qū)別?

Sass (Syntactically Awesome Stylesheets)是一種動(dòng)態(tài)樣式語(yǔ)言，Sass語(yǔ)法屬于縮排語(yǔ)法，比css比多出好些功能(如變量、嵌套、運(yùn)算,混入(Mixin)、繼承、顏色處理，函數(shù)等)，更容易閱讀。Sass 3就變成了Scss(sassy css)。與原來(lái)的語(yǔ)法兼容，只是用{}取代了原來(lái)的縮進(jìn)。Less也是一種動(dòng)態(tài)樣式語(yǔ)言. 對(duì)CSS賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量，繼承，運(yùn)算， 函數(shù). Less 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可在服務(wù)端運(yùn)行 (借助 Node.js)。區(qū)別：1.編譯環(huán)境不一樣。Sass的安裝需要Ruby環(huán)境，是在服務(wù)端處理的，而Less是需要引入less.js來(lái)處理Less代碼輸出css到瀏覽器，也可以在開(kāi)發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放到項(xiàng)目中。2.變量符不一樣，Less是@，而Scss是$，而且變量的作用域也不一樣。3.輸出設(shè)置，Less沒(méi)有輸出設(shè)置，Sass提供4中輸出選項(xiàng)：nested（嵌套縮進(jìn)的css代碼）, compact（展開(kāi)的多行css代碼）, compressed （簡(jiǎn)潔格式的css代碼）和 expanded（壓縮后的css代碼）。

13、偽類和偽元素的區(qū)別?

偽類用于向某些選擇器添加特殊的效果，比如：:hover，:foucs，：link，:active，:vistied，:first-child，:lang。偽元素用于將特殊的效果添加到某些選擇器，比如:berfor，:after，:first-letter，:first-line。

14、多維數(shù)組如何實(shí)現(xiàn)扁平化處理?

1、常規(guī)就是循環(huán)和遞歸 。2、使用es的展開(kāi)符。。。

15、jsonp的實(shí)現(xiàn)原理?

就是動(dòng)態(tài)生成一個(gè)script標(biāo)簽。然后通過(guò)script的src加載地址，同時(shí)根據(jù)callback返回函數(shù)里面獲取數(shù)據(jù)，這樣就的需要后臺(tái)接口返回的時(shí)候返回一個(gè)帶變量的數(shù)據(jù)

16、什么樣的網(wǎng)站適合作響應(yīng)式？

功能不是很復(fù)雜的網(wǎng)站，設(shè)計(jì)排版簡(jiǎn)單的網(wǎng)站適合。比如公司官網(wǎng)，界面清晰的視頻網(wǎng)站等。

17、說(shuō)一下git遇到?jīng)_突如何解決？

1、pull一下，更新程序。
2、同步，查看沖突代碼。
3、人工修改，保持本地最新版。
4、Add to Git Index，提交修改。
5、Commit提交。
6、push推送到服務(wù)器

18、前端工作流程？

1、拿到原型圖和產(chǎn)品經(jīng)理溝通業(yè)務(wù)需求。
2、拿到設(shè)計(jì)稿先規(guī)劃一下思路然后切圖布局。
3、寫出js效果。
4、拿到后端的接口文檔測(cè)試一下接口是否可用。
5、對(duì)接數(shù)據(jù)渲染到頁(yè)面。

19、tap事件原理？

在移動(dòng)端中,由于兩次觸摸是放大操作,,所以當(dāng)你點(diǎn)擊一次的時(shí)候,瀏覽器會(huì)等待300ms,看用戶是否會(huì)進(jìn)行第二次點(diǎn)擊,如果沒(méi)有的話,才會(huì)執(zhí)行點(diǎn)擊事件,tap事件的原理其實(shí)是源于觸摸touch事件,在移動(dòng)觸摸事件就是在同個(gè)點(diǎn)觸發(fā),及touchmove的距離距離touchstar的距離為0,并且點(diǎn)擊的時(shí)間不超過(guò)某個(gè)設(shè)定的時(shí)間值,超過(guò)該時(shí)間值的話,就屬于長(zhǎng)按了

20、懶加載原理？

一般來(lái)講，給圖片src配置一個(gè)假的地址，同事給添加一個(gè)data-url屬性指向真是url地址，當(dāng)圖片快要顯示的時(shí)候?qū)rl地址替換成data-url的屬性

21、移動(dòng)端的fastclick怎么實(shí)際使用？

引入fastclick.js插件。然后Fastclick.attech（document.body）中

22、公司的測(cè)試是怎么向你提bug的？他是怎么記錄的？

寫一個(gè)文檔圖文并茂的形式給我。邊測(cè)試邊記錄。

23、原生ajax的步驟?

5個(gè)步驟，
1、構(gòu)建xmlHttpRequest對(duì)象。
2 、準(zhǔn)備請(qǐng)求open。
3、send發(fā)送數(shù)據(jù)。
4 、等待數(shù)據(jù) 。
5 、成功接受數(shù)據(jù)

24、get和post區(qū)別是什么?

1、本質(zhì)區(qū)別 一個(gè)用來(lái)提交數(shù)據(jù)，一個(gè)用來(lái)獲取數(shù)據(jù)。
2、 傳參方式區(qū)別 。
3、 安全性 。
4 、傳參數(shù)數(shù)據(jù)大小

25、有幾種方法可以改變this指向?

1、call apply bind 。
2、可以提出箭頭函數(shù)

26、說(shuō)一下你有幾種讓子盒子居中的方法?

1、flex
2、定位各50%，然后tranfrom:translate(-50%)
3、定位 然后上下左右都是0 margin auto

27、vue-router的原理？catch方法的實(shí)現(xiàn)原理?

用戶通過(guò)vue的router.push和router.replace來(lái)修改地址欄。同時(shí)監(jiān)控地址欄。獲取到對(duì)應(yīng)組件，去配置信息里面尋找對(duì)應(yīng)的頁(yè)面顯示

28、git和svn的區(qū)別?

一個(gè)是集中式管理，一個(gè)分布式管理

29、vue計(jì)算屬性和watch的區(qū)別?

計(jì)算屬性是為了檢測(cè)某個(gè)屬性。而這個(gè)屬性是由別的變量覺(jué)定的，核心在計(jì)算，watch是監(jiān)控，主要是用來(lái)某個(gè)變量發(fā)生變化導(dǎo)致別的觸發(fā)來(lái)使用，計(jì)算屬性中的變量不需要在data里面初始化

30、vue的優(yōu)勢(shì)為什么使用vue?

vue是單頁(yè)面應(yīng)用，使頁(yè)面局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，這樣大大加快了訪問(wèn)速度和提升用戶體驗(yàn)。而且他的第三方ui庫(kù)很多節(jié)省開(kāi)發(fā)時(shí)間。

31、mvvm是什么?

把Model和View關(guān)聯(lián)起來(lái)的就是ViewModel。ViewModel負(fù)責(zé)把Model的數(shù)據(jù)同步到View顯示出來(lái)，還負(fù)責(zé)把View的修改同步回Model。就是model->view->view->model

32、vuex實(shí)現(xiàn)原理?

Store，負(fù)責(zé)管理整個(gè)數(shù)據(jù)訪問(wèn)、修改等； 提高API；getter.xxx，怎么可以每次拿到最新數(shù)據(jù)？，action和mutation負(fù)責(zé)提交數(shù)據(jù)。

33、vue Seo優(yōu)化?

vue默認(rèn)不支持seo優(yōu)化因?yàn)槭菃雾?yè)面應(yīng)用，數(shù)據(jù)也是用ajax讀取，無(wú)法友好的讓搜索引擎抓取，所以無(wú)法獲取排名，需要用服務(wù)端渲染Nuxt.js來(lái)解決，但是這樣開(kāi)發(fā)成本太大，建議如果考慮seo的話就不要使用前端框架，用傳統(tǒng)的h5開(kāi)發(fā)即可。

34、vue服務(wù)端渲染?

建議使用nuxt.js,因此可以在服務(wù)端可以提前渲染出來(lái)，解決了單頁(yè)面一直存在的問(wèn)題：SEO和初次加載耗時(shí)較多的問(wèn)題。

35、es6和es5的區(qū)別?

說(shuō)出ES6的特點(diǎn)：
1、let const。
2 、字符串模板 。
3 、promise 。
4 、class。
5、箭頭函數(shù)。
6、解析結(jié)構(gòu)。
7、數(shù)組和對(duì)象的新方法 ，比如 set assign。

36、webpack按需加載?

使用require.ensure做頁(yè)面分割按需加載。

37、你常用的loader加載器有哪些?

一般在vue的webpack中配置，常見(jiàn)的'style-loader'css-loader less-loader babel-loader(解析ES6) json-loader vue-loader

38、怎么理解promise（語(yǔ)法糖）?

Promise 是異步編程的一種解決方案，new Promise(function(resolve,reject){
if(/異步操作成功/){
resolve(value);
}else{
reject(error);
}
})或者通過(guò)生成對(duì)象后通過(guò)then的方法

39、如何實(shí)現(xiàn)異步編程，有哪些方式?

現(xiàn)在比較常用的是promise。解釋一下promise.原來(lái)比較多的是通過(guò)回調(diào)函數(shù)或者事件監(jiān)聽(tīng)

40、解釋一下什么是vue實(shí)例

類似創(chuàng)建一個(gè)vue對(duì)象。里面包含鉤子函數(shù)，data,methods.computeds等

41、vue組件有多少個(gè)生命周期？

11個(gè)，建議不要說(shuō)個(gè)數(shù)，說(shuō)出8個(gè)常見(jiàn)的和后來(lái)加的

42、vue組件之間傳遞數(shù)據(jù)怎么實(shí)現(xiàn)，區(qū)別是什么？

1、分父子組件如何傳值。
2、 使用vuex。
3、事件總線bus。
4、本地存儲(chǔ)傳值。

43、在開(kāi)發(fā)中怎么與后臺(tái)合作的？

1、通過(guò)接口文檔拿到j(luò)son數(shù)據(jù)。
2、用ajax將數(shù)據(jù)渲染到頁(yè)面。

44、vue數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理?

是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。

45、nodejs了解嗎？

了解。一般我用來(lái)配合mongodb開(kāi)發(fā)一些小的接口,和使用他的npm 命令，主要用nodejs做中間件。

46、數(shù)組排序有哪些方式？

js自帶sort(function(a,b)return a-b)方法,或者手動(dòng)寫冒泡或者快速排序

47、用css如何實(shí)現(xiàn)左側(cè)寬度固定，右側(cè)寬度自適應(yīng)?

1、flex布局。
2、margin配合float實(shí)現(xiàn)。
3、使用calc計(jì)算屬性。

48、技術(shù)團(tuán)隊(duì)人員分配?

如果是小型項(xiàng)目：一個(gè)產(chǎn)品經(jīng)理、一個(gè)設(shè)計(jì)師、一個(gè)前端工程師、一個(gè)后端工程師總共4個(gè)人。

49、如何開(kāi)發(fā)響應(yīng)式網(wǎng)站開(kāi)發(fā)？

傳統(tǒng)使用boostrap.boostrap也是基于媒體查詢來(lái)實(shí)現(xiàn)響應(yīng)式的，第二，注意使用百分比或者rem布局

50、js數(shù)據(jù)類型有哪些？

6種數(shù)據(jù)類型：string、number、boolean、object、undefined、array。ES6中新加symbol。

51、父盒子高度自適應(yīng)，里面的文字行高如何自適應(yīng)?

1、使用rem或者em來(lái)設(shè)置文字大小，em和rem是相對(duì)單位。
2、使用js獲取父元素高度來(lái)設(shè)置子元素文字。

52、在工作中如何配合安卓和ios開(kāi)發(fā)工程師?

基本上通過(guò)webview來(lái)實(shí)現(xiàn)安卓或者ios對(duì)js的交互

53、項(xiàng)目結(jié)構(gòu)是如何搭建的？

現(xiàn)在基本上使用vue腳手架來(lái)搭建結(jié)構(gòu)，手動(dòng)搭建過(guò)程是npm init初始化結(jié)構(gòu)，配置webpackjson和git倉(cāng)庫(kù)，還有安裝依賴，創(chuàng)建static.view等對(duì)應(yīng)文件夾并開(kāi)始編寫代碼

54、常用的瀏覽器有那些？

谷歌。webkit 火狐gecko IE trident

55、漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)?

漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí) graceful degradation：一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。

56、常用的dom的操作方法?

創(chuàng)建節(jié)點(diǎn)，節(jié)點(diǎn)克隆，替換，刪除，節(jié)點(diǎn)屬性的操作

57、事件代理的原理?

基于事件冒泡

58、前端安全問(wèn)題?

1、xss攻擊。
2、防止sql注入。
3、文件上傳漏洞 預(yù)防方法就是前端對(duì)所有用戶輸入的信息都需要驗(yàn)證，且后端也得需要驗(yàn)證。
4、防短信轟炸，用圖文驗(yàn)證碼解決。
5、會(huì)員登錄是的cookie欺騙，用token解決。

59、jquery的優(yōu)化方法?

1、選擇器要用對(duì)，理論上ID選擇器是最快的，學(xué)會(huì)使用緩存JQ對(duì)象
2、盡量減少dom操作。比如對(duì)某個(gè)元素插入數(shù)據(jù)的時(shí)候，先把數(shù)據(jù)都弄好一次性插入
3、 不要直接使用事件，通過(guò)綁定on的方法加事件
4 、學(xué)會(huì)使用鏈?zhǔn)綄懛?/p>

60、jquery添加插件?

兩種開(kāi)發(fā)模式，第一種是基于函數(shù)的函數(shù)，jQuery.extend。第二種是對(duì)象級(jí)別的插件開(kāi)發(fā)$.fn.extend.

61、是否設(shè)計(jì)過(guò)通用的組件?

設(shè)計(jì)過(guò)，比如：toast，下拉加載，購(gòu)物車等。

62、平時(shí)是如何學(xué)習(xí)的?

1、看技術(shù)文檔。
2、去github上下載開(kāi)源代碼讀代碼。
3、網(wǎng)上找些視頻來(lái)學(xué)習(xí)。

63、項(xiàng)目中負(fù)責(zé)了什么?

作為一個(gè)前端，首先是項(xiàng)目的頁(yè)面和數(shù)據(jù)展示，有時(shí)候處理不同設(shè)備的兼容，再就是處理頁(yè)面之間和數(shù)據(jù)之間的邏輯關(guān)系，提高用戶體驗(yàn)

64、自己的職業(yè)規(guī)劃?

我目前規(guī)劃是基于當(dāng)前目標(biāo)，先努力扎實(shí)自己的基礎(chǔ)，尤其前端這個(gè)行業(yè)日新月異，基于基礎(chǔ)然后向架構(gòu)方向發(fā)展

65、除了前端還會(huì)其他的嗎？

因?yàn)樯霞夜局饕蠖苏Z(yǔ)言是PHP，所以一些基本的PHP代碼可以閱讀，當(dāng)然，現(xiàn)在我對(duì)nodejs也有一定的研究

66、給你一個(gè)5個(gè)頁(yè)面的網(wǎng)站多長(zhǎng)時(shí)間能做完?

這個(gè)的看頁(yè)面的交互和數(shù)據(jù)情況，一般來(lái)說(shuō)，基本靜態(tài)頁(yè)面完成起來(lái)是很快的，更多側(cè)重?cái)?shù)據(jù)交互和也沒(méi)面功能測(cè)試，有時(shí)候可能在一些特效動(dòng)畫上耗費(fèi)點(diǎn)時(shí)間

67、了解過(guò)模版引擎嗎？

使用過(guò)templat.js和Dot.js。就是獲取到數(shù)據(jù)快速完成數(shù)據(jù)渲染的過(guò)程，節(jié)省代碼量。提高維護(hù)性，減少 拼接字符串，這樣也優(yōu)化的性能

68、項(xiàng)目上線是如何操作的？

正式服務(wù)器接口測(cè)試--合并分支-回歸測(cè)試--檢查線上服務(wù)器權(quán)限-數(shù)據(jù)是否清空- 上線包檢查并發(fā)布-灰度測(cè)試-維護(hù)

69、vue中watch和computed的區(qū)別?

watch主要作用是監(jiān)聽(tīng)路由變化。Computed主要是做計(jì)算方法。

70、開(kāi)發(fā)項(xiàng)目的流程是什么？

1、和產(chǎn)品經(jīng)理溝通確認(rèn)需求。
2、拿到設(shè)計(jì)稿開(kāi)始切圖。
3、開(kāi)始布局寫頁(yè)面和js效果。
4、和后臺(tái)對(duì)接數(shù)據(jù)。

71、公司有沒(méi)有強(qiáng)制使用eslint等代碼檢測(cè)工具？

沒(méi)有強(qiáng)制使用，但是也讓使用，防止冗余代碼的出現(xiàn)尤其對(duì)新手比較重要。

72、項(xiàng)目開(kāi)發(fā)時(shí)是怎么進(jìn)行項(xiàng)目自測(cè)？

邊開(kāi)發(fā)邊測(cè)試，做一個(gè)功能測(cè)試一個(gè)，如果出現(xiàn)bug就用調(diào)試工具，如果調(diào)試工具提示的不詳細(xì)，就用排除法來(lái)調(diào)試。

73、h5及c3新增的一些內(nèi)容？

h5新增主要功能如下：
1、video視頻。
2、audio音頻。
3、websocket。
4、history api。
5、canvas。
6、geolocation地理位置。
7、拖拽事件。
8、localStorage。
9、sessionStorage

74、移動(dòng)端如果做多終端的適配？（各主流手機(jī) ，pad，電腦）

1、可以用bootstrap。
2、用css3的媒體查詢。
3、使用rem

75、使用angular vue react框架做過(guò)那些類型的項(xiàng)目？項(xiàng)目有多大？遇到過(guò)那些棘手的bug？

angular現(xiàn)在市場(chǎng)小，沒(méi)有用它做過(guò)大型項(xiàng)目，我現(xiàn)在主要用vue、react來(lái)做開(kāi)發(fā)。做過(guò)電商、在線教育等移動(dòng)端web和app。棘手的Bug：做微信分享時(shí)與后臺(tái)對(duì)接簽名的問(wèn)題，用vue做websocket時(shí)第一次訪問(wèn)和服務(wù)端通信，跳轉(zhuǎn)其他頁(yè)面后依然保持連接沒(méi)有斷開(kāi)，會(huì)造成下次訪問(wèn)再次創(chuàng)建連接，發(fā)送消息是出現(xiàn)兩次以上同樣的信息，解決方案，在跳轉(zhuǎn)頁(yè)面時(shí)，需要在鉤子方法beforeDestroy ()里面關(guān)閉websocket即可。

76、jquery和zepto有什么區(qū)別？ 他倆對(duì)于現(xiàn)在的mv*框架及react這種專注視圖層的框架有什么區(qū)別？

jquery體積比較大適合pc端，zepto體積適合移動(dòng)端，zepto封裝了h5的touch事件

77、ajax和fetch有什么區(qū)別？jsonp是解決跨域的，還了解過(guò)哪些并實(shí)際使用過(guò)哪些跨域的解決方法？

ajax是用XMLHttpRequest，fetch是用promise。配置服務(wù)器增加Access-Control-Allow-Origin:*。利用websocket也可解決。

78、你跟后端交互的時(shí)候需要注意那些問(wèn)題？后端開(kāi)發(fā)的接口字段是如何定出來(lái)的？后端開(kāi)發(fā)的接口字段里面 你認(rèn)為必須要有的是什么？

1、跨域問(wèn)題。
2、請(qǐng)求類型比如：post、get。
3、是否有必填字段，字段類型；是根據(jù)業(yè)務(wù)需求、頁(yè)面設(shè)計(jì)定制出來(lái)的；如果是用戶登錄接口，要有用戶名和密碼字段。如果是文章列表要有id,title,image等字段。

79、你了解過(guò)那些模塊化規(guī)范？模塊化開(kāi)發(fā)有什么好處？他和組件化有什么區(qū)別？

CommonJS和requireJS；比如CommonJS規(guī)范：一個(gè)單獨(dú)的文件就是一個(gè)模塊，每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，用import導(dǎo)入，用module.exports導(dǎo)出，可以做到按需加載，避免冗余代碼的產(chǎn)生。AMD，requireJS解決js文件過(guò)多瀏覽器停止頁(yè)面渲染?？梢宰龅桨葱杓虞d；模塊化是一種編程思想，可以做到按需加載。組件化是自己封裝的公共組件方便多次使用。

80、gulp，grunt，webpack這些工具的區(qū)別？

gulp和webpack是單頁(yè)面應(yīng)用的構(gòu)建工具，目前webpack被vue，react廣泛使用。Grunt是專業(yè)的代碼合并、壓縮工具用于傳統(tǒng)的h5頁(yè)面開(kāi)發(fā)使用。

81、你們公司代碼是怎么管理的？ git svn及提交流程

主要用git，小項(xiàng)目用svn；git提交流程：
1、先拉取pull。
2、選擇要提交的問(wèn)題add。
3、提交文件commit。
4、推送到服務(wù)端主分支push。svn提交流程：1、先更新。2、再提交。

82、對(duì)node了解多少？你使用過(guò)什么？覺(jué)得nodejs對(duì)于前端來(lái)說(shuō)最大的作用是什么？

會(huì)用express可以對(duì)mysql、mongodb進(jìn)行增、刪、改、查；node可以做為中間件使用，對(duì)一些nosql操作比較好比如mongodb。如果用react做服務(wù)端渲染可以使用node的express來(lái)做中間件使用。

83、說(shuō)下圖片上傳是如何實(shí)現(xiàn)的？

拿到服務(wù)端的圖片上傳接口。方法一：可以用jquery的jquery.form.js上傳。方法二：可以用axios上傳。方法三：可以用ajax配合h5的FormData來(lái)上傳圖片。然后服務(wù)端會(huì)返回圖片名，將圖片名提交到數(shù)據(jù)庫(kù)

84、后臺(tái)管理系統(tǒng)開(kāi)發(fā)的過(guò)程中你認(rèn)為需要注意的地方有哪些？

1、安全性。
2、業(yè)務(wù)流程。
3、搭建好目錄結(jié)構(gòu)，功能模塊化。
4、權(quán)限角色分配。

85、ie火狐谷歌瀏覽器的兼容問(wèn)題是如何解決的？

如果用float布局做好清除浮動(dòng)，在公共樣式里設(shè)置margin:0px;padding:0px;。如果子元素有float那么父元素用overflow:hidden清除浮動(dòng)。

86、Vue組件通訊的實(shí)現(xiàn)方法有哪些？

1、父組件向子組件傳值。
2、子組件向父組件傳值。
3、用vuex傳值。

87、vuex中action和mutation分別用來(lái)處理什么？

action處理異步數(shù)據(jù)最終提交到數(shù)據(jù)庫(kù)，mutation用來(lái)同步數(shù)據(jù)做業(yè)務(wù)的處理。

88、封裝針對(duì)自己公司需求的數(shù)據(jù)請(qǐng)求方法有什么好處？怎么封裝？

封裝后方便重用和維護(hù)，如果是原生js用面向?qū)ο蠓庋b，用jquery封裝成插件，用vue或是react封裝成組件。

89、使用過(guò)那些css預(yù)處理？說(shuō)下他的優(yōu)缺點(diǎn)？

使用過(guò)less、sass。less簡(jiǎn)單,易上手;屬于css的基礎(chǔ)拓展；sass 復(fù)雜,功能強(qiáng)大,更加豐富的拓展;沒(méi)有特別的優(yōu)缺點(diǎn)，自己喜歡什么就選擇什么，有的時(shí)候什么都不選擇就用css就行了。

90、移動(dòng)端項(xiàng)目如何解決300ms延遲問(wèn)題？

使用fastclick解決ios的300ms延遲問(wèn)題

91、better-scroll做過(guò)那些需求？

1、下拉刷新。
2、上拉加載。
3、內(nèi)容溢出出現(xiàn)滾動(dòng)條滑動(dòng)解決卡頓問(wèn)題。

92、使用過(guò)百度地圖嗎？使用過(guò)echarts？

使用過(guò)，比如獲取用戶經(jīng)度和緯度，對(duì)接百度地圖顯示用戶在地圖里顯示的位置。Echarts我一般在后臺(tái)做活躍度、用戶訪問(wèn)量統(tǒng)計(jì)圖。

93、react定義組件的方法有哪些？區(qū)別是什么？

1、無(wú)狀態(tài)函數(shù)式組件。
2、es5原生方式React.createClass定義的組件。
3、es6形式的extends React.Component定義的組件。最大的區(qū)別就是現(xiàn)在都用es6前面兩種慢慢的被淘汰不需要使用了。

94、說(shuō)說(shuō)redux和vuex的不同？

Vuex：有自動(dòng)渲染的功能，所以不需要更新。Redux：一個(gè)子組件的狀態(tài)必須通過(guò)父組件傳遞過(guò)來(lái)，父組件從倉(cāng)庫(kù)統(tǒng)一調(diào)控，當(dāng)一個(gè)組件相關(guān)數(shù)據(jù)更新時(shí)，即使你的父組件不需要這個(gè)組件，它還是會(huì)自動(dòng)更新。

95、redux需要注意的問(wèn)題有哪些？

入口文件，路由文件要分配好，主倉(cāng)庫(kù)分配給各個(gè)組件，獲取值需要用connect將redux與類關(guān)聯(lián)起來(lái)。

96、redux和router開(kāi)發(fā)的時(shí)候遇到過(guò)那些問(wèn)題？怎么解決的？

redux的問(wèn)題就是頁(yè)面刷新后無(wú)法保存數(shù)據(jù)，需要用localStorage來(lái)配合解決。Router在子組件里會(huì)出現(xiàn)跳轉(zhuǎn)的問(wèn)題，使用withRouter來(lái)解決。

97、react+redux開(kāi)發(fā)項(xiàng)目的時(shí)候數(shù)據(jù)請(qǐng)求這塊如何分配？

比如做會(huì)員登錄時(shí)，會(huì)員的信息記錄到redux中。在做購(gòu)物車是也需要把數(shù)據(jù)記錄在redux中。

98、大型的前端構(gòu)建項(xiàng)目，本地打包和編譯的時(shí)候如何區(qū)別開(kāi)發(fā)和生產(chǎn)環(huán)境

通過(guò)變量來(lái)區(qū)分：export NODE_ENV="development"是開(kāi)發(fā)環(huán)境。export NODE_ENV="production"是生產(chǎn)環(huán)境。

99、看過(guò)jquery源碼嗎？你說(shuō)說(shuō)jquery的底層實(shí)現(xiàn)原理。

看過(guò)；比如：("#name")就是原生js的document.getElementById("name")。(function(){})實(shí)現(xiàn)原理是監(jiān)聽(tīng)DOMContentListener(兼容火狐和谷歌等瀏覽器)和onreadystatechange(兼容ie瀏覽器)實(shí)現(xiàn)的

100、你封裝過(guò)插件嗎？封裝過(guò)哪些插件，說(shuō)說(shuō)封裝插件的思路

封裝過(guò)。比如：購(gòu)物車，幻燈片，選型卡，下拉加載，toast，彈窗等插件。先用原生js寫對(duì)象再用$.fn去調(diào)用。

101、封裝過(guò)組件嗎？說(shuō)說(shuō)你封裝哪些組件。

封裝過(guò)。比如：公共的頭，alert，購(gòu)物車等等。

102、說(shuō)說(shuō)代碼重構(gòu)的思路？

先看看那些代碼可以封裝，重用，繼承。實(shí)現(xiàn)步驟如下：1、提取子函數(shù)。2、把大家都要用的方法放到父類中。3、下移函數(shù)到子類。4、封裝固定的調(diào)用邏輯（有點(diǎn)模板模式的意思）

103、項(xiàng)目中遇到印象最深刻的問(wèn)題，以及解決的思路是什么？

1、用react的開(kāi)發(fā)的時(shí)候子組件用路由跳轉(zhuǎn)時(shí)需要用withRouter解決。
2、如果在input設(shè)置邊框顏色在ios系統(tǒng)里會(huì)出現(xiàn)兼容性問(wèn)題，需要在外面加一個(gè)div設(shè)置div的邊框代替input邊框。
3、文字溢出，用overflow:auto做滾動(dòng)條在ios上面會(huì)卡頓，需要用iscroll解決。

104、最有成就感的是哪個(gè)項(xiàng)目？

自己寫

105、實(shí)現(xiàn)一個(gè)深拷貝函數(shù)？

function getType(obj){
//tostring會(huì)返回對(duì)應(yīng)不同的標(biāo)簽的構(gòu)造函數(shù)
var toString = Object.prototype.toString;
var map = {
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regExp',
'[object Undefined]': 'undefined',
'[object Null]' : 'null',
'[object Object]' : 'object'
};
if(obj instanceof Element) {
return 'element';
}
return map[toString.call(obj)];
}
//深拷貝
function deepClone(data){
var type = getType(data);
var obj;
if(type === 'array'){
obj = [];
} else if(type === 'object'){
obj = {};
} else {
//不再具有下一層次
return data;
}
if(type === 'array'){
for(var i = 0, len = data.length; i < len; i++){
obj.push(deepClone(data[i]));
}
} else if(type === 'object'){
for(var key in data){
obj[key] = deepClone(data[key]);
}
}
return obj;
}

106、Css結(jié)合html寫一個(gè)常見(jiàn)的頁(yè)面布局？

107、用Css畫一個(gè)三?角和實(shí)現(xiàn)一個(gè)圓環(huán)？

//三角
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
.wrap{
width: 0px;
height: 0px;
border-width: 0px 50px 50px 0px;
border-color: red transparent;
border-style: solid;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>

//圓
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
.wrap{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%;
border-radius: 50%;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>

108、一個(gè)完整的react開(kāi)發(fā)目錄結(jié)構(gòu)？

109、說(shuō)說(shuō)你對(duì)promise的理解?其優(yōu)勢(shì)是什么？

promise是es6的一種異步請(qǐng)求構(gòu)造函數(shù)，接收一個(gè)參數(shù)，是函數(shù)，并傳入兩個(gè)參數(shù)resolve，reject(可以見(jiàn)到的理解成功后和失敗后的回調(diào)函數(shù))，在我們封裝好函數(shù)的最后，會(huì)return出promise對(duì)象，promise對(duì)象的原型上有then、catch等方法，then方法中我們協(xié)議拿到我們?cè)谡{(diào)用resolve時(shí)可以傳遞的參數(shù)并形成promise鏈，調(diào)用reject時(shí)，promise鏈就被破壞了，reject之后的promise都不會(huì)再執(zhí)行，而是直接調(diào)用.catch方法；Promise的優(yōu)勢(shì)在于，可以在then方法中繼續(xù)寫promise對(duì)象并返回，然后繼續(xù)調(diào)用then來(lái)進(jìn)行回調(diào)操作。