面试题集

web前端代码说
130 阅读22分钟

1.vueRouter的实现原理

vue-router通过hash与History interfac两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心。1.hash ---- 利用URL中的hash（“#”）2.利用History，

2.axios的封装

axios是基于promise的HTTP库，可以发送get、post请求，

下面是一个简单的axios封装

   npm install axios  //下载
   
   import axios from "axios"; //  引入axios


//创建实例instance
const instance = axios.create({
    baseURL: 'http://47.93.101.203', //这里是公共路径
    timeout:'10000'  //请求超时时间
  });

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在请求发送之前做一些事情
    const tokenStr = sessionStorage.getItem("token");
      config.headers = {
        ...config.headers,
        "Authori-zation": `Bearer ${tokenStr}`,
      };

    return config;
  }, function (error) {
     // 做一些请求错误的处理
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据执行操作
    return response;
  }, function (error) {
   // 对响应错误执行操作
    return Promise.reject(error);
  });

  export default instance  //抛出实例

3.Number和parseint的区别

我们都知道Number与parseInt都是JS数值转换的函数，语义上Number就是数字的意思，Number(object)是将对象的值转换为数字，如果对象的值无法转换为数字，那么 Number() 函数返回 NaN。parseInt（string,radix）:将字符串解析转化为数字类型,返回的是整数；

//更直观的看它俩的区别

//当字符串只有数字组成
var num="9898";
alert(parseInt(num));  //9898
alert(Number(num));   //9898

//当数字只有字母组成
var num="abc";
alert(parseInt(num));  //NaN
alert(Number(num));  //NaN

//当字符串由字母与数字组成
var numbeTrans="123ab";
alert(parseInt(num));  //123
alert(Number(num));  //NaN

//当字符串为小数时
var num="123.123";
alert(parseInt(num));  //123
alert(Number(num));  //123.123

//当字符串为空null时
var num="null";
alert(parseInt(num));  //NaN
alert(Number(num));   //0

//当字符串为空“ ”时
var num=" ";
alert(parseInt(num));  //NaN
alert(Number(num));   //0

4.说一下从输入 URL 到页面加载过程

  1. DNS 解析
  2. TCP 连接
  3. 发送 HTTP 请求
  4. 服务器处理请求并返回需要的数据
  5. 浏览器解析渲染页面
  6. 连接结束 输入了一个域名,域名要通过 DNS 解析找到这个域名对应的服务器地址(ip),通过 TCP 请求链接服务,通过 WEB 服务器(apache)返回数据,浏览器根据返回数据构建 DOM 树,再把 css 形成一个样式表.这两个东西结合,变成了 render 树.页面上通过重绘和回流的过程,渲 染出页面来

5.v-if和v-show的区别

v-if 和 v-show 都可以显示和隐藏一个元素，但有本质区别 v-if 是惰性的，只是值为 false 就不会加载对应元素，为 true 才动态加 载对应元素 v-show:是无论为 true 和为 false 都会加载对应 html 代码，但为 false 时用 display:none 隐藏不在页面显示，但为 true 时页面上用 display:block 显示其效果，我建议当切换频繁的时候用v-show,不频繁用v-if

6.vue-router的传参

vue-router的传参共分为两类,一是编程式的导航 router.push, 还有声明式的导航 有两种方法可以传参，params、query

 //声明式导航
<router-link :to="{path:'',query:{userId: "33333"}}"></router-link> 
<router-link :to="{name:'',params:{userId:'1234'}}">haha</router-link>

//编程式
this.$router.push({
 path: `path`, 
 params: { page: '1', code: '8989' 
 }  
})

this.$router.push({
 path: `path`, 
 query: { page: '1', code: '8989' 
 }  
})

7.v-for和v-if

当v-if和v-for一起使用的时候：v-for比v-if优先，即每一次都需要遍历整个数组，影响速度。所以不建议一起使用。这是vue2的优先级，vue3中是 v-if的优先级高于v-for，但还是不建议它俩一起用

8.实现div上下左右居中的方法

