怎样添加、移除、移动、复制、创建和查找节点
1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
(3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性
谈谈你对闭包的理解
之所以有闭包是因为js存在一个变量作用域,变量的作用域分为局部全局作变量和局部变量,在js函数中,可以访问到外部定义的全局变量,但在函数外面却无法访问函数内部定义的局部变量。所以闭包就是用来解决函数外部无法访问函数内部的局部变量。
闭包是在一个函数内部,return一个子函数,在子函数中可以访问到父函数定义的局部变量。它可以读取函数内部的变量,让这些变量的值始终保持在内存中,避免变量全局污染。所以导致它不能被浏览器垃圾回收机制回收,容易造成页面性能问题,内存泄漏
垃圾回收机制
JS的垃圾回收机制是为了以防内存泄漏,内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着,垃圾回收机制就是间歇的不定期的寻找到不再使用的变量,并释放掉它们所指向的内存。
当一个变量的生命周期结束之后它所指向的内存就应该被释放。JS有两种变量,全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了,此时便可将它引用的内存释放(即垃圾回收),但全局变量生命周期会持续到浏览器关闭页面。
说一下原型和原型链
- 原型
JavaScript 规定,每一个构造函数都有一个 prototype
属性,指向另一个对象。我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype
对象上。这个对象的所有属性和方法,都会被构造函数的所拥有。
Prototype作为对象的内部属性,是不能被直接访问的,我们一般通过__proto__这个属性进行访问。
在原型对象中还有一个属性constructor,这个属性对应创建所有指向该原型的实例的构造函数原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。
- 原型链
在JavaScript中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条
当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型,Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined。
事件机制和事件委托
事件流的三个阶段: 事件捕获 处于目标阶段 事件冒泡
事件委托: 事件委托是利用了事件的冒泡原理实现的,子元素的事件通过冒泡形式委托父元素执行
说一下JS面对对象有那些特性,怎样实现
对象三大特性:封装,继承,多态
封装:将面向过程每一步进行推进:对同种对象的属性和方法进行抽象,成为一个类(js中没有类的概念,实际上也是一个对象),然后通过类的方法和属性来访问类
继承:在封装的基础上,将同类事物继续抽象,继承时,子类拥有父类的属性和方法,同时拥有自己特有的属性和方法
js的继承实现方法:
1.属性拷贝(浅拷贝)
2.属性拷贝(深拷贝)
3.原型式继承
4.原型链继承
5.借用构造函数
6.组合继承
多态:不同对象对同一事物做出不同的回应,通常出现在继承后对方法的重写
特点:对于同一个操作(指令),不同的对象表现出不同的反应 隐藏不同
谈谈你对同步异步的理解
同步:
在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,只有接收到返回的值或消息后才往下执行其他的命令。异步:
执行完函数或方法后,不必阻塞性地等待返回值或消息区别:
同步会阻塞程序的执行,效率低。异步可以同时执行多个程序,效率高
一次完整的HTTP请求是怎样一个过程
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码
–> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) --> 浏览器对页面进行渲染呈现给用户
Ajax原理
ajax是用来实现页面异步加载,同步刷新。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
XMLHttpRequest对象的属性: open准备发送请求的数据 send发送请求
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text 伴随状态码的字符串信息
readyState 对象状态值
Ajax中get请求和post有什么区别
GET和POST请求方式的差异
GET请求没没有请求体,请求的数据在xhr.open()里面拼接,xhr.send(null)
POST请求数据在xhr.send()里面,在设置请求体之前需要设置请求头xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”)
解决跨域
产生跨域是因为浏览器的同源策略:域名 协议 端口必须保持一致
CORS
在服务器端设置响应头 header(“Access-Control-Allow-Origin:*”)
这种方式需要前后台的一个配后,而且相对而言不安全
JSONP
利用script标签src天然支持跨域的特征,将请求的地址写在src,在script里面定义一个处理函数,并把函数名传递给后台,后台接收并返回这个函数的调用,将传递的参数以函数形参的方式传递给前端
这种通过src放送的是一个同步请求,而且只能发送get请求,和ajax不一样
方向代理
通过访问第三方服务器,让第三方服务器帮我们发送请求.
es6你知道多少
字符串扩展
includes断字符串中是否包含子字符串,第一个参数表示要测试的子字符串,第二个参数表示从那个位置开始查找,不传默认从索引0开始。
startsWith判断字符串是否以特定的字符串开始 endsWith判断字符串是否以特定的字符串结束
字符串填充:padStart()和padEnd()可以对字符串进行填充
解构赋值
数组的结构赋值
// 解构
let [a,b,c] = [1,2,3];
console.log(a,b,c); // 1 2 3
// 解构时设置默认值
let [a = 1,b,c] = [,5,6];
console.log(a,b,c); // 1 5 6
// 解构时没有的数据为undefined
let [a = 1,b,c] = [4,5,];
console.log(a,b,c); // 4 5 undefined
对象的解构赋值
let {name,age} = {name:'zxx',age:18}
console.log(name,age); // zxx 18
// 顺序无关
let {name,age} = {age:18,name:'zxx'}
console.log(name,age); // zxx 18
// 属性别名,一旦设置了别名,原来的名字就无效了
let {name:tag,age} = {age:18,name:'zxx'}
console.log(name,age); // ReferenceError: name is not defined
console.log(tag,age); // zxx 18
// 解构赋值时设置默认值
let {name:tag='zxx',age} = {age:18}
console.log(tag,age); // zxx 18
字符串的解构赋值
let [a,b,c,d] = 'zxx';
console.log(a,b,c,d); // z x x undefined
let [a,b,c,d] = 'zxx';
console.log(a,b); z x
// 得到字符串长度
let { length } = 'zxx';
console.log(length); // 3
扩展运算符
合并数组
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3); // [1,2,3,4,5,6]
箭头函数
let f = function(v) {
return v;
};
let f = v => v;
Promise
Promise
是异步编程的一种解决方案.简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise
是一个对象,可以从改对象获取异步操作的消息。
** 1. 创建promise实例,在实例中执行异步操作(比如发送网络请求)
2. 异步操作成功时,调用reslove函数传递数据
3. 异步操作失败时,调用reject函数传递错误信息**
const promise = new Promise(function(resolve, reject) {
// 异步操作
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
// 使用promise实例then方法接收reslove或reject返回的数据
promise.then(function(value) {
// 此处数据即为reslove回来的数据
// success
}, function(error) {
// 此处数据即为reject回来的数据
// failure
});
VUE相关
vue有那些指令
v-text v-bind v-for v-if v-on
谈谈MVVM
MVVM是一种分层次开发思想,它是CommonJS规范的实现 M代表module模型层 V代码view视图层
VM模型层和视图层之间没有任何的联系,而VM会充当一个调度者,将他们联系起来,实现双向数据绑定
组件化
从页面视图的角度出发,对页面功能的封装,实现项目可独立维护,可复用性大大提高
什么是Vue双向数据绑定?原理?
v-model指令、数据视图同步更新、使用的是ES5提供的Object.defineProperty()这个方法实现数据劫持
数据如何从模型同步到视图?当模型中数据发生变化时会触发Object.defineProperty的set方法,在这个方法内部能够劫持到数据的改变,然后就可以在该方法内部通知视图更新
视图中的数据如何同步到模型中?(v-model指令是怎么实现改变了元素中的数据同步到模型中)监听表单元素的change事件,在change事件中可以拿到用户输入的数据,然后给模型中的数据赋值
v-if和v-show的区别
v-if和v-show都是用来控制元素的显示和隐藏,当值是true,元素显示,值为false,元素隐藏
区别: v-if当切换布尔值时,会创建/删除元素;v-show当切换布尔值时,会改变元素的样式,display:block
Vue生命周期函数的理解?
生命周期就是在vue实例执行过程中会触发的一批函数,这些函数可以帮助我们处理不同时间段的业务逻辑
创建阶段
- beforeCreatevue实例被创建出来,此时仅仅只是分配了内存,属性和方法都还没有挂载到vue实例上
- created此时vue实例已经创建完毕,data中的属性和methods中的方法都已经挂载到vue实例上
渲染阶段
- beforeMountvue实例中的数据被解析渲染到内存中的虚拟DOM上,真实中的DOM指令还没有被解析
- mountedvue实例中的数据已经完全被渲染到了真实DOM中
-更新阶段 - beforeUpdate模型中的数据已经改变,但视图中的数据还没有同步更新
- updated此时模型中的数据改变,视图层数据已经同步更新
销毁阶段
- -beforeDestroyvue中的数据和方法还能继续使用,但是指令不能再被vue解析
- destroyedvue中的数据和方法都已经被销毁
说一下单向数据流
组件之间的传值,数据从父级组件传递给子组件,只能单向绑定。
父组件向子组件传值
在父组件中定义数据,通过属性绑定的形式绑定到子组件上,在子组件中定义props接收传递过来的变量
子组件向父组件传值
在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据第一个参数就是自定义的方法名,第二个参数就是需要传递给父组件的数据
this.$emit('func',this.msg)
在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的方法名同名
<div id='app'>
<son @func = 'getmsg'></son>
</div>
vue-router路由模式有几种,原理分别是什么?
vue-router路由库是用哪种技术实现的,总共有两种,分别叫hash模式和history模式,默认是hash模式
- hash模式:地址上带有#号;url地址可以放在任意标签中打开;可以兼容低版本的浏览器
hash模式原理:监听hashchange事件,可以调用window.location.hash获取到锚点值,和路由规则进行匹配,匹配到之后将路由规则中定义的组件渲染到页面
history模式:地址上没有#号,更加符合URL形式;url地址不能重复打开;
- history模式原理:利用HTML5新提供的history.pushState API 来完成 URL 跳转而无须重新加载页面
history模式需要后台进行相关配置:要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个
index.html 页面,这个页面就是你 app 依赖的页面
Vuex怎么用,它相对与localstorage有什么优点和缺点
vuex的核心是:state,getter,actions,mutations
- state用来定义存放公共数据
this.$store.state.msg
- mutations定义方法
this.$store.commit('change','我是被修改的数据')
- getters用于获取数据 进行一些操作 类似于Vue实例中的过滤器和计算属性
this.$store.getters.fixmsg
- actionactions和mutations都是定义对数据进行操作的方法,mutations中都是同步方法,mutations中定义异步方法
this.$store.dispatch('asyncchange','我是被异步修改的数据')
区别
localstorage无法实现双向数据绑定,模型层的数据改变视图中数据不会发生改变,vuex数据不能持久化,需要结合localstorage使用,比较臃肿,小型项目不建议使用