您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

三大面试题、CSS、JS、Vue

css相关

一、什么是盒模型

	把所有的网页元素都看成一个盒子,它具有: content,padding ,border,margin 四个属性,这就是盒子模型
	盒子模型有两种形式:标准盒子模型,怪异盒子模型
两种模式可以利用box-sizing属性进行自行选择:
  标准模式:box-sizing:content-box;
  怪异模式:box-sizing:border-box;
  
两种模式的区别:
标准模式会被设置的padding撑开
而怪异模式则相当于将盒子的大小固定好,再将内容装入盒子,盒子的大小并不会被padding所撑

二、BFC

1、什么是BFC?
	BFC是一块独立的布局环境,保护其中内部元素不受外部影响,也不影响外部。本身BFC是一种css的布局方式,只是我们可以利用它来解决外边距折叠的问题,BFC并不是专门用来解决这个问题而创的;

三、清除浮动

​ 1.为什么要清除浮动?

	清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题
	当父元素不给高度的时候,内部元素不浮动的时候会撑开,而浮动时父元素会变成一条线,所以这个时候就需要解决浮动
*清除浮动的四种方式*
额外标签法(给最后一个浮动的标签后,新加一个标签,给其设置clear:both;,)(但这种方式是不推荐使用的,因为添加无意义的标签,语义化差)
父元素添加overfiow属性(过触发BFC的方式,实现清除浮动)
使用after伪元素清除浮动
优点:符合闭合浮动思想,结构语义化正确,不容易出现其他为题 缺点:IE6-7不支持伪元素:after,使用zoom:1触发

四、元素居中的方式

	方法一:父相自绝后,子分部向左向上移动本身宽度和高度的一半(也可以transform:translate(-50%,-50%))最常用方法
​	方法二:父元素设置成弹性盒,子元素横向居中,纵向居中
​	方法三:父向子绝,子元素所有定位为0,margin设置auto自适应。

五、两/三栏布局(圣杯双飞翼)、

1、两栏布局,左边定宽,右边自适应
	左边左浮动,右边加overflow:hidden;变成BFC清除左侧浮动元素的影响
2、三栏布局,圣杯布局,双飞翼布局
	首先定义出整个布局的DOM结构,主体部分是由conatiner包裹的center,left,right三列,其中center定义在最前面。
	(1)假设左侧的固定宽度为200px,y右侧的固定宽度为150px,则首先在container上设置
	(2)随后分别为三列设置宽度与浮动,同时对footer设置清除浮动:
	(3)根据浮动的特性,由于center的宽度为100%,即占据了第一行的所有空间,所以left和right背挤到了下一行,接下来的工作是将left放置到之前预留出的位置上,这里使用负外边距:
	(4)随后使用定位方法

六、flex布局

我在项目中常用到的有九宫格布局,列表布局等,都会经常用到。
Flex 布局,可以简便、完整、响应式地实现各种页面布局,任何一个容器都可以指定为 Flex 布局,行内元素也可以使用 Flex 布局。

Flex的属性:
 lex-direction
 flex-wrap
 flex-flow
 justify-content
 align-items
 align-content

七、常见的块级、行级、空元素

(1)、块级元素
- 没有设置宽度时,它的宽度是其容器的 100%;
- 可以给块级元素设置宽高、内边距、外边距等盒模型属性;
- 块级元素可以包含块级元素和行内元素;
- 常见的块级元素有:`<div>`、`<h1>` ~ `<h6>`、`<p>`、`<ul>`、`<ol>`、`<dl>`、`<table>`、`<address>``<form>`
(2)、行内元素
- 行内元素不会独占一行,只会占领自身宽高所需要的空间;
- 给行内元素设置宽高不会起作用,margin 值只对左右起作用,padding 值也只对左右起作用;
- 行内元素一般不可以包含块级元素,只能包含行内元素和文本;
- 常见的行内元素有 `<a>`、`<b>`、`<label>`、`<span>`、**`<img>`**、`<em>`、`<strong>`、`<i>``<input>`
(3)、空元素 ( 在 HTML[1] 元素中,没有内容的 HTML 元素被称为空元素 )
<br/> //换行		<hr> //分隔线		<input> //文本框等		<img> //图片		<link> <meta>

​ 八、Css Hack

	由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及**CSS优先级对浏览器展现效果的影响**,我们可以据此针对**不同的浏览器情景来应用不同的CSS**。
​	(1)、选择符
​		(1)IE6 能识别 `*html .class{}`
​		(2)IE7 能识别 `*+html .class{}` 或 `*:first-child+html .class{}
	(2)、属性
		(1)IE6 能识别下划线" _ "和星号" * "
		(2)IE7 能识别星号" * ",但不能识别下划线" _ "
		(3)IE6~IE10 都识别" \9 "
		(4)firefox 前述三个都不能识别。`
	(3)、条件
		(1)所有 IE (注:IE10+ 已经不再支持条件注释)能识别 <!--[if IE]>IE浏览器显示的内容 <![endif]-->
		(2)IE6及以下版本能识别 <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