第一种：定位： 第一种思路：通过给 div 设置绝对定位，并且 left,right,top,bottom 设置为 0,margin:auto 即可以水平垂直居中 第二种思路：通过给 div 设置绝对定位，left 为 50%,top 为 50%,再给 div 设置距左是自身的一半即：margin-left:自身宽度/2,margin-top:自身高 度/2。 第三种思路：通过给 div 设置绝对定位，left 为 50%,top 为 50%，再给 div 设置跨左和跟上是自身的一半：transform:translate3d(-50%,-50%,0) 第四种：flex 布局: 思路：有两个div，父级div和子级div，给父级div设置display:flex, 并且设置父级 div 的水平居中 justify-content:center，并且给父级 div 设置 垂直居中 align-items:center 即可

9.rem和em的区别

em:是相对于父元素的字体大小 rem:是相对于html元素的字体大小

10.HTTP请求方法

首先在我了解，HTTP1.0有三种请求方法，GET,POST,HEAD, HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法

  1. | GET | 请求指定的页面信息，并返回实体主体。
  2. | HEAD | 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
  3. | POST | 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
  4. | PUT | 从客户端向服务器传送的数据取代指定的文档的内容。
  5. | DELETE | 请求服务器删除指定的页面。
  6. | CONNECT | HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
  7. | OPTIONS | 允许客户端查看服务器的性能。
  8. | TRACE | 回显服务器收到的请求，主要用于测试或诊断。
  9. | PATCH | 是对 PUT 方法的补充，用来对已知资源进行局部更新 。

11.阻止事件冒泡

冒泡事件：点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发

  1. event.stopPropagation()方法,阻止事件冒泡，对本身没影响
  2. return false;,对本身有影响，阻止冒泡还阻止本身

12.==和===的区别

我的理解就是==代表相同，===代表严格相同，双等号的话就是如果两个值类型相同，在进行严格比较，如果两个值类型不同，会转换成相同类型在比较，三个等于号是类型不同直接不相等，不会转换相同类型在进行比较。

13.js创建对象的方式

  1. {}
  2. new Ｏbject()
  3. 使用字面量
  4. 工厂模式
  5. 构造函数模式（constructor）
  6. 原型模式（prototype）
  7. s构造函数+原型模式

14.vue3中常见的api

  1. setup 函数也是 Compsition API 的入口函数，我们的变量、方法都是在该函数里定义
  2. ref 理解为包装一个响应式数据
  3. reactive方法是用来创建一个响应式的数据对象
  4. toref是将某个对象中的某个值转化为响应式对象
  5. torefs 将传入对象中所有属性值都转化为响应式数据
  6. shallowReactive 是一个渐层的reactive,用于性能优化的api
  7. shallowRef 渐层的ref,也是性能优化
  8. toRaw 方法是用于获取 ref 或 reactive 对象的原始数据的
  9. markRaw 方法可以将原始数据标记为非响应式的，即使用 ref 或 reactive 将其包装，仍无法实现数据响应式
  10. watch 和 watchEffect 都是用来监视某项数据变化从而执行指定的操作
  11. useStore 可以获取vuex的实例

15.vue 中 methods,computed,watch 的区别

我了解的是methods中都是封装好的函数，只要触发就会执行，computed是vue独有的计算属性，可以对dada中的依赖重新计算，它和methods的本质区别在于，computed是有缓存，就是依赖不发生变化不会重新计算，而methods没缓存，watch是监听data和computed的新旧变化。

16.let、const、var的区别

  • let和const有块级作用域，var不存在
  • var有变量提升，let和const没有
  • var声明全局作用域，在函数内部就是函数作用域
  • var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的变量。const和let不能
  • 在使用let、const声明变量之前，该变量都是不可用的,称为暂时性死区，var是不存在暂时性死区的
  • 在变量声明时，var 和 let 可以不用设置初始值。而const必须设置初始值。
  • const声明即赋值，不可以改变指针指向let是可以的

17.cookie,localStorage 和 sessionStorage 的区别

