记一波面试题

JS

是么是面向对象？

面向对象可以把程序中的关键模块视为对象，而模块拥有属性和方法。这样我们把属性和方法封装起来，以后使用将非常方便，避免了一些繁琐重复的工作

 

JS的几种设计模式：

1.构造函数模式--定义一个特定类型的类，实例一个对象

2.工厂模式--声明一个对象，给它添加属性和方法，把它封装到一个函数中，并返回这个对象

3.单例模式--经常配合定时器使用，判断实例是否存在，如果存在就返回，如果不存在就创建

4.发布订阅者模式--绑定事件，添加回调

 

DOM的增删改查：

creatElement appendChild

removeChild

replaceChild

getElementById querySelectorAll

 

less和sass的区别

less和sass都是css的预编译处理语言

区别： less是基于javascript，是在客户端处理的

sass是基于Ruby的，是在服务器处理的

相同： 1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

 

css3和h5新特性：

h5：1.   用于绘画 canvas 元素。

2.   用于媒介回放的 video 和 audio 元素。

3.   本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

  sessionStorage 的数据在浏览器关闭后自动删除。

4.   语意化更好的内容元素，比如 article、footer、header、nav、section

5.   表单控件，calendar、date、time、email、url、search。

 

css3: 选择器----属性选择器、伪类选择器、伪元素选择器。

盒模型 -----box-sizing

背景和边框--- 圆角（border-radius）边框阴影： box-shadow

文字特效

2D/3D转换---transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

动画

多列布局

用户界面

DOM0 DOM2的区别：

dom0：不支持添加多个事件，后面的会覆盖前面的

无法取消

btn.οnclick=function(){}

dom2: 可以添加多个事件

支持事件冒泡和捕获

btn.addEventListener('click',function(){})

 

如何阻止事件冒泡和默认事件:

return false

event.preventDefault

event.stopPropagation()

ES6

解构赋值

模板字符串

三点运算符

箭头函数

Promise

函数的形参默认值

class类

数组和对象的新方法：filier ，find，keys，values，object.is()，Object.assign()

Number.isNaN() Number.parselnt(string,radix) //根据给定的进制数把一个字符串解析成整 数。

 

CommonJS,AMD,CMD

commonjs:

1. 所有代码都运行在模块作用域，避免污染全全局作用域

2.模块可以多次加载，但只会在第一次加载时运行一次，然后结果就会被缓存，以后在加载，会直接读取缓存结果

3.commonjs是同步执行的，它会按代码出现的顺序进行加载

4. commonjs中定义了两个重要概念，require和module.exports。但这两个重要概念（方法）浏览器不支持，如果想在浏览器中使用commonjs需要进行编译

require：导入，解析路径，读取文件或者缓存的结果，返回该模块的module.exports对象，如果没有会报错

module.exports:当前模块对外输出的接口，其它文件加载该模块其实就是读取module.exports的变量。为了方便，node为每一个模块提供了exports变量，指向了module,exports

var module = {exports:{}}

var exports = module.exports

每一个模块会默认被封装在一个函数中：

function(exports,require,module,__filename,__dirname){}

exporets和module都是暴露接口

require是引入文件

__filename是文件的完整路径（绝对路径）

__dirname是文件的目录路径

AJAX

原生ajax的实现

创建XMLHTTPRequest对象

var xhr = new XMLHTTPRequest()

设置请求信息（请求方式，请求地址，是否异步）

xhr.open('get',url,true)

设置请求头信息（是否设置看需求）

xhr.setRequestHeader('content-type':'application/x-www-form-urlencoden')

发送请求

xhr.send(body) //get不用传body，post需要传

接受响应，绑定事件监听执行到那一步

xhr.onreadystateChange=function(){

xhr,readystate ===0 刚刚创建实例，还未调用open（）

xhr,readystate ===1 open调用，send未被调用

xhr,readystate ===2 响应头和状态吗收到

xhr,readystate ===3 正在接受相应数据

xhr,readystate ===4 数据接收完毕或失败

if（ xhr,readystate ===4）{

if（xhr.status===200）{

console.log(xhr.response)

}

}

}

 

content-type有几种

content-type是设置请求头信息，它用来确定指定响应/请求的编码格式和数据类型，分别有文 本，二进制数据，图片，音频，视频等几种

 

node

node是一个基于chrome V8的javascript运行环境。

每个node文件都是一个函数，其中有5个参数(exports,require,module,__filename,__dirname)

在node中没有window，有一个类似window的全局对象：global

global中的几个重要属性：

setImmediate:立即执行函数

process.nextTick：在任意阶段都会执行，通常是第一个执行

buffer：缓冲器，一个和数组类似的容易，存储二进制数据

事件轮询：

timers： 计时和执行到点的定时器回调函数

pending callbacks： 执行延迟到下一个循环阶段的i/o回调

idle,prepare: 准备阶段

poll： 轮询阶段--如果轮询队列不为空，依次取出队列中的第一个回调函数并执行，直到队列为空或者达到系统最大的限制。如果轮询队列为空，如果之前设置过setImmdiate函数，直接进入check阶段，如果没有设置，会在当前阶段等待，直到塞入新的回调函数或者定时器到点了。

check： 执行setImediate设置额回调函数

close callbacks： 一些准备关闭的回调函数

在node中，我们自己编写的代码只能运行在一个线程中(主线程)，而node提供的很多方法均使用了多线程。主线程不断读取轮询队列中是否有事件。而对于读取文件，http等容易堵塞的事件交给底层的线程池执行，并给线程池一个回调函数，当线程池操作完成任务后把结果和回调函数返回给轮询队列中。

vue

vue的声明周期--

beforecreate 初始化显示

created 创建

beforeMount 挂载之前

Mounted 挂载后

beforeUpdate 更新之前

Updated 更新之后

beforeDestory 销毁之前

Destoryed 销毁后

 

vue的导航守卫：

beforeEach((to,form,next)=>{}) //全局前置守卫

to:进入的目标路由

form：当前离开的路由

next：调用下一步

beforeRouteEnter(to,form,next) //进入路由前

beforeRountUpdate //路由没有改变，路由参数发生变化时被调用

beforeRountLeave //离开路由时

vue的MVVM模式--

vue在初始化时，一方面会对data数据中的每一层次的属性进行遍历，使用Object.defineProperty转化为setter和getter，实现数据变化监听功能，并给它们创建相对应的Dep，另一方面vue的指令编译器compile对元素节点进行解析，初始化视图，并订阅watcher，watcher会将自己添加到消息订阅器Dep中。

当数据发生变化时，Observer中的setter会调用Dep，dep会遍历所有的watcher，并调用watcher的update方法，对试图进行相应的更新

 

v-model的实现原理--

使用Object.defineProperty对data进行数据劫持监听，当数据变化，setter会调用方法更新视图，实现单向数据绑定，给标签添加事件监听，当视图发生变化时，调用方法同步改变数据，实现双向数据绑定

 

vue和react在数据绑定上的区别--

vue会在初始化时收集所有的依赖，数据改变，视图跟着改变，是双向数据绑定

react改变数据需要手动调用setState方法，是单向数据绑定。

 

vue怎么设置动态路由--

 1)         配置路由

      children: [

        {

          path: 'mdetail/:id',

          component: MessageDetail

        }

      ]

2)         路由路径

      <router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>

3)         路由组件中读取请求参数

      this.$route.params.id

 

vuex的使用--