一、盒子模型和標(biāo)準(zhǔn)模型的區(qū)別

盒模型，標(biāo)準(zhǔn)模型和怪異模型有什么區(qū)別？

盒模型一共有兩種模式：W3C標(biāo)準(zhǔn)模式和IE怪異模式

標(biāo)準(zhǔn)盒子模型

可以看到，在標(biāo)準(zhǔn)盒模型下，width和height是內(nèi)容區(qū)域即content的width和height。

在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度= width + margin(左右) + padding(左右) + border(左右)

IE盒子模型

而IE盒模型或怪異盒模型顯而易見的區(qū)別就是，width和height除了content區(qū)域外，還包含padding和border。

一個(gè)塊的總寬度= width + margin(左右)（即width已經(jīng)包含了padding和border值）

1、如何運(yùn)用

只要在文檔首部加了doctype申明，即使用了標(biāo)準(zhǔn)盒模型，而不加，則會由瀏覽器自己決定，比如，ie 瀏覽器中顯示“ie盒子模型”，在 ff 瀏覽器中顯示“標(biāo)準(zhǔn) w3c 盒子模型”。

當(dāng)用編輯器新建一個(gè)html頁面的時(shí)候最頂上都會有一個(gè)DOCTYPE標(biāo)簽，不定義DOCTYPE，會觸發(fā)怪異模式

2、怪異盒模型

CSS3的box-sizing

box-sizing語法：

box-sizing: content-box || border-box || inherit || initial

當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算，也是默認(rèn)模式；

當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算；

二、閉包原理和實(shí)現(xiàn)

1、閉包的概念：指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)，一般情況就是在一個(gè)函數(shù)中包含另一個(gè)函數(shù)。

2、閉包的作用：訪問函數(shù)內(nèi)部變量、保持函數(shù)在環(huán)境中一直存在，不會被垃圾回收機(jī)制處理

因?yàn)楹瘮?shù)內(nèi)部聲明 的變量是局部的，只能在函數(shù)內(nèi)部訪問到，但是函數(shù)外部的變量是對函數(shù)內(nèi)部可見的，這就是作用域鏈的特點(diǎn)了。子級可以向父級查找變量，逐級查找，找到為止

3、閉包的優(yōu)點(diǎn)：

方便調(diào)用上下文中聲明的局部變量；邏輯緊密，可以在一個(gè)函數(shù)中再創(chuàng)建個(gè)函數(shù)，避免了傳參的問題

4、閉包的缺點(diǎn)：

因?yàn)槭褂瞄]包，可以使函數(shù)在執(zhí)行完后不被銷毀，保留在內(nèi)存中，如果大量使用閉包就會造成內(nèi)存泄露，內(nèi)存消耗很大

三、VUEX實(shí)現(xiàn)A頁面數(shù)據(jù)到B頁面數(shù)據(jù)進(jìn)行同時(shí)提交；

在vue項(xiàng)目中使用vuex實(shí)現(xiàn)狀態(tài)管理的案例

https://baijiahao.baidu.com/s?id=1666368045940664675&wfr=spider&for=pc

vue:vuex store里面的數(shù)據(jù)更新后，如何在頁面同步更新

https://www.cnblogs.com/yddzyy/p/13445272.html

四、vue路由優(yōu)化；

使用到vue-router時(shí)，webpack會將所有組件打包在一個(gè)js文件中，這樣就導(dǎo)致這個(gè)文件非常大，從而會影響首頁的加載，

方法就是將其他路由分別打包到不同js文件中，切換路由時(shí)再加載對應(yīng)js文件。當(dāng)路由被訪問的時(shí)候才加載對應(yīng)組件，這樣就更加高效了。

在index。js文件中配置好不同的js文件

import Vue from 'vue'
import Router from 'vue-router'
import page1 from './page1'
import page2 from './page2'
import page3 from './page3'
Vue.use(Router)
export default new Router({
scrollBehavior(to,from,savedPosition){
if(savedPosition){
return savedPosition;
}else{
return{x:0,y:0}
}
},
routes:[].concat(page1)
.concat(page2)
.concat(page3)
})
這里采用一種代碼分塊的語法，使用 AMD 風(fēng)格的 require

比如在page1.js文件中
const Home = resolve => require(['@/components/Home'], resolve);
const Login = resolve => require(['@/components/Login/Login'], resolve);
export default [
{
path: '/',
name: 'Home',
component: Home
},]

五、js字符串遍歷對象；

1、數(shù)組遍歷

for --使用變量將數(shù)組長度緩存起來，在數(shù)組較長時(shí)性能優(yōu)化效果明顯

for(var i=0,len=arr.length;i<len;i++){
console.log("元素："+arr[i]);
}
forEach --ES5語法，對數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)，不能使用break、return

arr.forEach(function(item,index,arr){
console.log("元素："+item+" 索引："+index+" 整個(gè)數(shù)組："+arr);
})
map --ES5語法，創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果

arr.map(function(val,index){
console.log("元素："+val+" 索引："+index);
return val*val;
})
for...of --ES6語法，可以遍歷Array、Set、Map、String、TypedArray、arguments等可迭代對象，可以使用break、continue

for(let item of arr){
console.log("元素："+item);
}

2、對象遍歷

for...in --以任意順序遍歷一個(gè)對象自有的、繼承的、可枚舉的、非Symbol的屬性，對于每個(gè)不同的屬性，語句都會被執(zhí)行

for(var key in obj){
console.log("屬性："+key+" 值："+obj[key]);
}
Object.keys() --返回一個(gè)由一個(gè)給定對象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和使用for...in循環(huán)遍歷該對象時(shí)返回的順序一致

Object.keys(obj);
Object.values() --返回一個(gè)給定對象自身的所有可枚舉屬性值的數(shù)組，值的順序與使用for...in循環(huán)的順序相同(區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性)

Object.values(obj);
Object.getOwnPropertyNames() --返回一個(gè)由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數(shù)組

Object.getOwnPropertyNames(obj);

3、字符串遍歷

for...of --ES6語法，可以遍歷Array、Set、Map、String、TypedArray、arguments等可迭代對象，可以使用break、continue

for(let char of string){
console.log("字符："+char);
}

如果你對千鋒成都web前端培訓(xùn)課程感興趣，可以來實(shí)地試聽，現(xiàn)在咨詢就送時(shí)長兩周的免費(fèi)試聽課程以及全套免費(fèi)資料領(lǐng)取，還在等什么，快找在線老師了解一下吧。

上一篇

Java面試：實(shí)用面試題及參考答案

下一篇

沒有經(jīng)驗(yàn)的web前端工程師怎么參加面試呢？