这类 Hack 不仅对 CSS 生效,对写在判断语句里面的所有代码都会生效。
		(3)实际项目中 CSS Hack 大部分是针对 IE 浏览器不同版本之间的表现差异而引入的。

九、src与href的区别

    href和src的区别:
    href是指向网络资源所在位置,建立当前元素或者当前文档之间的链接,用于超链接。
    例如:a标签 link标签
    src:是指向外部资源位置,指向的内容会嵌套到当前文档标签所在的位置。
    例如:img标签 frame标签
    主要区别:
    href是网络资源,src是外部资源。
    href是超链接,src资源会嵌套到当前标签。

十、link与@import区别

两者都是外部引用CSS的方式,但是存在一定的区别:
	区别1:link除了引用样式文件,还可以引用图片等资源文件,而import只能引用样式文件
	区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
	区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
	区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。

十一、css3/H5新特性

一、css3
​	1、选择器
​		:last-child /* 选择元素最后一个孩子 */
​		:first-child /* 选择元素第一个孩子 */
​		:nth-child(1) /* 按照第几个孩子给它设置样式 */
	2.背景和边框
	border-radius: 圆角
	border-shadow/text-shadow: 阴影
	border-image: 边框图片
二、html5新特性
	1. 语义化标签:文档头部:header、文档尾部:footer、文档中的节点:section、导航:nav、侧边栏:aside、独立内容区域:article
2. 增强型表单:HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

十二、浏览器兼容性问题

不同浏览器的标签默认间距不同,所以在网页解析有一定的差异
​	1、.css3新属性,加浏览器前缀兼容早期浏览
​		`-moz-` / 火狐浏览器 /
 		`-webkit-` / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
 		`-o-` / Opera浏览器(早期) /
 		`-ms-` / IE /
 	2、.IE浏览器div最小高度和宽度的问题
		加宽高,并且宽高加auto

JS相关

一、 原型和原型链

\1. prototype
	每个函数都有一个prototype属性,被称为显示原型
2._ _proto_ _
	每个实例对象都会有_ _proto_ _属性 ,其被称为隐式原型
	每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype
\3. constructor
	每个prototype原型都有一个constructor属性,指向它关联的构造函数。
\4. 原型链
	获取对象属性时,如果对象本身没有这个属性,那就会去他的原型_ _proto_ _上去找,如果还查不到,就去找原型的原型,一直找到最顶层(Object.prototype)为止。Object.prototype对象也有_ _proto_ _属性值为null。

二、 作用域

1、作用域
	每一个变量、函数都有其作用的范围,超出作用不得使用,这个叫做作用域。
2、全局变量、局部变量:
	1.全局变量:
     (1)在全局范围内声明的变量,如var a=1;
     (2)只有赋值没有声明的值,如a=2; (注:如果a=2在函数环境中,也是全局变量)
	2.局部变量:
      写入函数中的变量,叫做局部变量。
	3.作用:
     (1)程序的安全。
     (2)内存的释放。

三、 闭包

1、闭包
​	闭包是可以访问另一个函数中的变量的函数
2、优点缺点
​	优点:长期驻留内存,可以缓存数据
​	缺点:可以隔离作用域,避免全局污染

四、 This的指向

核心点1:谁调用指向谁,全局this指向window(隐含)。
核心点2:两种情况:作为全局函数或在函数中调用->window,作为对象方法调用->对象;
    普通函数中this指向函数的拥有者
    构造函数中this指向实例化对象
    箭头函数中没有this,this拿的是上一级的this来使用

五、 垃圾回收和内存机制

内存泄漏:
​	要想破坏循环引用,引用DOM元素的对象或DOM对象的引用需要被赋值为null。
1.闭包
	在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收(GC)。
2.DOM泄露
	当原有的DOM被移除时,子结点引用没有被移除则无法回收
垃圾回收:

六、宏任务和微任务

宏任务
​	宏任务指执行栈中待执行的任务,`计时器,事件回调,http回调`都是宏任务。
微任务
	微任务指执行栈清空后立即执行的任务,`Promise 和 MutationObserver`都是微任务。

七、Js基础

1、数据类型
	js 中基本数据类型:String(字符串)、Number(数字)、Array(数组)、Boolean(布尔类型)、Object(对象)、null、undefined;
	(1).堆栈内存:
		栈内存:用来存储基本数据类型,用来执行函数
		堆内存:用来存储引用数据类型:对象,函数
