一、盒子模型和標準模型的區別

盒模型，標準模型和怪異模型有什么區別？

盒模型一共有兩種模式：W3C標準模式和IE怪異模式

標準盒子模型

可以看到，在標準盒模型下，width和height是內容區域即content的width和height。

在標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)

IE盒子模型

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

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

1、如何運用

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

當用編輯器新建一個html頁面的時候最頂上都會有一個DOCTYPE標簽，不定義DOCTYPE，會觸發怪異模式

2、怪異盒模型

CSS3的box-sizing

box-sizing語法：

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

當設置為box-sizing:content-box時，將采用標準模式解析計算，也是默認模式；

當設置為box-sizing:border-box時，將采用怪異模式解析計算；

二、閉包原理和實現

1、閉包的概念：指有權訪問另一個函數作用域中的變量的函數，一般情況就是在一個函數中包含另一個函數。

2、閉包的作用：訪問函數內部變量、保持函數在環境中一直存在，不會被垃圾回收機制處理

因為函數內部聲明 的變量是局部的，只能在函數內部訪問到，但是函數外部的變量是對函數內部可見的，這就是作用域鏈的特點了。子級可以向父級查找變量，逐級查找，找到為止

3、閉包的優點：

方便調用上下文中聲明的局部變量；邏輯緊密，可以在一個函數中再創建個函數，避免了傳參的問題

4、閉包的缺點：

因為使用閉包，可以使函數在執行完后不被銷毀，保留在內存中，如果大量使用閉包就會造成內存泄露，內存消耗很大

三、VUEX實現A頁面數據到B頁面數據進行同時提交；

在vue項目中使用vuex實現狀態管理的案例

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

vue:vuex store里面的數據更新后，如何在頁面同步更新

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

四、vue路由優化；

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

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

在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 風格的 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、數組遍歷

for --使用變量將數組長度緩存起來，在數組較長時性能優化效果明顯

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

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

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 --以任意順序遍歷一個對象自有的、繼承的、可枚舉的、非Symbol的屬性，對于每個不同的屬性，語句都會被執行

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

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

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

Object.getOwnPropertyNames(obj);

3、字符串遍歷

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

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

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

上一篇

Java面試：實用面試題及參考答案

下一篇

沒有經驗的web前端工程師怎么參加面試呢？