一、盒子模型和标准模型的区别

盒模型，标准模型和怪异模型有什么区别？

盒模型一共有两种模式：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前端工程师怎么参加面试呢？