2、手写深拷贝
	(1)、深拷贝和浅拷贝的区别
		浅拷贝 : 只是将数据中所有的数据引用下来,依旧指向同一个存放地址,拷贝之后的数据修改之后,也会影响到原数据中的对象数据
		深拷贝: 将数据中所有的数据拷贝下来,对拷贝之后的数据进行修改不会影响到原数据
	var data = {
        name:"test",  //一会要被拷贝的数据,包含字符串、对象、函数、数组
        main:{
            a:1,
            b:2
        },
        fn:function(){
            
        },
        friends:[1,2,3,[22,33]]
    }

    function shallowCopy(obj){
        var data = {};
        for (var i in obj){
            if(obj.hasOwnProperty(i)){
                data[i] = obj[i]
            }
        }
        return data
    }
    var obj2 = shallowCopy(data)
    obj2.name = '修改成功'    //由于name是基本数据类型,会开辟一个新的地址来储存我们拷贝的内容,所以原数据的name属性不会被修改
    obj2.main.a = 100    //   main是引用类型,浅拷贝会直接拷贝它的地址,所以原数据的这个值也会改变
   console.log(data,obj2)
3、类型判断
	数据类型判断大概有四种typeof、instanceof、constructor、Object.prototype.toString.call()
4、数组方法
	(1).push() 可以添加一个或多个参数到数组的尾部,添加之后原来的数组会发生改变,返回的是添加后的数组的长度
	(2).pop() 从数组尾部删除一个元素,原数组会发生改变,返回数组中被删除的元素
	(3).unshift() 可以添加一个或多个参数到数组的头部,添加后原来的数组会发生改变,返回的是添加后的数组的长度
	(7).reverse() 数组翻转
	(8).sort() 数组排序
	(9).join() 数组拼接
	(10).isArray() 判断是否是数组
	(11).toString() 数组转字符串
5、数组去重
	利用indexOf属性,判断新数组里是否存在原数组中的值,当小于0,证明没有这个元素,就添加其道新数组,从而达到去重的作用
6、数组排序
	冒泡排序、快速排序—递归排序、选择性排序
7、数组扁平化
	数组扁平化就是将一个多维数组转换为一个一维数组9
实现基本方式
	(1)、对数组的每一项进行遍历。
	(2)、判断该项是否是数组。
	(3)、如果该项不是数组则将其直接放进新数组。
	(4)、是数组则回到1,继续迭代。
	(5)、当数组遍历完成,返回这个新数组。

八、 高频面试题

1、 for···in和for···of的区别
	(1)、从遍历数组角度来说,for···in遍历出来的是key(即下标),for···of遍历出来的是value(即数组的值)
	(2)、从遍历字符串的角度来说,同数组一样。
	(3)、从遍历对象的角度来说,for···in会遍历出来的为对象的key,但for···of会直接报错。
	(4)、如果要使用for…of遍历普通对象,需要配合Object.keys()一起使用。
2、null和undefined区别
	但是null和undefined仍然存在一些区别:
	(1).类型不一样
	(2).转为数值时,值不一样
	(3).===运算符可区分null和undefined
3、this, call, apply, bind
	(1).浏览器里,在全局范围内的this 指向window对象;
	(2).在函数中,this永远指向最后调用他的那个对象;
	(3).构造函数中,this指向new出来的那个新的对象;
	(4).Call、apply、bind中的this被强绑定在指定的那个对象上;
4、继承
	(1).原型链继承
		将父类的实例作为子类的原型
	优点:
		非常纯粹的继承关系,实例是子类的实例,也是父类的实例
		父类新增原型方法/原型属性,子类都能访问到
		简单,易于实现
	缺点:
    	要想为子类新增属性和方法,必须要在new Animal()这样的语句之后执行,不能放到构造器中无法实现多继承
	来自原型对象的所有属性被所有实例共享创建子类实例时,无法向父类构造函数传参
	(2).拷贝继承
		原理:遍历对象拷贝函数的属性,赋值到当前函数的属性上。再把属性值重新赋值。
		优点:支持多继承
		缺点:效率较低,内存占用高(因为要拷贝父类的属性)
		无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)
5、设计模式
	(1).什么是单例
		保证一个类只有一个实例,并且提供一个访问该全局访问点
	(2).什么是观察者模式
		行为性模型:行为型模式关注的是系统中对象之间的相互交互,解决系统在运行时对象之间的相互通信和协作,进一步明确对象的职责。
		观察者模式,是一种行为性模型,又叫发布-订阅模式,他定义对象之间一种一对多的依赖关系,使得当一个对象改变状态,则所有依赖于它的对象都会得到通知并自动更新。

九、dom操作

一、dom元素获取
	1.`document.getElementById(id``的值``)` 通过id来获取元素的对象,返回值是一个对象
	2.`document.getElementsByName(name)` 通过name属性来获取对象的,返回值是一个数组,与getElementById()方法类似,但他是查询的name元素,而不是id属性
	3.`document.getElementsByTagName()` 通过标签来获取元素的对象, 返回值是一个数组
	4.`document.getElementsByClassName()` 通过class类名来获取的对象,返回值是一个数组
	5.`document.querySelector()` css选择器,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null
	6.`document.querySelectorAll()` css选择器,返回与该模式匹配的所有元素,结果为一个类数组二、dom创建 
