目录
cookie,localStorage,sessionStorage的区别
Vue数据双向绑定原理
实现mvvm的数据双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来给各个属性添加setter,getter并劫持监听,在数据变动时发布消息给订阅者,触发相应的监听回调。
BFC
块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display
浏览器的渲染过程
将获取的html解析成dom树,处理css,构成层叠样式表模型,将dom树和CSSOM合并为渲染树,将渲染树的节点布局计算,将样式绘制到页面上
什么是文档流?
文档流处在网页的最底层,它表示的是一个页面中的位置,我们所创建的元素默认都处在文档流中。
浏览器端的缓存?
- 客户端
H5存储:
本地存储:localStorage&SessionStorage
离线存储:ApplicationCache
本地数据库存储:indexedDB、webSQL
H5之前:
本地存储:Cookie、IE早期版本的专属userData
二、服务端
Session Cookie、MySQL
http缓存,flash缓存
什么是插槽?
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。
原型是什么?
原型指的是两个原型属性:
prototype: 显示原型属性
_proto_: 隐式原型属性
所有函数都有显示原型属性。 它的值叫做原型对象,这个原型对象默认有两个属性:
constructor 指向函数本身
_proto_ 指向Object.prototype
特殊: Object.prototype._proto_ === null 这个就是原型链尽头
注意:箭头函数: 没有 显示原型 属性,不能被new调用 ,只有隐式原型。
所有对象都有隐式原型属性。
对象的隐式原型属性的值指向其构造函数显示原型属性的值
如果这个普通对象是你 new 的,构造函数就是你 new 的函数
如果不是,就是 new Obejct 产生的,所以构造函数就是 Object
所有函数都是 new Function 产生的,包括它自己 Function
所有数组都是 new Array 产生的
面向过程编程POP 和 面向对象编程OOP
面向过程编程 POP(Process-oriented programming)
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。
面向对象编程 OOP (Object Oriented Programming)
面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。
面向对象是以对象功能来划分问题,而不是步骤。
在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目。
面向对象的特性: 封装性 继承性 多态性
封装:把一堆相关的数据封装到一起形成一个有机的类;
继承:子类自动拥有父类的所有属性和方法,继承是程序复用性的体现。
多态:解决同一个问题有不同的方法。
1、面向过程(函数):
做小的项目时,会使用面向过程的思路完成
第一步:先思考项目的流程,流程中的每一步就是一个模块(功能:就是个函数)。
第二步:我们实现每个函数(定义每个函数),在定义函数时,就需要考虑到数据(形参或者变量)。
在面向过程里,每个函数和变量没有所属。所以调用函数时,前面都没有对象。
所以,在面向过程里,描述时,没有主语,如:先干啥,再干啥
面向过程相当于: 单干(一个人做事情)
2、面向对象:
做大型项目时,会使用面向对象的思路完成。
第一步:要考虑的是项目中需要的类(属性和方法)。
第二步:实现流程(new出对象,调用对象的方法)
第一步做什么,第二步做什么。
在面向对象里,每个函数(方法)和变量(属性)都有所属,调用函数时,前面有对象。
所以,在面向对象里,描述时,有主语,如:谁先干啥,谁再干啥
面向对象相当于: 团队配合(多个人做事情)
HTTP和HTTPS
http:超文本传输协议,用于在浏览器和服务器之间传递信息的,是以明文的形式发送内容的,不适合传输敏感信息,比如身份证账号密码..
https:安全套接字超文本传输协议 实在http的基础上增加了ssl协议, ssl是靠证书服对浏览器和服务器之间的通信进行加密
https协议是由ssl+http构成的是可加密的,身份认证的网络协议,比http更安全
区别:
https是需要申请证书,证书需要费用http是明文传输,
https加密传输连接方式不同,端口不同 http 80 https 443
http是无状态连接, https由ssl+http构成的是可加密的,身份认证的网络协议
常见的跨域方式
什么是跨域?
只要 协议,域名,端口有任何一个的不同,就被当作是跨域常见方式:
1. jsophtml中的script src属性获取其他源的数据
<script>function getData(res)fconsole. Log(res)]</script>
<script src="http://www.baidu. com/news?callback=getData">
2 .cors跨域资源共享支持所有的主流浏览器ie9+XMLHttpRequest发送请求的时候,如果不同源,
heatersf {Origin} 后台处理: Access-control-allow-origin:*
3. h5 window. postMessage跨域 主流浏览器 ie8+
window. postMessage ("字符","*")
注意: vue中跨域 :代理proxy 本质上cors跨域
vue. config.js
proxy:{
target:
changeorigin:
pathRewrite:
}
防抖和节流
防抖:用户触发事件过于频繁,只要最后一次事件的操作
节流:控制执行次数节流的 作用:控制高频时间执行次数
[未补全]
闭包
闭包:函数嵌套函数,内部函数就是闭包
正常情况下,函数执行完成,内部变量会销毁(销毁:释放内存空问)
闭包,内部函数没有执行完成,外部函数变量不会被销毁。
应用场景:封装
function outerFun(){
let b = 10;
function innerFun(){
console.log(b);
}
return innerFun;
}
let fun = outerFun()
fun();
宏任务与微任务
宏任务: 计时器、ajax、读取文件
微任务: promise.then
执行顺序:1.同步程序 2. process.nextTick 3.微任务 4.宏任务 5. setlmmediate
call apply bind
call 可以调用函数,call可以改变函数中this指向
区别:apply 第二个参数以数组的形式传参
区别:bind 作为一个返回值返回一个函数,再调用
let Aname = {
name:"小明",
sayName(){
console.log(""+this.name);
},
eat(food,food2){
console.log("喜欢吃"+food+food2);
}
}
let Bname = {name:"小红"}
Aname.eat.call(Bname,'奶茶','火锅')
Aname.eat.apply(Bname,['奶茶','火锅'])
let fun = Aname.eat.call(Bname,'奶茶','火锅')
fun()
继承:子类可以使用父类的方法
function Cnimal(){
// this指向person
this.eat = function(){
console.log("吃饼干")
}
}
function Amdin(){
this.right = function(){
console.log('超级管理员');
}
}
function Person(){
// this指向person
Cnimal.call(this)
Amdin.call(this)
}
let person = new Person();
person.eat()
person.right()
递归
递归:自己调自己,计算累加
function fun(n){
if(n === 1){
return 1;
}else{
return n + fun(n - 1)
}
}
let result = fun(3)
console.log(result);
/*
fun(1) : 1
fun(2) : 2+ 1= 3
fun(3) : 3 + 2 + 1 = 6
*/
浅拷贝和深拷贝
const student1 ={
name:"小明",
age:2,
girlfriend:{
fname: "小红"
}
}
//浅拷贝
function copy(obj){
let newobj = {};
for(let i in obj){
newobj[i] = obj[i]
};
return newobj;
}
// 深拷贝
function copy(obj){
let newobj = {};
for(let i in obj){
if (obj[i] instanceof Object) {
newobj[i] = copy(obj[i])
}else{
newobj[i] = obj[i]
}
};
return newobj;
}
// 深度克隆
function copy(obj){
let str = JSON.stringify(obj);
let newobj = JSON.parse(str);
return newobj
}
const student2 = copy(student1);
student1.girlfriend.name = "小花"
console.log(student1);
console.log(student2);
const person = {...student1}//扩展运算符的浅拷贝
console.log(person);
ES6类与继承
1.class声明类
2.constructor定义构造函数初始化
3.extends继承父类
4.super调用父级构造方法
5.static 定义静态方法和属性
6.父类方法可以重写
class User{
constructor(username, password){
this.username = username;
this. password = password;
}
login(){
console.log("登录")
}
}
class Admin extends Userf{
deletePerson(){
console.log("删除一个人")
}
}
let amdin = new Admin()
admin.login()
ES5原型继承原型链
function User(username, password){
this.username = username;
this.password = password;
/* this.login = function(){
console.log("登录")
} */
}
Object.prototype.login = function(){
console.log("Object原型上的登录方法")
}
function Admin(){
this.deletePerson = function(){
console.log("删除一个人")
}
}
Admin.prototype = new User();
let admin = new Admin();
admin.login();
Jquery ajax请求
$('button').eq(0).click(function () {
$.ajax({
// url
url: 'http://127.0.0.1:9000/jquery-server',
// 参数
data:{a:100, b:200},
// 请求类型
type: 'GET',
// 响应体结果
dataType: 'json',
// 成功回调
success: function(data) {
console.log(data)
},
// 超时时间
timeout: 2000,
// 失败回调
error: function() {
consloe.log('出错了')
},
// 头信息
headers: {
c: 300,
d: 400
}
})
})
Axios 请求
btns[0].onclick = function () {
axios({
// 请求方式
method: 'POST',
url:'/jquery-server',
// url参数
params:{
vip:10,
level:30,
},
// 头信息
headers:{
a:100,
b:200,
},
// 请求体参数
data:{
username:'admin',
password:'admin',
},
}).then(response=>{
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
})
}
vuex :
vuex 存放数据的状态
需要安装的 npm i vuex-persistedstate
state : 公共数据,组件中.this.$store.state.变量名
mutation :同步方法更新state中的数据的
action :异步方法,组件通过this.$store.dispatch("方法名",参数)
getter :读取state 中的数据
commit :状态提交,对mutation进行提交
vuex数据刷新页面消失,持久化
localStorage
vuex-persistedstate装 new Vuex.store添加配置 plugins:[createPersistedstate]
persistedstate本质也是利用localStorage
vue路由 hash 模式和 history
hash 模式:
# 后面 hash 值的变化,不会导致浏览器向服务器发出请求,浏览器不发出请求,就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化,然后根据 hash 变化来实现更新页面部分内容的操作。
- 地址中永远带着#号,不美观 。
- 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
- 兼容性较好。
history 模式的实现,主要是 HTML5 标准发布的两个 API,pushState 和 replaceState,这两个 API 可以在改变 url,但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作
- 地址干净,美观 。
- 兼容性和hash模式相比略差。
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
url 展示上,hash 模式有“#”,history 模式没有
刷新页面时,hash 模式可以正常加载到 hash 值对应的页面,而 history 没有处理的话,会返回 404,一般需要后端将所有页面都配置重定向到首页路由
常用DOM方法总结
getElementById() | 返回带有指定ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
getElementsByName('a') | 通过name属性获取一组元素节点对象 |
document.querySelector('#a') | 通过CSS选择器来获取一个元素节点对象 |
document.querySelectorAll('span') | 通过CSS选择器来获取一组元素节点对象 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
当前节点.paretNode | 表示当前节点的父节点 |
当前节点.previousSibling | 表示当前节点的前一个兄弟节点 |
当前节点.nextSibling | 表示当前节点的后一个兄弟节点 |
父节点.firstchild | 可以获取第一个子节点(包括空白文本节点) |
父节点.firstElementchild | 可以获取第一个子元素(不包括空白文本节点) |
父节点.childNodes | 表示当前节点的所有子节点 |
cookie,localStorage,sessionStorage的区别
生命周期:
cookie: 可以设置失效时间,没有设置的话,默认是关闭浏览器后失效。
localStorage:除非被手动清除,否则将永久保存。
sessionStorage:仅在当前网页会话下有效,关闭页面或者浏览器后会被清除。存放数据大小:
1.cookie:4kb
2.localStorage 和sessionStorage 可以保存5MB左右的信息cookie:每次会携带在HTTP头中,使用cookie保存过多信息会带来性能问题
localStorage 和 sessionStorage 仅在浏览器中保存。应该场景:每次http都会携带cookie信息,浪费带宽,cookie尽可能少的使用.
MVVM理解
mvvm model-view-viewmodel mvc的改进版
m model 模型:数据访问层
view 视图层:结构布局外观 html css h5 c3响应式
viewmodel公共属性和命令, mvvm没有控制器,有一个绑定起,试图和模型之间进行同行的
结论: 将结构布局和业务罗辑分开, 通过viewmodel在结构布局和业务逻辑之间进行通信
优势: 1.低耦合 2.可重用性高 3.分层开发,便士维护
px、em、rem、vm、vh、vw的区别
px、em、rem、vm、vh、vw(除px都是百分比计算)
em:根据其父元素的font-size来计算,默认1em=16px
rem: 和em相同,只是rem是相对于根元素。如body font-size=10px/62.5%;
vm: 根据可视区宽度和高度最小的计算,1vm=1%可视区大小
vw: 是vm的具体,指可视区宽度
vh:可视区高度
打包之后dist目录过大
npm run build
vue.config.js 需要配置的参数
entry
output
1> dist/会生成.mpa文件 在vue.config配置文件中设置取消: productionSourceMap:false
2>组件和路由懒加载
3>常用插件最好使用<script src="http://www. baidu.com/echarts/.....">[不推荐]
4>对于文件和图片压缩一下 [看需求,调大小]
需要安装组件: npm install -s compression-webpack-plugin
导入:最小化代码 minisize(true)
分割代码: splitChunksl
超过限定值的文件进行压缩
threshold:文件大小(字节为单位)
Set [集合]
let arr = [1, 2,3,4,5,4,3, 2,1];
//1.数组去重//
let result = [...new Set(arr)];
console.log(result);
//2.交集
let arr2 = [4,5,6,5,6];
let result2 = [...new Set(arr)].filter(item => {
let s2 = new Set(arr2); // 4 5 6
if(s2.has(item)){
return true;
}else{
return false;
}
})
console.log(result2);
let result3 = [...new Set(arr)].filter(item =>new Set(arr2).has(item));//简写
console.log(result3);
//3.并集
let union = [...new Set([...arr, ...arr2])];
console.log(union);
//4.差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));console.log(diff);
v-for中为什么要有key
key的作用让每个item(虚拟数据,虚拟dom)有一个唯一的识别身份,可以下标值index或者id, 主要是为了vue精准的追踪到每一个元素,高效的更新虚拟DOM。
简写:[key可以提高虚拟DOM的更新效率]
在vue中 默认“就地复用”策略,在DOM操作的时候,如果没有key会造成选项错乱
key只能是字符串或num
keep-alive
keep-alive 组件缓存 刷新的时候保持状态
keep-alive 缓存组件,避免组件内的数据重复宣染,直接可以在页面中调用优点:组件切换过程中,组件被保存在内存中,防止重复宣染,减少加载时间,提高用户体验性
keep-alive有三属性:
include - 字符串或正则表达,只有匹配的组件会被缓存
max-数字,最多可以缓存多少组件实例
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
两个独有的生命周期钩子函数 这两个函数分别是:
activated 在keep-alive组件激活之前也就是当显示组件时触发
deactivated 在keep-alive组件激活之后当隐藏缓存组件时触发
组件传值
组件传值:
父子组件:
父:data(){ return{a:1}}
<son :a="a">
子:props:["a"]
<div>{{a}}</div>
子父组件:
子:
data(){ return{a:1}}
methods:{
btn(){
this.$emit('方法名称',value)
}
}
父:
<子 @方法名称="方法名称">
methods:{
方法名称(sonData){
}
}
兄弟组件:
localstorage
bus:
定义bus.js 共享工具
A组件:
导入bus
bus.$emit()
B组件:
导入bus
bus.$on()
vuex 状态管理 包括数据状态:
state 存储数据 this.$stroe.state...
mutation:同步,更新state数据
actions: this.$store.dispatch("方法名",参数)
getters: state数据读取commit:提交---》mutation
vuex 刷新页面,数据会重置:
数据持久化: localstorage
persistedState 组件 利用localstorage实现持久化
new viex.store 配置 plugins[createPersistedStatep]