筆試題答案整理
跨域怎么實(shí)現(xiàn)？jsonp的原理是什么？
h5新標(biāo)簽有哪些？為什么要加強(qiáng)語(yǔ)義化？
為什么要清除浮動(dòng)？怎么清除浮動(dòng)？
行內(nèi)元素、塊元素有哪些？它們有什么不同？
有哪幾種存儲(chǔ)方式？有什么不同？
setTimeout輸出值的時(shí)候，如何實(shí)現(xiàn)i按序輸出？
vue實(shí)現(xiàn)雙向綁定的原理？
vue組件之間的傳值？
點(diǎn)擊按鈕進(jìn)行數(shù)據(jù)請(qǐng)求，怎么實(shí)現(xiàn)按序執(zhí)行請(qǐng)求？
怎么讓文本不自動(dòng)換行？怎么讓超過(guò)文本部分變成省略號(hào)？
vue的生命周期有哪些？它們有什么不同？
詳解：
1. 跨域怎么實(shí)現(xiàn)？jsonp的原理是什么？
跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。瀏覽器執(zhí)行
javascript腳本時(shí)，會(huì)檢查這個(gè)腳本屬于哪個(gè)頁(yè)面，如果不是同源頁(yè)面，就不會(huì)被執(zhí)行。解決辦法：
①JSONP：注意JSONP只支持GET請(qǐng)求，不支持POST請(qǐng)求。
原理：ajax請(qǐng)求受同源策略影響，不允許進(jìn)行跨域請(qǐng)求，而script標(biāo)簽src屬性中的鏈接卻可以訪問(wèn)跨域的js腳本，利用這個(gè)特性，服務(wù)端不再返回JSON格式的數(shù)據(jù)，而是返回一段調(diào)用某個(gè)函數(shù)的js代碼，在src中進(jìn)行了調(diào)用，這樣實(shí)現(xiàn)了跨域。
②代理：寫(xiě)后端接口，在后端調(diào)用頁(yè)面拿到返回值返回給html文件。相當(dāng)于繞過(guò)了瀏覽器，就不會(huì)存在跨域問(wèn)題。
③PHP端修改header
header('Access-Control-Allow-Origin:*');//允許所有來(lái)源訪問(wèn)
header('Access-Control-Allow-Method:POST,GET');//允許訪問(wèn)的方式2. h5新標(biāo)簽有哪些？為什么要加強(qiáng)語(yǔ)義化？
新標(biāo)簽：
文檔類(lèi)型設(shè)定：
<!doctype html>；字符設(shè)定：
<meta charset="utf-8">；常用新標(biāo)簽：
header，一般作為網(wǎng)頁(yè)的頭部使用，可以多個(gè)；footer，底部，不一定是文檔最底部，可以多個(gè)；aside，側(cè)邊欄；nav，導(dǎo)航欄；article，獨(dú)立內(nèi)容區(qū)域，與session類(lèi)似，用于文章blog、帖子、短文或者回復(fù)、評(píng)論等；section，代表某一個(gè)區(qū)域/分區(qū)/頁(yè)面/文檔的一部分區(qū)域，有獨(dú)立的內(nèi)容，但結(jié)構(gòu)相近，就可以用section，范圍比div大，語(yǔ)義比div更強(qiáng)，可以包含header、h1-h6……凸顯語(yǔ)義的標(biāo)簽；datalist，標(biāo)簽定義選項(xiàng)列表，請(qǐng)與 input 元素配合使用該元素；<input type="text" value="輸入" list="TFboys"/> <!-- ?input里面用list -->
<datalist id="TFboys"> ? <!-- datalist里面用id --> ?
? ? ? ?<option>易烊千璽</option>
? ? ? ? ? ?<option>王俊凱</option>
? ? ? ?<option>王源</option>
</datalist>fieldset，可將表單內(nèi)的相關(guān)元素分組，打包legend（為fieldset元素定義標(biāo)題）使用；<fieldset>
<legend>用戶登錄</legend>
? ? 用戶名: <input type="text"><br />
????密 碼: <input type="password">
?</fieldset>
??address，標(biāo)簽定義文檔或文章的作者/擁有者的聯(lián)系信息，字體樣式默認(rèn)傾斜； ?? ?
??time，時(shí)間標(biāo)簽，主要用于搜索引擎和其它一些內(nèi)容引擎特殊的解析和展示； ?? ?
??hgroup，專(zhuān)門(mén)用來(lái)包含標(biāo)題h標(biāo)簽的分組；
??detail，細(xì)節(jié)、詳情 ，open屬性：默認(rèn)展開(kāi)，summary相當(dāng)于詳情的標(biāo)題；
新增了許多input type屬性：email、tel、url、number、search搜索框，加強(qiáng)語(yǔ)義、range自由拖動(dòng)滑塊、time、date日期、datetime時(shí)間、month、week ?? ?
新增了許多input的屬性：placeholder占位符，默認(rèn)文字、autofocus頁(yè)面加載時(shí)自動(dòng)獲得焦點(diǎn)、multiple多文件上傳、autocomplete、required必填項(xiàng)、accesskey規(guī)定激活元素的快捷鍵 ?? ?
多媒體標(biāo)簽：embed定義嵌入的內(nèi)容、audio播放音頻、video播放視頻；
src導(dǎo)入，autoplay自動(dòng)播放、controls是否默認(rèn)顯示播放件、loop循環(huán)播放
......
? ?原因：1.默認(rèn)樣式不一樣 ；2.有SEO優(yōu)化作用； ?? ?
3.為什么要清除浮動(dòng)？怎么清除浮動(dòng)？
產(chǎn)生原因：子盒子浮動(dòng)導(dǎo)致的父盒子內(nèi)高度為 0 ，父級(jí)盒子不能被撐開(kāi)，發(fā)生高度塌陷的情況。
帶來(lái)的負(fù)作用：
背景不能顯示
邊框不能撐開(kāi)
margin和padding值不能正確顯示
清除浮動(dòng)的方法：
給父盒子設(shè)置合適的高度；
給父盒子添加樣式
overflow:hidden/auto;（這個(gè)屬性相當(dāng)于觸發(fā)BFC，讓父級(jí)緊貼內(nèi)容，包括使用了浮動(dòng)的盒子）（為了去除兼容性問(wèn)題，會(huì)添加zoom:1;）在父盒子里面的子盒子后面添加一個(gè)子盒子，如div，添加樣式
.clear{clear:both;}；采用偽元素，給父元素追加
:after，給父元素添加一個(gè)類(lèi).clearfix{content:"";clear:both;}
BFC塊級(jí)格式化上下文的特征：
內(nèi)部的Box會(huì)在垂直方向，從頂部開(kāi)始一個(gè)接一個(gè)地放置；
Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加。
每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸，即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與float box疊加。
BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
創(chuàng)建塊級(jí)格式化上下文：
浮動(dòng) (元素的 float不為 none）
絕對(duì)定位元素 (元素的 position為 absolute 或 fixed)
行內(nèi)塊 inline-blocks (元素的 display: inline-block)
表格單元格 (元素的 display: table-cell，HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素的 display: table-caption，HTML表格標(biāo)題默認(rèn)屬性)
overflow的值不為 visible的元素(元素的 overflow: hidden，overflow: auto)
彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)
4.行內(nèi)元素、塊元素有哪些？它們有什么不同？
行內(nèi)元素：b、span、a、u、em、i、img、input、select、label、textarea、button
塊級(jí)元素：div、h、ol、ul、dl、li、table、td、th、tr、dd、dt、p、caption
行內(nèi)元素的特點(diǎn)：
1、行內(nèi)元素只能容納文本或者其他行內(nèi)元素。
2、寬度只與內(nèi)容有關(guān)。
3、和其他元素都在一行上。
4、高，行高及外邊距和內(nèi)邊距部分可改變。
塊級(jí)元素的特點(diǎn)：
1、高度，行高以及外邊距和內(nèi)邊距都可控制。
2、總是在新行上開(kāi)始，占據(jù)一整行。
3、它可以容納內(nèi)聯(lián)元素和其他塊元素。
4、寬度始終是與瀏覽器寬度一樣，與內(nèi)容無(wú)關(guān)。
區(qū)別：
1、行內(nèi)元素會(huì)在一條直線上分列，都是統(tǒng)一行的，程度偏向分列。
塊級(jí)元素各盤(pán)踞一行，垂直偏向分列；塊級(jí)元素重新行開(kāi)端停止接著一個(gè)斷行。
2、行內(nèi)元素不可以包括塊級(jí)元素，只能包容文本或許其余行內(nèi)元素。
塊級(jí)元素能夠包括行內(nèi)元素和塊級(jí)元素，還能夠包容內(nèi)聯(lián)元素和其余元素；。
3、行內(nèi)元素與塊級(jí)元素屬性的分歧，主要在盒模子屬性上。
行內(nèi)元素設(shè)置width無(wú)效，height無(wú)效（能夠設(shè)置line-height），margin、padding設(shè)置上下有效。
5. 有哪幾種存儲(chǔ)方式？有什么不同？
cookie、localStorage、sessionStorage；
相同點(diǎn)：都保存在瀏覽器端；
不同點(diǎn)：
①傳遞方式不同
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
②數(shù)據(jù)大小不同
（cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。） ?存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
③數(shù)據(jù)有效期不同
sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；
localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；
cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
④作用域不同
sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；
localStorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
6. setTimeout輸出值的時(shí)候，如何實(shí)現(xiàn)i按序輸出？
for(var i=0;i<10;i++){
? ?setTimeout(function ten(){
? ? ? ? ? ?console.log(i);
? ? ? ?},10);
}//輸出結(jié)果是10個(gè)10
問(wèn)：為什么輸出的是10個(gè)10？
答：JS是一個(gè)單線程的解釋器，setTimeout本質(zhì)是間隔一定時(shí)間將任務(wù)添加到任務(wù)隊(duì)列中。輸出的時(shí)候for循環(huán)作為主線程已經(jīng)執(zhí)行完畢，此時(shí)作用域中的i=5；按序執(zhí)行10次輸出i，就會(huì)輸出10個(gè)10；
問(wèn)：如何輸出成按序輸出？
答：方法一：
生成一個(gè)立即執(zhí)行的函數(shù)，將i作為參數(shù)輸入（閉包）
for(var i=0;i<10;i++){
? ?(function(i){
? ? setTimeout(function ten(){
? ? ? ? ? ?console.log(i);
? ? ? ?},10);
? ?})(i)
}
方法二：用es6中的let來(lái)聲明變量，相當(dāng)于let在每個(gè)塊級(jí)作用域里面都聲明了一個(gè)變量i
for(let i=0;i<10;i++){
? ?setTimeout(function ten(){
? ? ? ? ? ?console.log(i);
? ? ? ?},10);
}
方法三：使用setTimeout的第三個(gè)參數(shù)
for(var i=0;i<10;i++){
? ?setTimeout(function ten(){
? ? ? ? ? ?console.log(i);
? ? ? ?},10,i);
}
7. vue實(shí)現(xiàn)雙向綁定的原理？
? ? ? ?VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty()方法重新定義了對(duì)象獲取屬性值get和設(shè)置屬性值set的操作來(lái)實(shí)現(xiàn)的；
Object.defineProperty()三個(gè)參數(shù)：要操作的對(duì)象，要定義或修改的對(duì)象屬性名，屬性描述符；
? ? ? ?其中，屬性描述符是一個(gè)對(duì)象，主要有兩種形式（任選其一）：數(shù)據(jù)描述符和存取描述符（get、set）。
var obj = { };
var name;
//第一個(gè)參數(shù)：定義屬性的對(duì)象;第二個(gè)參數(shù)：要定義或修改的屬性的名稱(chēng);第三個(gè)參數(shù)：將被定義或修改的屬性描述符。
Object.defineProperty(obj, "data", {
? ?//獲取值
? ?get:function () {
? ? ? ?return name;
? ?},
? ?//設(shè)置值
? ?set:function (val) {
? ? ? ?name = val;
? ? ? ?console.log(val);
? ?}
})
? ?//賦值調(diào)用set
obj.data = 'aaa';
? ?//取值調(diào)用get
console.log(obj.data);
? ? ? ?這里著重理解data更新，view視圖層是怎么更新的：（view更新，要data改變只要進(jìn)行事件監(jiān)聽(tīng)即可）利用Object.defineProperty()對(duì)屬性設(shè)置的set函數(shù)，改變了data數(shù)據(jù)就會(huì)觸發(fā)set函數(shù)，在這個(gè)函數(shù)里面添加更新view視圖層的方法即可。
8. vue組件之間的傳值？
父?jìng)髯樱?/p>
先在父組件中綁定變量
<child :msg="parent"></child>，parent是定義在父組件中的變量/值；再在子組件中添加props屬性接收父組件傳遞過(guò)來(lái)的變量
props:['msg']；最后就可以在子組件中使用
{{msg}}來(lái)表示父組件中parent變量中的值了。子傳父：
先在子組件中綁定事件
@change="sendChild"，觸發(fā)的時(shí)候在setChild事件中用$emit()觸發(fā)父組件中的函數(shù)，并將子組件中的變量作為參數(shù)傳遞；methods：{
? ?sendChild:function(){
? ? ? ?this.$emit('transparent',this.msg)
? ?}
}在父組件中綁定事件
<child @transparent="getChild"></child>，當(dāng)子組件觸發(fā)這個(gè)事件的時(shí)候，就可以調(diào)用getChild方法獲取到傳遞過(guò)來(lái)的參數(shù)；methods:{
? ?getChild(msg){
? ? ? ?this.user=msg;
? ?}
}兄弟組件互相傳值，通過(guò)Vuex狀態(tài)管理傳值：
先通過(guò)npm加載vuex，創(chuàng)建store.js文件
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state={name:'Alice'};
const mutations={
? ?newName(state,message){
? ? ? ?state.name=message
? ?}
}
export default new Vuex.Store({state,mutations})兄弟組件互相傳值，引入bus.js文件，發(fā)布者訂閱者模式：
import Bus from './bus.js'
? //一個(gè)子組件觸發(fā)
? methods:{
? ? ? Bus.$emit('觸發(fā)的方法名'，需要傳遞的值);
? } ? //一個(gè)子組件監(jiān)聽(tīng)
? mounted:{
? ? ? bus.$on("方法名",(傳遞的值)=>{ })
? }
5. 兄弟組件互相傳值$root
//一個(gè)子組件觸發(fā)
this.$root.$emit('觸發(fā)的方法名'，需要傳遞的值);//一個(gè)子組件監(jiān)聽(tīng)
this.$root.$off("方法名");//每次進(jìn)入先關(guān)閉一下
this.$root.$on("方法名",(傳遞的值)=>{ })
9.點(diǎn)擊按鈕進(jìn)行數(shù)據(jù)請(qǐng)求，怎么實(shí)現(xiàn)按序執(zhí)行請(qǐng)求？
問(wèn)：點(diǎn)擊頁(yè)面上一個(gè)按鈕發(fā)送兩個(gè)ajax請(qǐng)求，其中一個(gè)請(qǐng)求會(huì)不會(huì)等待另一個(gè)請(qǐng)求執(zhí)行完畢之后再執(zhí)行？
答：不會(huì)，這兩個(gè)異步請(qǐng)求會(huì)同時(shí)發(fā)送，執(zhí)行的快與慢是看響應(yīng)的數(shù)據(jù)量的大小及后臺(tái)邏輯的復(fù)雜程度。
問(wèn)：怎么讓它們按序執(zhí)行？
答：兩種方案：
Ajax2()方法的執(zhí)行放到Ajax1()的success回調(diào)函數(shù)的最后一行。
Ajax1()的異步請(qǐng)求方法中，增加一個(gè)回調(diào)函數(shù) ：complete : Ajax2
10.怎么讓文本不自動(dòng)換行？怎么讓超過(guò)文本部分變成省略號(hào)？
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
11.vue的生命周期有哪些？它們有什么不同？
生命周期鉤子組件狀態(tài)最佳實(shí)踐beforeCreate實(shí)例初始化之后，this指向創(chuàng)建的實(shí)例，不能訪問(wèn)到data、computed、watch、methods上的方法和數(shù)據(jù)常用于初始化非響應(yīng)式變量created實(shí)例創(chuàng)建完成，可訪問(wèn)data、computed、watch、methods上的方法和數(shù)據(jù)，還未掛載到DOM，不能訪問(wèn)到$el屬性，$ref屬性?xún)?nèi)容為空數(shù)組常用于簡(jiǎn)單的ajax請(qǐng)求，頁(yè)面的初始化beforeMount在掛載開(kāi)始之前被調(diào)用，beforeMount之前，會(huì)找到對(duì)應(yīng)的template，并編譯成render函數(shù)-mounted實(shí)例掛載到DOM上，此時(shí)可以通過(guò)DOM API獲取到DOM節(jié)點(diǎn)，$ref屬性可以訪問(wèn)常用于獲取信息和操作，ajax請(qǐng)求beforeUpdate響應(yīng)式數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前適合在更新之前訪問(wèn)現(xiàn)有的DOM，比如手動(dòng)移除已添加的事件監(jiān)聽(tīng)器updated虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用，組件DOM已經(jīng)更新，可執(zhí)行依賴(lài)于DOM的操作避免在這個(gè)鉤子函數(shù)中操作數(shù)據(jù)，可能陷入死循環(huán)beforeDestroy實(shí)例銷(xiāo)毀之前調(diào)用。這一步，實(shí)例仍然完全可用，this仍能獲取到實(shí)例常用于銷(xiāo)毀定時(shí)器、解綁全局事件、銷(xiāo)毀插件對(duì)象等操作destroyed實(shí)例銷(xiāo)毀后調(diào)用，調(diào)用后，Vue實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀-
注：
其中created和mounted中ajax請(qǐng)求的區(qū)別：created的時(shí)候視圖未出現(xiàn)，請(qǐng)求較多的情況下，會(huì)出現(xiàn)白屏；
初始化組件的時(shí)候，僅執(zhí)行beforeCreated/created/beforeMount/mounted四個(gè)鉤子函數(shù)；
當(dāng)改變data中定義的響應(yīng)式變量時(shí)，會(huì)執(zhí)行beforeUpadate/updated；
初始化和銷(xiāo)毀時(shí)的鉤子函數(shù)只會(huì)執(zhí)行一次，beforeUpadate/updated可執(zhí)行多次；
掛載的時(shí)候，子組件完成掛載后，父組件才會(huì)掛載；
當(dāng)子組件完成掛載后，父組件會(huì)主動(dòng)執(zhí)行一次beforeUpdate/updated鉤子函數(shù)（僅首次）；
銷(xiāo)毀父組件時(shí)，先將子組件銷(xiāo)毀后，才會(huì)銷(xiāo)毀父組件；