二、dom操作
	1. 创建:新的标签(元素节点) = document.createElement("标签名")
	2. 删除:父节点.removeChild(子节点);
	3. 插入:insertBefore(新插入的节点,参照物节点) 往某个节点的前面插入一个新的节点
	4. 追加:appendChild(新的节点的名) 当前对象追加一个子节点

十、js操作BOM

	什么是Bom?
		Bom是浏览器对象。它提供与浏览器的交互5大属性。

十一、事件

一、DOM事件三种级别
​	(1).DOM0级事件
		DOM0 级时间分两种,一是直接在标签内直接添加执行语句,二是定义执行函数。
​	(2).DOM2 级事件
		第一个参数:事件名称
		第二个参数:执行函数
		第三个参数:指定冒泡还是捕获,默认是false,冒泡。
	(3).DOM3 级事件
		同DOM2级一样,只不过添加了更多的事件类型,鼠标事件、键盘事件。

DOM事件两种类型
	(1).事件类型分两种:事件捕获、事件冒泡
		事件捕获就是由外往内,从事件发生的顶点开始,逐级往下查找,一直到目标元素。
		事件冒泡就是由内往外,从具体的目标节点元素触发,逐级向上传递,直到根节点。
二、事件委托
	事件冒泡:就是事件从最深的节点开始,然后逐步向上传播事件。
	作用:
		提高性能:每一个函数都会占用内存空间,只需添加一个事件处理程序代理所有事件,所占用的内存空间更少;
三、封装一个通用的事件绑定函数
	需要点击每个a,来。弹出他们的内容
		<div id="div3">
    		<a href="#">a1</a><br>
    		<a href="#">a2</a><br>
    		<a href="#">a3</a><br>
    		<a href="#">a4</a><br>
    		<button id='btn1'>加载更多...</button>
		</div>
// 封装通用的事件绑定函数
	function bindEvent(elem, type, fn) {
    	elem.addEventListener(type, fn)	
	}
//获取父元素
	const fu = document.getElementById('div3')
	bindEvent(fu, 'click', function (event) {
    	// console.log(event.target) // 获取触发的元素
    	let target=event.target
    	event.preventDefault() // 阻止默认行为
    	//过滤符合条件的子元素,主要是过滤掉 加载更多 
    	if(target.nodeName.toLowerCase()==="A"){
        	alert(target.innerHTML;
    	}
	})

十二、Ajax

1、原生Ajax的创建过程
	创建 XMLHttpRequest 对象;
	注册回调函数;
	设置连接信息;
	发送数据,与服务器开始交互;
	接受服务器返回数据。
2、Jsonp的原理
	JSONP(JSON with Padding)可用于解决主流浏览器的跨域数据访问的问题)。跟JSON没有关系。
	JSONP本质上是利用HTML元素的src属性都可以跨域的思路来解决的。

十三、存储

本地存储分为cookie、localStorage、sessionStorage,
	Cookie设计初衷是用来和服务器通讯,而不是本地存储,他只是被‘借用’到本地存储。
	Cookie有一些缺点:存储空间小,最大4k、http请求时需要发送到服务器,增加请求数据量、只能用				document.cookie=’…’ 来修改,太过简陋

十四、Es6

1、let、var、const区别
	(1).变量提升
		var存在变量提升,let和const不存在变量提升,即在变量只能在声明之后使用,否则会报错。
	(2).重复声明
		var声明变量时,可以重复声明变量,const和let不能重复声明。
	(3).初始值设置
		在变量声明时,var 和 let。而const声明变量必须设置初始值。
	(4).块级作用域
		块作用域由 { }包括,let和const具有块级作用域,var不存在块级作用域。
		块级作用域解决了ES5中的两个问题:
		内层变量可能覆盖外层变量
		用来计数的循环变量泄露为全局变量
2、es6解构赋值
	最常用的场景是:element-ui,vant-ui按需引入,请求接口返回数据,提取想要数据。
	常见的几种方式有
		1.默认值
		2.交换变量
		3.将剩余数组赋给一个变量
			当结构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量
		4.给新的变量名赋值
			可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名
3、箭头函数与普通函数的区别
	1、函数体内的 this 对象,就是定义时所在的作用域中的 this 值,而不是使用时所在的对象。this 相当于一个普通变量会向作用域链中查询结果,同时定义时所在对象也并不等于所在对象中的 this 值。
	2、不可以使用 arguments 对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
	3、不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数。
	4、不可以使用 new 命令,因为:
	没有自己的 this,无法调用 call,apply。
	没有 prototype 属性 ,而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 __proto__
