关于前端的那些事儿~

HTML+Css部分

什么是Doctype？它有什么作用？

xhtml和html有什么区别？

简述CSS的盒子模型：

盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)

两种方式：
content-box：标准盒模型（W3C盒模型）
border-box：怪异盒模型（ IE 盒子模型）
一般浏览器和IE9+默认值是content-box

两者区别：
content-box：padding和border不计算在定义的width和height之内。
盒子的实际宽度=定义的width+padding+border
border-box：padding和border计算在定义的width和height之内。
盒子的实际宽度=设置的width（包含padding和border，但他们不会影响定义的宽度值，定义了多少还是显示多少）

例如：

/* 红色区域的大小是160px ,整个区域为200px*/
        .box {
            width: 200px;
            height: 200px;
            padding: 20px;
            background: #f00;
            border: 20px solid #000;
            box-sizing: border-box;
        }

/* 红色区域的大小是240px，整个区域为280px */
        .box {
            width: 200px;
            height: 200px;
            padding: 20px;
            background: #f00;
            border: 20px solid #000;
            box-sizing: content-box;
        }

写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ， 中间自适应宽，要求先加载中间块，请写出结构及样式：

第一种方法利用定位

结构
<div id="left">我是左边</div>
<div id="center">我是中间</div>
<div id="right">我是右边</div>

样式
html,body {margin: 0;padding:0}
#left,#right {width: 200px;height: 200px;background-color: #f00;position: absolute;}
#left {left: 0;top: 0;}
#right {right: 0; top: 0;}
#center {margin: 0 200px;background-color:#ff0;height: 200px;} 

css样式默认加载顺序 选择器优先级越高，其中的样式优先级越高： !important>行内样式>id选择器> 类选择器> 标签选择器
对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高 所以把类选择器center写在后面就可以了。

第二种方法利用Flex布局+css3 的 calc()函数

结构
<div class="box">
    <div id="left">我是左边</div>
	<div id="center">我是中间</div>
	<div id="right">我是右边</div>
</div>

样式
.box{display: flex}
#left,#right {width: 200px;height: 200px;background-color: #f00;}
#center{width: calc(100% - 400px);background-color: blue;height: 200px;}

第三种方法利用浮动+css3 的 calc()函数

结构
<div class="box">
    <div id="left">我是左边</div>
	<div id="center">我是中间</div>
	<div id="right">我是右边</div>
</div>

样式
.box{overflow: hidden;}
#left,#right {float: left;width: 200px;height: 200px;background-color: #f00;}
#center{float:left;width: calc(100% - 400px);height: 200px;background-color:#ff0;}

Position的值 relative\absolute\fixed 分别相对什么进行定位？有什么区别？什么时候用？

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

position	absolute\relative\fixed\static
相对定位 position:relative	相对于当前元素（其自身）定位，原位置保留；一般和绝对定位一起搭配使用
绝对定位 position:absolute	默认情况下相对于浏览器/body定位，若让其相对于第一个父元素定位，需要给它爸爸添加position:relative。一般小图标放在右上角左下角这种可以使用，场景不同，使用方式不同，视情况而定
固定定位 position:fixed	滚动条滚动时固定不动，相对于浏览器窗口进行定位；一般用于广告位使用或者侧边栏
static	默认值，没有定位，元素出现在正常的流中；我一般和媒体查询一起使用，PC端布局使用了定位，移动端不需要定位就用static 覆盖

解释下Css sprites,以及你要如何在页面或网站中使用它

CSS Sprites （css图片精灵）其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的"background-image"，“background-repeat”，“background-position” 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。

CSS Sprites 的优点：
1、减少图片的字节
2、减少网页的http请求，从而大大提高页面的性能
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名即可，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

简述px 、em 、rem的区别

1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2. em和rem相对于px更具有灵活性，他们是相对长度单位，代表其长度不是固定的，更适用于响应式布局。

em与rem比较：
em相对于父元素，rem相对于根元素
更倾向于使用rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。
通过rem既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。IE9以下版本不支持，应对方法就是多写一个绝对单位的声明，这些浏览器会忽略用rem设定的字体大小。

例子：
p {font-size:14px; font-size:.875rem;}

css中，哪些属性是可以被子元素继承的？举例说明

子标签会继承父标签的（font- text- line-以及color）样式
color(颜色，a元素除外)
font-family（字体系列）
font-size（字体大小）
line-height（行高）
text-align（用于设置对齐方式）…

如何使用伪元素清除浮动

div:after{
    content:"";			/*设置内容，必须*/
    display:block;			/*将文本转为块级元素*/
    clear:both;				/*清除浮动*/
}
div{
    zoom:1;					/*兼容IE*/
}

单文本及多文本溢出用省略号…展示

单文本溢出

div {
            white-space: nowrap;  // 强制一行内显示文本不换行
            overflow: hidden;			//超出的部分隐藏
            text-overflow: ellipsis;  //文字用省略号替代超出的部分
        }

多行文本的溢出（兼容性不好，适合webkit和移动设备）

div {
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;    //弹性伸缩盒子模型显示
            -webkit-line-clamp:2;  //限制在一个块元素显示的文本行数
            -webkit-box-orient:vertical;  //设置或者检索伸缩对象的子元素的排列方式
        }

javaScript部分

下面有关JavaScript中 call和apply的描述，错误的是？

A.call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

B.两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是

C.apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

D.call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

正确答案是 B

call（）方法和apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（），第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。（在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组）如下代码做出解释：

function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

1.JS有哪些基本数据类型

undefined、null、number、boolean、string

2.判断基本数据类型的方法有哪些，请举例