cookie可以自己设置一个失效时间,但是没有自己的存取方法，用到时要封装，而 localStorage 和 sessionStorage 可以有自己存 取的方法例如：setItem(),getItem(),removeItem(),clear()，主要不同在于:

  • 失效时间：cookie如果没有设置失效时间默认是关闭浏览器失效，localStorage是永久性存储，除非手动清除，否则不消失，sessionStorage仅在当前会话有效，关闭浏览器失效
  • 存储数据大小：cookie是4KB，localStorage 和 sessionStorage是5MB

18.vue父子组件传值

  • 父传子用到props,父组件中引入子组件，在子组件的标签上添加要传递的属性，子组件那边用props来接收,接收分为两种，数组形式['属性名']，对象形式{}，对象形式可以自己定义类型和默认值
  • 子传父用到emit,在子组件中设置this.emit('事件'，值)，在子组件标签上绑定

19.es6的新增语法

let、cosnt、模板字符串、结构赋值、引入（import）、抛出(export export defaule)、promise、箭头函数，还有一些数组字符串的新方法，平时就用这些

20.如何清除浮动

(1) Clear:both 缺点:结构冗余。(2) Float:none，(3)使用CSS的overflow属性，给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，再就是给浮动元素后面的元素添加clear属性。

21.盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

  • Margin(外边距)  - 清除边框外的区域，外边距是透明的。
  • Border(边框)  - 围绕在内边距和内容外的边框。
  • Padding(内边距)  - 清除内容周围的区域，内边距是透明的。
  • Content(内容)  - 盒子的内容，显示文本和图像。

屏幕截图 2022-05-09 143126.png

盒模型分为两种，IE盒模型和w3c标准盒模型

  • 标准盒模型：内容的宽度+padding+border+margin
  • IE盒模型：宽度+margin，其中宽度包含padding 22.http常见状态码 我们在写项目的过程中，比较常见的有：
  • 200 - 请求成功
  • 301 - 永久重定向
  • 404 - 请求的资源（网页等）不存在
  • 401 - 我理解为没有权限
  • 500 - 内部服务器错误 分类：
  • 1开头 | 信息，服务器收到请求，需要请求者继续执行操作
  • 2开头 | 成功，操作被成功接收并处理
  • 3开头 | 重定向，需要进一步的操作以完成请求
  • 4开头 | 客户端错误，请求包含语法错误或无法完成请求
  • 5开头 | 服务器错误，服务器在处理请求的过程中发生了错误 所有的状态码：
  • | 100 | Continue| 继续。客户端应继续其请求
  • | 101 | Switching Protocols| 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
  • | 200 | OK| 请求成功。一般用于GET与POST请求
  • | 201 | Created| 已创建。成功请求并创建了新的资源
  • | 202 | Accepted| 已接受。已经接受请求，但未处理完成
  • | 203 | Non-Authoritative Information| 非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
  • | 204 | No Content| 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
  • | 205 | Reset Content| 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
  • | 206 | Partial Content| 部分内容。服务器成功处理了部分GET请求
  • | 300 | Multiple Choices| 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择|
  • | 301 | Moved Permanently| 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
  • | 302 | Found| 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
  • | 303 | See Other| 查看其它地址。与301类似。使用GET和POST请求查看
  • | 304 | Not Modified| 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
  • | 305 | Use Proxy| 使用代理。所请求的资源必须通过代理访问
  • | 306 | Unused| 已经被废弃的HTTP状态码
  • | 307 | Temporary Redirect| 临时重定向。与302类似。使用GET请求重定向
  • | 400 | Bad Request| 客户端请求的语法错误，服务器无法理解
  • | 401 | Unauthorized | 请求要求用户的身份认证 |
  • | 402 | Payment Required | 保留，将来使用 |
  • | 403 | Forbidden | 服务器理解请求客户端的请求，但是拒绝执行此请求 |
  • | 404 | Not Found | 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面 |
  • | 405 | Method Not Allowed | 客户端请求中的方法被禁止 |
  • | 406 | Not Acceptable | 服务器无法根据客户端请求的内容特性完成请求 |
  • | 407 | Proxy Authentication Required | 请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权 |
  • | 408 | Request Time-out | 服务器等待客户端发送的请求时间过长，超时 |
  • | 409 | Conflict | 服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突 |
  • | 410 | Gone | 客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置 |
  • | 411 | Length Required | 服务器无法处理客户端发送的不带Content-Length的请求信息 |
  • | 412 | Precondition Failed | 客户端请求信息的先决条件错误 |
  • | 413 | Request Entity Too Large | 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息 |
  • | 414 | Request-URI Too Large | 请求的URI过长（URI通常为网址），服务器无法处理 |
  • | 415 | Unsupported Media Type | 服务器无法处理请求附带的媒体格式 |
  • | 416 | Requested range not satisfiable | 客户端请求的范围无效 |
  • | 417 | Expectation Failed | 服务器无法满足Expect的请求头信息
  • | 500 | Internal Server Error | 服务器内部错误，无法完成请求 |
  • | 501 | Not Implemented | 服务器不支持请求的功能，无法完成请求 |
  • | 502 | Bad Gateway | 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应 |
  • | 503 | Service Unavailable | 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中 |
  • | 504 | Gateway Time-out | 充当网关或代理的服务器，未及时从远端服务器获取请求 |
  • | 505 | HTTP Version not supported | 服务器不支持请求的HTTP协议的版本，无法完成处理