4、class与class继承
	class:
		Class是面向对象的语法的一个实现。Class本质上类似一个模板,通过模板去构建一些东西。可以通过constructor去构建一些东西,构建的时候可以复制一些属性,一些方法。比如我们构建一个学生在这个模板,这个模板呢,可以传入名称、学号等属性,
	class继承:
		当我们有很多个class,这些class有一些共用的属性的时候,就可以抽离出来。比如说我们刚才声明的class Student(),还可以声明老师,老师和学生有一些共同点,比如都是人,人都会吃饭,学生可以学习、打招呼,老师可以教课。
	通过extends去做的
	里面通过super来执行父类的构造函数,也就是父类的构建过程。
	扩展或重写的方法
5、promise使用及实现
	1.传入一个promise的数组,返回一个新的promise,当所有给定的promise都被处理并最终以数组的形式呈现其结果时,新的promise也就被resolve了
	2.返回的顺序与传入promise的顺序一致,即使第一个promise需要很长的时间来resolve,但它仍然是结果数组中的第一个
	 Promise是一个构造函数 是一种异步解决方案
        // promise接收一个函数作为参数
        // 该函数又接收两个函数作为参数
        // promise 有三个状态 pending表示进行中
        // resolve 是将promsie从进行中转化为成功的状态的方法(fulfill ed)
        // reject 是将promsie从进行中的状态转化为失败的状态的方法(rejected)
        // promise从进行中转化为成功或者失败时就立即结束了
6、async await
	async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。
	await后面的语句会立即执行,返回promise时,由于考虑到异步操作,且下一行语句需要知道结果才能执行,所以返回的promise会等后面的同步语句执行完之后放入微队列中
7、generator函数
8、Es6中新的数据类型symbol
	JavaScript基本数据类型有6种:Undefined、Null、Boolean、String、Number、Object。
	ES6新增了一种数据类型:Symbol,表示独一无二的值,Symbol最大的用途是用来定义对象的唯一属性名。
	Symbol不是一个构造函数,如果用new Symbol会报错(Symbol是一个原始类型的值,不是对象)。
	Symbol值可以显式转为字符串,也可以转为布尔值,但是不能转为数值。

一、状态码

http状态码分类:
	100-199 提示信息 – 表示请求正在处理
 	200-299 成功 – 表示请求正常处理完毕
 	300-399 重定向 – 要完成请求必须进行更进一步的处理
 	400-499 客户端错误 – 请求有语法错误或请求无法实现
 	500-599 服务器端错误 – 服务器处理请求出错
常见的状态码有哪些?
	200:请求成功,浏览器会把响应体内容(通常是html)显示在浏览器中;
	404:(客户端问题)请求的资源没有找到 
	400: 语义有误,当前请求无法被服务器理解。
	401: 当前请求需要用户验证 
	403: 服务器已经理解请求,但是拒绝执行它。
	500:(服务端问题)请求资源找到了,但服务器内部发生了不可预期的错误;
	301/302/303:(网站搬家了,跳转)重定向

二、当url输入到页面发生了什么

**大致过程是:**
	浏览器的地址栏输入URL并按下回车,
	查找当前的URL是否存在缓存,并比较缓存是否过期,
	DNS解析URL对应的IP,
	根据IP建立TCP连接(三次握手),
	HTTP发起请求,服务器处理请求,浏览器接收HTTP响应,
	渲染页面,构建DOM树,
	关闭TCP连接(四次挥手)。

三、跨域

什么是跨域
	跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域
JSONP
	浏览器的script、img、iframe标签是不受同源策略限制的 ,所以通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的callback函数,并把把我们需要的json数据作为参数传入。在服务器端,当req.params参数中带有callback属性时,则把数据作为callback的参数执行,并拼接成一个字符串后返回。 
- 优点:兼容性好,在很古老的浏览器中也可以用,简单易用,支持浏览器与服务器双向通信。 
- 缺点:只支持GET请求,且只支持跨域HTTP请求这种情况(不支持HTTPS)

在vue 中主要是通过vue 脚手架中的vue.config.js 文件来配置的,通过在devServer中的proxy来配置跨域的前缀