3.请说出bind、call、apply的区别

4.事件DOMContentLoaded和load的区别

他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

1. DOM文档加载的步骤为 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。//DOMContentLoaded
5. 加载图片等外部文件。
6. 页面加载完毕。//load

在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。

$(document).ready()和windows.onload的区别

执行时机不同
window.onload方法是在网页中所有的元素（包括元素的相关联文件）都加载到浏览器后才能执行，即JavaScript此时才可以访问网页中的任何元素。
$(document).ready在DOM完全就绪的时候就可以被调用

执行方法数量不同
window.onload只能绑定一个函数，而$(document).ready( ) 可以写很多个

什么是跨域？你会用什么方法处理跨域请求？简要说明

什么是内存泄漏？一般产生的原因是什么？

js数组几种常见的操作方法

方法	作用	是否影响原数组
push()	向数组的末尾添加一个或多个元素，并返回数组新的长度	是
pop()	删除数组的最后一个元素，并将删除的元素作为返回值返回	是
unshift()	向数组开头添加一个或多个元素，并返回新的数组长度；向前边插入元素以后，其他的元素索引会依次调整	是
shift	删除数组的第一个元素，并将被删除的元素作为返回值返回	是
slice()	用来从数组提取指定元素，不会改变原数组，而是将截取到的元素封装到一个新的数组中返回	否
splice()	将指定元素从原数组中删除，并将被删除的元素作为返回值返回	是
concat()	链接两个或多个数组，并将新的数组返回	否
join()	将数组转换为一个字符串	否
reverse()	用来反转数组（前面的到后面，后面的来前面）	是
sort()	用来对数组中的元素进行排序；也会影响原数组，默认会按照Unicode编码进行排序	是
forEach()	遍历数组

代码题：

 var w = [1,2,3,4,5];
var s =w;
s.push(6);
console.log(w)

Log输出的内容中w的值会改变吗？如果会改变，请换一种写法，让s改变时w不会改变

Vue部分

1.vue里边如何让css样式只在当前组件中生效

在组件中的style标签中加入scoped即可

<style scoped>
       .box{border:1px solid #f00}
</style> 

2.v-if和v-show的区别

相同点：v-if 和 v-show都可以控制dom元素隐藏。
不同点：
（1）v-if是直接销毁和重建dom节点达到让元素显示或隐藏的效果；v-show是通过修改元素的display来让其显示或隐藏。
（2）v-if可以实现组件的重新渲染，有更高的切换消耗过程，v-show有更高的初始化渲染消耗。
（3）v-if适用于运行条件不大可能改变的场合；v-show适用于频繁切换的长度

2-1 在vue.js中，如何实现控制一个元素的显示和隐藏？

3.$route 和 $router的区别

this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它；

this.$router 是路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址

4.vue.js的两个核心是什么？

数据驱动：保证数据和视图的一致性。

组件系统：

组件的核心选项

1 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。

2 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。

3 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。

4 方法（methods）：对数据的改动操作一般都在组件的方法内进行。

5 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。

6 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

5.vue几种常用的指令

1、v-if：根据表达式值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
2、v-show：根据表达式之真假值，切换元素的 display CSS 属性。
3、v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。
4、v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
5、v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
6、v-model：实现表单输入和应用状态之间的双向绑定
7、v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

6.vue常用的修饰符

.stop //阻止单击事件冒泡
.prevent //提交事件不再重新加载页面
.capture //添加事件侦听器时使用事件捕获模式
.self //只当事件在该元素本身时触发回调（在其子元素上不触发）
.once //只触发一次事件

7.vue中 key 值的作用

1、元素的唯一性，diff方法中提高了匹配元素index的性能。有key时遍历key-index对象（快），无key时遍历旧Vnode（慢）。
2、在元素list一直变化的情况下，key值设置唯一时，能很精确找到变更元素，key不唯一时，不能精确找到要匹配的元素。
但对于是原地复用元素还是重新创建元素没有直接影响，只要新旧两个Vnode满足sameVnode，就会复用已有元素。

8.什么是vue的计算属性

computed
计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的 DOM 部分也会同步自动更新

9.Vue中computed、methods和watch之间的区别

10.vue等单页面应用及其优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。

单页面的优点和缺点：
优点：（数据驱动、组件化、轻量、简洁）
1、用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。
2、前后端分离
3、完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
缺点：
1、第一次加载首页耗时相对长一些
2、不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。
3、页面导航不可用，如果一定要导航需要自行实现前进、后退。

11.请简述vue中双向数据绑定的基本实现原理，并尝试写一段原生JavaScript代码，实现简单的双向数据绑定功能

**

其他：

**
1.网络响应状态码中，200/302/304/403/404/500等常规状态码分别对应什么意思？

状 态 码	描述	解释
200	OK（成功）	请求响应体包含服务器返回的数据
302	Found	请求临时转移到新地址。返回新地址。
304	Not Modified	未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用
403	Forbidden	请求被禁止、超出访问权限。与401不同，请求已经通过了身份验证，只是没有获得资源授权
404	Not Found	服务器无法找到被请求的资源
500	Internal Server Error	请求未完成。服务器内部遇到不可预知的错误

2.常规开发中，如何在浏览器中进行调试？

3.前端发送请求post与get提交的数据有什么区别？

4.操作数组的常规方法有哪些？

5.前端如何控制post请求发送的数据类型属于表单类型或者json类型？

注：题型均来自面试中遇到的试题，答案有涉及到他人总结的地方，可以提醒我加上对应出处链接。

本文地址：https://blog.csdn.net/dreamy_wx/article/details/105225064