js方面
防抖和节流
防抖:高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间在触发,则重新计算时间(后面触发的事件执行,替代了前面的事件)
function one(fn){
let timeout = null
return function(){
cleartTimeout(timeout)
timeout = SeTimeout(()=>{
console.log(‘防抖成功’)
},3000)
}
}
节流:高频率触发的事件,在指定的单位时间内,只响应第一次(前面触发的执行前,忽略后面的事件)
function one(fn, wait){
let partime = 0
return function(){
let data = new Data().getTime()
if(data-partime > wait){
fn.apply(this,argments)
partime = data
}
}
}
js闭包
闭包就是一个函数,两个函数彼此嵌套,内部函数就是闭包形成闭包条件是内部函数需要通过return给返回出来。可以避免全局的污染
由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
function one(){
var name = 'hellow world'
return function two(){
return name
}
}
var ace = one()
console.log(ace())
事件捕获和事件冒泡
事件捕获:当某个函数出发的时候,从根元素同类型的事件开始,朝着子一级触发,一直到这个事件
事件冒泡:当某个函数触发的时候,他的父级同类型的事件也会被触发,直到根元素
阻止冒泡: event.stopPropagation() vue中.stop
阻止捕获:event.stopImmediatePropagation()
js怎样动态添加事件
addEventListener
typeof返回类型有哪些
string’,‘number’,‘boolean’,‘undefined’,‘symbol’,‘object’,‘function ’
转载于:https://blog.csdn.net/Jet_Lover/article/details/116176668
js怎样判断是不是数组
Array.isArray() // 判断是否是数组
null和undefined 的区别
undefined 变量未定义 变量没有被初始化
null 对象存在 常用于函数返回一个不存在的对象
创建、添加 插入 替换 删除到某个接点的方法
obj.cerateElement() //创建
obj.appendChidl() //添加
obj.innersetBefore() //插入
obj.replaceChild() //替换
obj.removeChild() //删除
ajax 和axios的区别
axios 是基于promise的htttp 库,拦截请求和响应 取消请求 自动转换未json数据
ajax是与服务器换数据并更新部分网页,再不重新加载整个页面的情况下
ajax=异步的javascrip 和xml
基本一致 参数有些不同
axios类型是method
type类型是get
说说你对Promise的理解?
所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。
Promise 对象有以下两个特点:
(1)、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。
(2)、一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。
promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
访问一个url经历的过程
客户端获取URL - > DNS解析 - > TCP连接 - >发送HTTP请求 - >服务器处理请求 - >返回报文 - >浏览器解析渲染页面 - > TCP断开连接
浏览器之间的通讯
使用localStorage.setItem(key,value);添加内容
使用storage事件监听添加、修改、删除的动作
window.addEventListener("storage",function(event){
$("#name").val(event.key+”=”+event.newValue);
h5和c3的新特性
h5的新特性:
1、语义化标签:header、footer、nav\section、article、aside
2、表单输入类型:email、tel 、number、url
3、视频标签:audio、video
4、拖拽属性:draggable
5、类型:classlist
cookie的大小不超过4kb,且每次请求都会发送回服务器,在设置的过期时间前有效,即使关闭浏览器
h5提供:
localStorage:数据始终有效,直到手动去删除。跨浏览器无效,浏览器提供的本地数据库,至少250kb,甚至没有上限
localStorage.setItem(key,value)
locatStorage.getItem(key)
localStorage.removeItem(key)
sessionStorage:基于会话,关闭浏览器之后数据消失,5M大小,跨浏览器无效
c3:
1、选择器:nth-child()、nth-of-type()
2、盒模型
3、背景:background-image\background-size\background-origin
4、渐变:linear-gradient radial-gradient
5、边框:border-radius、border-image
6、阴影:box-shadow\text-shadow
7、2d/3d转换:transform:translate rotate scale
8、过度:transtion
9、弹性盒子:flex
10、动画:keyframes、animation
11、媒体查询:@media
转载于:https://blog.csdn.net/weixin_48549175/article/details/112250454
数组去重
使用es6数组去重
[...new Set(array)]
js普通去重
for(var i =0; i<arr.length;i++){
var b1 = true
for(var j= 0; j <newArr.length; j++){
if(arr[i] === newArr[j]){
b1 = false
break
}
}
if (b1){
newArr.push(arr[i])
}
}
深拷贝和浅拷贝
直接等于号就是浅拷贝或者Object.assign()
深拷贝:json.parse(json.stringify())
普通函数和箭头函数的this指向
普通函数:谁调用this指向谁
箭头函数:this指向父级元素
es6的新特性有哪些
1)let声明变量和const 声明变量,两个都是块作用域
es5种没有块作用域,并且var有变量声明提前,在let种,使用的变量一定要进行声明
2)箭头函数
es6种函数名定义不在使用关键字function(),利用()=>来定义
3)模板字符串
模板字符串是增强版的字符串,用反引号(`)标识,可以当作普通字符串使用,也可以用来定义多行字符串
4)解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值
5)for of循环
for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象,以及字符串
6)import、export导入导出
ES6标准中,Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化,将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用
7)set数据结构
Set数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数
8)… 展开运算符
可以将数组或对象里面的值展开;还可以将多个值收集为一个变量
9)修饰器 @
decorator是一个函数,用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
10)class 类的继承
ES6中不再像ES5一样使用原型链实现继承,而是引入Class这个概念
11)async、await
使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成
12)promise
Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、强大
13)Symbol
Symbol是一种基本类型。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的
14)Proxy代理
使用代理(Proxy)监听对象的操作,然后可以做一些相应事情
var、let、const之间的区别
var声明变量可以重复声明,而let不可以重复声明
var是不受限域块级元素,而let是受限于块级元素
var可以声明的上面访问变量,let有暂存死区,声明上面访问变量会报错
const声明必须赋值,否则报错
const定义不可变的两,改变了就会报错
setTimeout、Promise、Async/Await 的区别
事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行
promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行
async函数表示函数里面可能会有异步方法,await后面跟一个表达式
async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行
for of 和for in的区别
for in 获取的是对象的键名
for of 获取的是对象的键值
for of运行更快
跨域是什么引起的
造成跨域的原因是浏览器的同源策略
1、不同域名
2、同域名下不同文件
3、同域名下不同的端口
4、同域名不同协议
5、主域名相同子域名不同
6、同域名不同二级域名
解决方案
1、jsonp 跨域 需要目标服务器配置callback函数
2、修改document.domain 来跨域
将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必 须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利document.domain进行跨域主域相同的使用document.domain
3、使用window.name来跨域
window.name+iframe 需要目标服务器响应window.name,window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的!
4、通过CORS解决AJAX跨域
5、通过设置Access-Control-Allow-Origin
6、通过Nginx反向代理
前端页面分为那三层
一、网页的结构层(structural layer) 由HTML或XHTML之类的标记语言负责创建。
标记语言也就是指网页的标签,标签只对网页内容的语义和含义做出描述,不包含任何关于如何显示内容的信息。
二、网页的**表示层(resentation layer)由CSS负责创建。
作用是对内容如何显示做一定的控制。
三、网页的行为层(behavior layer)**由JavaScript语言和DOM创建。
作用是控制用户做出一个事件该如何显示。例如:用户悬浮在某个元素上,弹出一个显示元素标题内容的提示框。
和=有什么区别?
===比较类型和值,==只比较值。
css方面
CSS实现三角形
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;
盒模型
constnet padding margin border
清除浮动的方式
写个div 加上 clear:both
给父盒子设置高度
设置局中的方式
第一种
position:absolute
top:50%;
left: 50%;
transform:translate(-50%,-50%)
第二种
postion:avsolute
top:0
left:0
right:0
bottom:0
margin:auto
第三种
display:flex
align-item:center
justify-content:center
如何解决上层div元素将下层div元素盖住,但是下层div里的点击事件仍可以进行的问题?
对上层元素使用:pointer-events: none;这样点击事件就能穿透上层元素,找到下层的点击事件。
如果想让上层元素也能得到点击事件,只需要在你需要获得点击的上层元素子元素中加入:pointer-events: auto;
css html元素隐藏
display:none 不占位
visibility: hidden 占位隐藏
opacity: 0; 调整图透明度隐藏
怎样让谷歌浏览器支持小于12px文字
1、zoom可以改变页面上元素的尺寸,属于真实尺寸 zoom: 0.8;
2、-webkit-transform:scale()只对可以定义宽高的元素生效,如果是行内元素的话,应该先转为行内块元素。
3、用于设定文字大小是否根据设备来自动调整显示大小:
vue相关的面试题
生命周期函数
初始化
beforecreate():
只有一些默认的生命周期钩子和默认事件,无法访问数据和dom
create(创建后)
dom和methods 已经初始画完成,可以修改数据,在这个阶段做数据的初始画和页面的初始化
挂载
beformout()
data初始画完成,该阶段服务器依然不可以调用
mouted
函数挂在完成
更新
beforeupdate
数据更改前调用 可以在钩子函数改变状态 不重复调用
update
数据改变时候调用
销毁
beforedestory
清除挂在的dom事件,清除定时器
destoryed
清除所有的式列dom事件
vue高阶函数
filter(过滤器)
循环
map()
const num = [1,2]
let newnums = num.map((item)=>{
return item*2
})
封装组件步骤
1、准备组件模板,搭架子,写css样式
2、准备号组件的数据输入,分析好逻辑,定义好props里面的数据
3、准备好组件的输出,更具逻辑做好暴露方法
4、封装完毕后,直接调用
组件之间传值
父传子:props
子传父:$emit
子组件之间传递数据:eventbus
vuex
vuex
state 数据生命,暂放状态
getters 数据的计算方法
mutations 更改状态的逻辑 同步的
active 提交mutation异步的
mudules将state模块化
watch 和computed的区别
watch 监听某个响应数据的变化,知道改变后执行的逻辑
computed自动监听依赖值的变化,只需要动态值,可以缓存
vue-router 有哪些钩子
berforeEach 导航首位
beforReslve 解析钩子
afterEach 后置钩子
beforeEnter 路由独享
初次加载响应那些生命周期的钩子函数
beforcreate
create
beforemout
mouted
data为什么是一个函数
数据以函数的形式返回这样的化我们每次复用组件的时候返回新的data相当与组件时控件,他们负责各自维护数据,不会混乱,而携程对象的形式组件修改所有的都会被修改
lochasd.href 跳转和 router.push跳转有什么区别
lochasd.href :刷新页面
router.push 不刷新页面
v-if 和 v-show 的区别
能够共同控制元素的显示和隐藏
v-if是通过删除和创建dom节点
v-show 是通过display:none来隐藏
平凡切换使用v-show
vue 双向数据绑定原理
组要采用数据劫持结合发布者-订阅者模式通过object.defineproperty()来劫持各个属性的setter、getter 在数据变化是发布消息给订阅者,触发相应监听回调
vue中自定义过滤器
可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值。
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
vue-router两种模式
两种模式是 hash和history
hash 的url带有#号 history 不带
1、hash模式的实现原理
url中的hash 值直是客户端的一种状态,也就是说当向服务器发送请求的时候,hash部分不会被发送
hash值的变化,都会在浏览器访问历史中增加一个记录,应为我们能通过浏览器回退快进按钮控制hash的切换
可以通过a标签,并设置href属性当用户点击这个标签后,url的hash值会发生改
我们可以使用hashchange事件监听hash值的变化,从而对页面进行跳转
2、history模式的实现原理
pushstae 和replacestate 两个api来操作实现url的辩护
我们可以使用propstate 事件监听url变化,从而来对页面进行跳转
history.pushState()或history.relaceState()不会触发prostat事件,这是我们需要手动触发页面跳转
3、history的问题
history 路由需要后台配合支持,应为我们应用是单页面客户端,如果后台没有正确的配置,当用户在浏览器直接访问的时候就会出现404,所以要在服务器增加一个覆盖所有情况的候选资源:如果url匹配不要任何竟在资源,则应该返回同一个index.html页面,这个页面就是你的app依赖的页面
转载于https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/119192981
v-for循环中key的作用是什么?
在vue中for循环其实本质是代表一组DOM的渲染,当这组DOM发生变化时就会体现key的价值,就比如说我们有一个list,里面有三个元素分别是a、b、c,我们通过v-for这三个数据渲染到页面中,再将list中的三个元素中的某一个发生改变,改为a、d、c,在这里由于a\c未发生变化就不需要重新渲染a和c的数据,只需要重新将b数据渲染为d数据,程序判断a和c是否发生变化就需要通过key了,vue渲染的方式是将vnode虚拟节点渲染成为真实节点,但是vnode是通过复杂类型进行表示的,复杂数据类型不存在全等的概念,所以就需要使用到vue中issamevNodeType方法通过vnode的type和key来判断两个vnode是否是同一个,type是渲染的标签类型,key是在循环中我们绑定的key,通过判断就可以之渲染改变后的数据,从而提高渲染的性能
项目相关
怎样优化项目
1、优化图片的大小和懒加载
2、v-for 必须加key值加快diff算法的速度
3、组件库按需导入
4、v-if和v-show减少初次渲染切换
复用方法和组件