四、Git

	新增文件的命令:git add file或者git add .
	提交文件的命令:git commit –m或者git commit –a
	查看工作区状况:git status –s
	拉取合并远程分支的操作:git fetch/git merge或者git pull
	查看提交记录命令:git reflog
	master分支:最为稳定功能比较完整的随时可发布的代码,即代码开发完成,经过测试,没有明显的bug,才能合并到 master 中。请注意永远不要在 master 分支上直接开发和提交代码,以确保 master 上的代码一直可用;
	develop分支;用作平时开发的主分支,并一直存在,永远是功能最新最全的分支,包含所有要发布 到下一个 release 的代码,主要用于合并其他分支,比如 feature 分支; 如果修改代码,新建 feature 分支修改完再合并到 develop 分支。所有的 feature、release 分支都是从 develop 分支上拉的。
	feature分支;这个分支主要是用来开发新的功能,一旦开发完成,通过测试没问题(这个测试,测试新功能没问题),我们合并回develop 分支进入下一个 release
	release分支;用于发布准备的专门分支。当开发进行到一定程度,或者说快到了既定的发布日,可以发布时,建立一个 release 分支并指定版本号(可以在 finish 的时候添加)。开发人员可以对 release 分支上的代码进行集中测试和修改bug。(这个测试,测试新功能与已有的功能是否有冲突,兼容性)全部完成经过测试没有问题后,将 release 分支上的代码合并到 master 分支和 develop 分支
	hotfix分支;用于修复线上代码的bug。**从 master 分支上拉。**完成 hotfix 后,打上 tag 我们合并回 master 和 develop 分支。
GitFlow主要工作流程

五、http和https的区别

	1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
	2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
	3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
	4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

六、三次握手和四次挥手

三次握手:
	1)发送端首先发送一个带有SYN(synchronize)标志地数据包给接收方。
	2)接收方接收后,回传一个带有SYN/ACK标志的数据包传递确认信息,表示我收到了。
	3)最后,发送方再回传一个带有ACK标志的数据包,代表我知道了,表示’握手‘结束。
	通俗的说法-上面三条的意思
		client(服务器)----Server(客户端)
		1)Client:嘿,李四,是我,听到了吗?
		2)Server:我听到了,你能听到我的吗?
		3)Client:好的,我们互相都能听到对方的话,我们的通信可以开始了。
四次挥手:
	 1)第一次挥手:Client发送一个FIN,用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态。
	 2)第二次挥手:Server收到FIN后,发送一个ACK给Client,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号),Server进入CLOSE_WAIT状态。
 	3)第三次挥手:Server发送一个FIN,用来关闭Server到Client的数据传送,Server进入LAST_ACK状态。
 	4)第四次挥手:Client收到FIN后,Client进入TIME_WAIT状态,接着发送一个ACK给Server,确认序号为收到序号+1,Server进入CLOSED状态,完成四次挥手
 	通俗的说法-上面四条的意思
 		client(服务器)----Server(客户端)
		1)Client:我所有东西都说完了
		2)Server:我已经全部听到了,但是等等我,我还没说完
		3)Server:好了,我已经说完了
		4)Client:好的,那我们的通信结束l

七、使用基于token的登录流程

	1、客户端使用用户名跟密码请求登录
	2、服务端收到请求,去验证用户名与密码
	3、验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端
	4、客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里或者 Local Storage 里
	5、客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
	6、服务端收到请求,然后去验证客户端请求里面带着的 Token,如果验证成功,就向客户端返回请求的数据

八、Get和post

GET请求只能进行url编码,而POST支持多种编码方式。
GET请求会被浏览器主动cache,而POST不会,除非手动设置。
GET产生的URL地址可以被Bookmark,而POST不可以。
GET在浏览器回退时是无害的,而POST会再次提交请求。
**Get****和post****的选择:**
	1.私密性的信息请求使用post(如注册、登陆)。
	2.查询信息使用get。

九、web安全及防护

(1)XSS攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码
	用来窃取cookie中的用户信息
	解决:对一些输入的字符进行过滤,尽量采用post表单提交的方式
(2)CSRF攻击
	是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法
	解决:通过验证码的方式解决
(3)SQL注入攻击
	就是通过吧SQL命令插入到Web表单递交或输入域名,最终达到欺骗服务器执行恶意的SQL命令。
	解决:表单输入时通过正则表达式将一些特殊字符进行转换

十、html和XML

HTML:超文本标记语言
XML:可扩展标记语言
1、语法上
      HTML:语法要求不是很严格,例如:不严格区分大小写,可自动过滤空格,可以不适用引号等。
      XML:与之相反。
2、标记不同
      html使用固有的标记;而xml没有固有的标记。
      Html标签是预定义的;XML标签是免费的、自定义的、可扩展的。
3、作用不同
	html是用来显示数据的;xml是用来描述数据、存放数据的,所以可以作为持久化的介质。Html将数据和显示结合在一起,在页面中把这数据显示出来;xml则将数据和显示分开。 XML被设计用来描述数据,其焦点是数据的内容。HTML被设计用来显示数据,其焦点是数据的外观。

Vue相关

一、 vue双向数据绑定

	VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。 

二、 vue虚拟dom,diff算法

	虚拟dom
1、**想要理解虚拟****dom****首先要知道什么是虚拟****dom****?**
	虚拟dom可以简单的用一句话概括,就是用普通的js对象来描述DOM结构,因为不是真实DOM,所以称之为虚拟DOM。