23.vue2的生命周期

vue有完整的生命周期，其中有开始创建、初始化数据、编译到模板、挂载、更新和卸载

生命周期图:

lifecycle.png

生命周期分为三个阶段

分别为：初始化阶段、运行中阶段、销毁阶段

  • 初始化阶段钩子函数（beforeCreate,created,beforeMount,mounted）
  • 运行中阶段钩子函数（beforeUpdate,updated）
  • 销毁阶段钩子函数（beforeDestroy,destroyed）

beforeCreate 组件实例被创建时

beforeCreate钩子函数初始化的时候立马执行,这个钩子函数里面是获取不到数据的，页面中的真实dom节点也没有挂载出来

created 组件实例已经创建完成时

created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来。在这个钩子函数里面，如果更改数据的话，运行中钩子函数不会执行。

beforeMount 组件挂载之前

beforeMount接下来要渲染dom，还没有真正的在页面中渲染。此钩子函数与created钩子函数差不多

mounted 组件挂载之后

mounted 表示数据已经挂载完成，真实的dom也渲染出来了

beforeUpdate 组件数据发生变化，也就是更新前

数据发生变化的时候，beforeUpdate这个钩子函数才会执行。beforeUpdate钩子函数里面，在这里获取的数据都是更新之前的内容

updated 组件数据更新之后

在这里获取到的数据就是更新后的内容了，生成新的虚拟dom，与上一次的虚拟dom结构进行对比，再去进行真实dom的重新渲染操作

beforeDestroy 组件实例销毁之前

当组件销毁的时候，就会触发，组件就会被销毁

destroyed 组件实例销毁之后

activated 缓存的组件激活时

deactivated 缓存的组件停用时调用

errorCaptured 捕获一个来自子组件的错误时被调用

24.浏览器缓存策略

x浏览器缓存一般分为两类：强缓存（也称本地缓存）和协商缓存（也称弱缓存）。

(1)本地缓存阶段:

浏览器发送请求前，会先去缓存里查看是否命中强缓存，如果命中，则直接从缓存中读取资源，不会发送请求到服务器。否则，进入下一步。

(2)协商缓存阶段:

当强缓存没有命中时，浏览器一定会向服务器发起请求。服务器会根据 Request Header 中的一些字段来判断是否命中协商缓存。如果命中，服务器会返回 304 响应，但是不会携带任何响应实体，只是告诉浏览器可以直接从浏览器缓存中获取这个资源。如果本地缓存和协商缓存都没有命中，则从直接从服务器加载资源。

25.浏览器存储方式

第一种是cookie存储，这类存储只能保存一段不超过4k的文本信息，通常是用来保存我们所浏览的网址之类的。可以通过浏览器的历史记录进行查看。过了过期时间，浏览器就会删除该cookie，想要删除cookie，只需要把它过期时间设置成过去的时间即可,如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭当前会话，cookie就失效。

第二种 localStorage 以键值对(Key-Value)的方式存储，键值对总是以字符串的形式存储，永久存储，永不失效，除非手动删除。IE8+支持，每个域名限制5M。打开同域的新页面也能访问得到。

第三种 essionStorage操作的方法与localStorage是一样的，区别在于 sessionStorage 当前页面有效，在关闭页面后即被清空，而 localStorage 除非手动删除，会一直保存。，在上面我也写过它们的区别，可以了解

26.跨域

  • 首先要了解到为什么会产生跨域，不同协议，不同域名，不同端口以及域名和 ip 地址的访 问都会产生跨域。
  • 这里又要了解同源策略，那什么是同源策略呢，主要是因为安全的考虑，所谓同源是指，域名，协议，端口相同 那如何解决跨域呢，下面我们来了解
  1. jsonp 就是利用<script>标签没有跨域限制，来达到与第三方通讯的目的。主要是利用动态创建 script 标签请求后端接口 地址，然后传递 callback 参数，后端接收 callback，后端经过 数据处理，返回 callback 函数调用的形式，callback 中的参数 就是 json
  2. CORS 全称叫跨域资源共享，需要浏览器和后端同时支持，主要是后台工程师设置后端代码来达到前端跨域请求的，iE 8 和 9 需要通过 XDomainRequest 来实现。
  3. 前端代理我在 vue 中使用那个 vue.config.js 里面配置一个 proxy,里面有个 target 属性指向跨域链接.修改完重启项目就可 以了.实际上就是启动了一个代理服务器.绕开同源策略,在请求 的时候,通过代理服务器获取到数据再转给浏览器

27.EventLoop的理解

是 js的一个底层运行原理,js是单线程的,但是也有一些耗时任务, 会影响执行效率.代码都在主线程中执行,当遇见你像ajax请求.setTimeout 定时器时候,会 单独开启异步线程.异步线程耗时之后会推入异步队列中等待执行.然后当主线程执行完毕 之后.会到异步队列中取出到主线程中执行.然后再去异步队列中取第二个.这个来回取的过 程

28.js判断数据类型

基本数据类型 ：String、 Number、 boolean、 null、 undefined、 symbol（es6 新增的） 引用数据类型 ：object。包含 Function、Array、Date、RegExp、Error等都是属于 Object 类型 。

1.typeof:通常用来判断基本数据类型

    typeof 1  //number
    typeof 'a' //string
    typeof true //boolean
    typeof undefined //undefined
    typeof null //object
    typeof  {} //object
    typeof  [1,2,3] //object
    function  Fn(){}
    typeof new Fn() //object
    typeof new Array() //object

2.instanceof:

 function A(name,age){
       this.name=name
       this.age=age
   }
   a = new A('嘿嘿',18)
   console.log(a instanceof A); //true


     obj =new Object()
     obj={}
     console.log(obj instanceof Object); //true


     arr= new Array()
     console.log(arr instanceof Array); //true

     date = new Date()
     console.log(date instanceof Date); // true
  1. constructor:
let num = 23;
let date = new Date();
let str = "dadada";
let reg = new RegExp();
let bool = true;
let fn = function () {
  console.log(886);
};
let udf = undefined;
let nul = null;
let array = [1, 2, 3];
console.log(num.constructor); // [Function: Number]
console.log(date.constructor); // [Function: Date]
console.log(str.constructor); // [Function: String]
console.log(bool.constructor); // [Function: Boolean]
console.log(fn.constructor); // [Function: Function]
console.log(reg.constructor); // [Function: RegExp]
console.log(array.constructor); // [Function: Array]

4.Object下的toString.call()