2、为什么要用虚拟DOM来描述真实的DOM呢?
	创建真实DOM成本比较高,如果用 js对象来描述一个dom节点,成本比较低,另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。
	diff算法
		diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。

三、 组件通讯

1.****父传子:**
	在父组件的子组件标签上绑定一个属性,挂载要传输的变量。在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props:["属性名"] props:{属性名:数据类型}
2.****子传父:**
	在父组件的子组件标签上通过绑定自定义事件,接受子组件传递过来的事件。子组件通过$emit触发父组件上的自定义事件,发送参数.
3.****兄弟组件传值:**
	通过main.js初始化一个全局的$bus,在发送事件的一方通过$bus.$emit(“事件名”,传递的参数信息)发送,在接收事件的一方通过$bus.$on("事件名",参数)接收传递的事件

四、 Vuex

vuex :是一个专为vue.js开发的状态管理器,采用集中式存储的所有组件状态,通过vuex我们可以解决组件之间数据共享的问题,后期也方便我们管理以及维护
	场景:多个组件共享数据或者是跨组件传递数据时
有五种,分别是State , Getter , Mutation , Action , Modules
1. state:vuex的基本数据,用来存储变量
2. getters:从基本数据(state)派生的数据,相当于state的计算属性
3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
6.高级用法-辅助函数(语法糖)
	1. 有那几个辅助函数(4大金刚)
		mapState,mapActions,mapMutations,mapGetters
	2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
	3. 如何使用:
		Import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

五、 自定义指令,自定义过滤器

自定义指令:
	vue中提供了丰富的内置指令,如v-if,v-bind,v-on…,除此之外我们还可以通过全局的自定义指令Vue.directive({})或者局部的自定义指令directives:{}来定义指令
全局指令:
	在main.js中使用Vue.directive()函数自定义一个v-focus全局指令
	在其它组件中引入v-focus指令后,表单会自动获取焦点
局部指令:
	局部指令定义使用directives,我们在某个组件中export default {}中,定义一个设置颜色的指令v-color
钩子函数:
	自定义指令的生命周期,有5个事件钩子,可以设置指令在某一个事件发生时的具体行为:
	1、bind(el,binding): 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
	2.inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
	3、update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
	4、componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
	5、unbind: 只调用一次, 指令与元素解绑时调用。
自定义过滤器:
	过滤器通常用来对即将显示的数据进行进一步处理,如格式化时间戳,内容加《》…,在模板中使用通过“管道符( | )”方式引用
全局过滤器:
	在main.js中使用Vue.filter()函数自动定义一个capital全局指令,将字母全部转为大写
	定义一个组件,然后引入capital过滤器,将msg的值hello格式化为HELLO
局部过滤器:
	使用filters:{},与methods,data同级

六、 vue-router(路由原理?路由守卫?传参)

1、路由原理
​  通过改变 URL,在不重新请求页面的情况下,更新页面视图。
路由原理分为两种模式:
	hash模式:在浏览器中符号的“#”,以及#后面的字符称之为hash,用window.location.hash
	history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),
路由守卫:
	全局守卫:
		router.beforeEach((to,from,next)=>{}) 进入之前触发
		router.afterEach((to,from)=>{}) 进入之后触发(后置钩子函数,不需要next)
	组件守卫:
		beforeRouteEnter((to,from,next)=>0{}) 进入路由前调用
		beforeRouteUpdate((to,from,next)=>{}) 该组件被复用时调用
		beforeRouteLeave((to,from,next)=>{})导航离开该组件的对应路由时调用
	单个守卫:
		beforeEnter((to,from,next)=>{})
传参:
	分为三种: 
		分别是query,params,动态路由传参 
	接收: 
		通过query方式传递过来的参数一般是通过this.$route.query接收 
		通过params方式传递过来的参数一般是通过this.$route.params接收 
		通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收

七、 声明周期(那几个?每一个生命周期的特点,可以做什么)

生命周期让我们在控制整个vue时更容易形成更好的逻辑,可以分为三个阶段,挂载阶段,更新阶段,销毁阶段
分别有:
	创建前:beforeCreate() 只有一些实例本身的事件和生命周期函数
	创建后:Created() 是最早使用data和methods中数据的钩子函数
	挂载前:beforeMount() 指令已经解析完毕,内存中已经生成dom树
	挂载后:Mounted() dom渲染完毕页面和内存的数据已经同步
	更新前:beforeUptate() 当data的数据发生改变会执行这个钩子,内存中的数据是新的,页面是旧的
	更新后:Updated() 内存和页面都是新的
	销毁前:beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的,可以做一些释放内存的操作
	销毁后:Destroyed() 已经销毁完毕

八、 自定义组件