Object.prototype.toString.call();
console.log(toString.call(123));          //[object Number]
console.log(toString.call('123'));        //[object String]
console.log(toString.call(undefined));    //[object Undefined]
console.log(toString.call(true));         //[object Boolean]
console.log(toString.call({}));           //[object Object]
console.log(toString.call([]));           //[object Array]
console.log(toString.call(function(){})); //[object Function]

29.this指向

全局环境下的this指向window， 函数独立调用 非严格模式下，函数内部的this指向window,严格模式下，为undefined， 箭头函数中的this指向外层函数

30.call,apply,bind区别，

  • call,apply,bind 主要作用都是改变 this 指向的，但使用上略有区别，

call 和 apply 的主要区别是在传递参数上不同，call 后面传递的参数是以 逗号的形式分开的，apply 传递的参数是数组形式 [Apply 是以 A 开头的, 所以应该是跟 Array(数组)形式的参数] bind 返回的是一个函数形式，如果要执行，则后面要再加一个小括号 例如： bind(obj,参数 1,参数 2,)(),bind 只能以逗号分隔形式，不能是数组形式

31.防抖节流

主要是被用作性能优化

  • 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
  • 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

时间戳与定时器结合实现节流：

function throttled(fn, delay) {
    let timer = null
    let starttime = Date.now()
    return function () {
        let curTime = Date.now() // 当前时间
        let remaining = delay - (curTime - starttime)  // 从上一次到现在，还剩下多少多余时间
        let context = this
        let args = arguments
        clearTimeout(timer)
        if (remaining <= 0) {
            fn.apply(context, args)
            starttime = Date.now()
        } else {
            timer = setTimeout(fn, remaining);
        }
    }
}

防抖：

function debounce(func, wait, immediate) {

    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout); // timeout 不为null
        if (immediate) {
            let callNow = !timeout; // 第一次会立即执行，以后只有事件执行后才会再次触发
            timeout = setTimeout(function () {
                timeout = null;
            }, wait)
            if (callNow) {
                func.apply(context, args)
            }
        }
        else {
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait);
        }
    }
}

32.数组去重的方法

  1. 利用ES6 Set去重
  2. 利用for嵌套for，然后splice去重
  3. 利用indexOf去重
  4. 利用includes
  5. 利用filter

33.vue2双向绑定原理

  • 1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
  • 2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
  • 3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
  • 4、mvvm入口函数，整合以上三者

34.map和foreach的区别

foreEach方法:针对每一个元素执行提供的函数。map()方法:创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。 区别:forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

35.promise的理解

Promise 是异步编程的一种解决方案，解决了回调地狱的问题。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。它是一种规范，提供统一的 API，各种异步操作都可以用同样的方法进行处理。

36.常见设计模式

  1. 单例模式：就是保证一个类只有一个实例，实现的方法一般是先判断实例存 在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类 只有一个实例对象。在 JavaScript 里，单例作为一个命名空间提供者，从全 局命名空间里提供一个唯一的访问点来访问该对象。
  2. 观察者模式: 观察者的使用场合就是：当一个对象的改变需要同时改变 其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用 观察者模式。 总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽 象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化

37.Ajax

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来,Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是JavaScript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

38.New操作符

  1. 创建了一个空的js对象（即{}）
  2. 将空对象的原型prototype指向构造函数的原型
  3. 将空对象作为构造函数的上下文（改变this指向）
  4. 对构造函数有返回值的判断

39.重绘回流

  1. 重绘:由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘
  2. 回流：是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

40.对seo搜索优化的理解

通过一定的设计、操作，将待优化的网站的某些期望关键词在通用搜索引擎中优先排序，增加点击率和曝光率。即所谓搜索引擎优化，英文为 Search engine optimization，简称 SEO。通过一定的设计、操作，将待优化的网站的某些期望关键词在通用搜索引擎中优先排序，增加点击率和曝光率。即所谓搜索引擎优化，英文为 Search engine optimization，简称 SEO。

(完)

avatar
文章
阅读
粉丝