在vue中开发,都是用的组件化的思想开发的,一般在都会在搭建项目的时候,都会先建立组件的模板,把架子搭起来。也就是在组件中定义好`<template>`视图层,`<script>`逻辑层,`<style>`css样式层。
在vue中使用组件封装的方式可以使我们的开发效率提高,能够把页面抽象成相对独立的模块。

九、 常见的指令,修饰符

1、常见的指令
	在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令,指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定
v-for(循环)、v-on(绑定事件)、v-if(判断)、v-else(判断是否成功)、v-show(显示隐藏)、v-bind(属性名)、v-model(双向绑定)、
2、修饰符
	在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符常用
•.stop :阻止事件冒泡:由内而外,通俗的将就是阻止事件将向上级DOM元素传递
•.capture :事件捕获:由外而内,在捕获阶段,事件从window开始,之后是document对象,一直到触发事件的元素
•.self :当事件作用在元素本身时才会触发
•.once :只触发一次
•.prevent: 阻止默认事件
•·passive:告诉浏览器你不想阻止事件的默认行为
•·trim:自动过滤用户输入的首尾空格
语法:@事件名.修饰符=“方法名”

十、 Vue2和vue3的区别

1.vue3新特性:
  1.数据响应重新实现(ES6的proxy代替Es5的Object.defineProperty)
  2.源码使用ts重写,更好的类型推导
  3.虚拟DOM新算法(更快,更小)
  4.提供了composition api,为更好的逻辑复用与代码组织
  5.自定义渲染器(app、小程序、游戏开发)
  6.Fragment,模板可以有多个根元素
2.vue2 vue3响应原理对比
  1.vue2使用Object.defineProperty方法实现响应式数据
  2.缺点:
    无法检测到对象属性的动态添加和删除
    无法检测到数组的下标和length属性的变更
  3.解决方案:
    vue2提供Vue.$set动态给对象添加属性
    Vue.$delete动态删除对象属性
    重写数组的方法,检测数组变更   
1、Vue 3 的 Template 支持多个根标签,Vue 2 不支持
2、Vue 3 有 createApp(),而 Vue 2 的是 new Vue()
createApp(组件),new Vue({template, render})

十一、 Keep-alive

keep-alive是vue2.0加入的一个特性, 能缓存某个组件,或者某个路由。
	缓存的好处:
	1、节省性能消耗,避免一个组件频繁重新渲染,节省开支
	2、保存用户状态,比如说:我们在填写收货地址的页面,需要跳转到另一个页面通过定位选择地址信息再返回继续填写,这时候需要缓存收货地址页面,避免跳转页面导致用户数据丢失。

十二、 多环境变量

首先是通过在根目录下创建.env.*(配置文件)文件,development 本地开发环境配置、test测试环境配置、production 正式环境配置。我们可以在封装的接口api文件夹中定义baseUrl文件,来区分不同环境下对应的不同的基本路径。

十三、 对axios封装(url统一管理、axios请求拦截、响应拦截、函数封装)

首先要安装axios,一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块,然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口url,
在request.js中添加请求拦截和响应拦截。在请求拦截中,会给请求头添加token字段,还有loading动画的开启。在响应拦截中,可以做一些loading动画的关闭,还有可以根据后端返回的状态码,做一些检验token是否有效或者过期的操作。接着就是做一些axios进行的api接口的封装,这里我用到了async,await封装请求接口函数,这样可以将异步操作同步化操作,代码更加友好,避免回调地域的出现。

十四、 Element-ui和vant-ui按需引入

首先安装按需引入的插件,在babel.config.js中添加按需引入的配置,创建一个plugin文件夹,定义一个js文件用来存放按需引入的代码,之后在建好的js文件中首先导入vue,再导入需要的vant-ui插件,通过vue.use()全局注入。
修改样式可以用样式穿透 /deep/

十五、 Sass配置

安装node-sass sass-loader
使用lang=”scss”

十六、 Rem、vm/vh设置

1. 通过安装cnpm install lib-flexible postcss-pxtorem --save-dev
2. Main.js 中导入插件
3. 根目录创建.postcssrc.js配置

十八、 Slot插槽

插槽就是父组件往子组件中插入一些内容。
有三种方式,默认插槽,具名插槽,作用域插槽
	1.默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据
	2.具名插槽是在父组件中通过slot属性,给插槽命名,在子组件中通过slot标签,根据定义好的名字填充到对应的位置。
	3.作用域插槽是带数据的插槽,子组件提供给父组件的参数,父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。

-十九、 为什么v-for使用key

key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更7准确, 更快的找到对应的vnode节点

二十、 为什么data是一个函数

1.根据实例对象data可以是对象也可以是函数,不会产生数据污染情况。
如果不是一个函数,每个组件实例的data都是同一个引用数据,当该组件作为公共组件共享使用,一个地方的data更改,所有的data一起改变,如果data是一个函数,每个实例的data都在闭包中,就不会各自影响。

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进