面试要点

1.DOM

  1. Dom:文档对象模型
  2. 熟悉对dom节点的增删改查，新建和查找
  3. createElement 新建元素节点
  4. createAttribute 新建属性节点
  5. createTextNode 新建文本节点
  6. createDocumentFragment 新建dom片段
  7. appendChild()添加子节点
  8. removeChild 移除子节点
  9. replaceChild(new,old) 新节点替换旧节点
  10. insertBeform() 在子节点前添加节点
  12. childNodes 获取子节点
  13. parentNode 获取父节点
  1. Dom回流：
  2.     页面中的元素的改变，会引起浏览器的重新计算其他元素的位置
  3. Dom重绘：
  4.     元素某些样式发生改变，浏览器会重新渲染这个元素
  5. 关系：
  6.     回流必将引起重绘，重绘不一定会引起回流

2.BOM

  1. JS 浏览器对象模型，主要用于客户端浏览器的管理。
  2.     是浏览器本身的一些信息的设置和获取，例如获取浏览器的宽度，高度，设置让浏览器跳转到哪个地址

3.Ajax，axios

  1. 原生ajax:
  2. 1. 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
  3. 2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
  4. 3. 设置响应 HTTP 请求状态变化的函数
  5. 4. 发送 HTTP 请求
  6.      //第一步：创建一个xhr对象
  7.     let xhr = new XMLHttpRequest();
  8.     //第二步：设置连接
  9.     xhr.open("get", "http://localhost:3000/api/v1")
  10.     //第四步：监听xhr状态变化
  11.     console.log(xhr.readyState)
  12.     console.log(xhr.status)
  13.     console.log(xhr.responseText)
  14.     if (xhr.readyState == 1 && xhr.status == 0) {
  15.         let data = xhr.responseText;
  16.         // console.log(xhr)
  17.         if (data == '') {
  18.             info.innerHTML = '请求成功';
  19.         } else{
  20.             info.innerHTML = '请求失败';
  21.         }
  22.     }else{
  23.         console.log(xhr)
  24.     }
  26.     //第三步:发出请求
  27.     xhr.send()
  28. JQ ajax:
  29.     使用$.ajax()
  30. vue ajax:
  31.     封装后的axios
  32. react ajax:
  33.     封装后的axios
  34. 小程序 ajax:
  35.     wx.request
  36. uniapp ajax:
  37.     uniapp.request
  39. 项目中都用到了对ajax的二次封装

4.JSON

  1. JSON 是存储和传输数据的格式，调接口时就会返回一个字符串，然后网页时使用。

5.闭包

  1. 特性：
  2.     1.函数嵌套函数
  3.     2.函数内部可以引用外部的参数和变量
  4.     3.参数和变量不会被垃圾回收机制回收
  5. 缺点：
  6.     闭包的缺点就是常驻内存，会增加内存使用量，使用不当很容易造成内存泄漏
  7. 为什么要使用闭包？
  8.     为了设计私有方法和变量，避免全局污染，希望一个变量长期驻扎在内存中

6.原型链

  1. 作用：原型链用于查找对象的属性
  2. 什么是：
  3.     当一个对象调取属性或方法时，如果该对象的自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找，如果prototype没有，就去prototype关联的前辈那里寻找，如果没有则继续查找prototype.prototype引用的对象，依次类推，没有找到的话为undefined,从而形成了所谓的原型链

7.立即执行函数

  1. 作用：
  2.     创建一个独立的作用域 封装临时变量
  3.     你的代码在页面加载完成之后，不得不执行一些设置工作，比如时间处理器，创建对象等等。

8.ES6语法和特性

  1. let const 结构赋值 展开运算符 箭头函数 模板运算符 import/export
  2. 这些在项目中都是常用的

9.Jsonp,Cors,Poxy

  1. Jsonp:
  2.     利用<script>标签没有跨域限制的漏洞，JSONP请求一定需要对方的服务器做支持才可以。
  3.     只支持get请求，优势在于支持老式浏览器，以及向不支持的cors的网站请求
  4. cors:
  5.     服务器设置Access-Control-Allow-Origin就开启cors,只要后端实现了cors,就实现了跨域。
  6.     cors支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案
  7. proxy代理（适用于本地开发）
  8.     1). 正向代理
  9.         代理客户端,隐藏真实的客户，为客户端收发请求，
  10.     2). 反向代理
  11.         代理服务器;隐藏了真实的服务器，为服务器收发请求，

10.promise,async await

  1. 1.promise
  2.     封装ajax请求接口
  3. 2.async,await
  4.     简化pormise的使用(不用再使用then()来指定成功或失败的回调函数)
  5.  以同步编码的方式实现异步流程(没有回调函数)

11.git协作开发

  1. 1）公司多人开发，现在github上创建组织（修改权限），多个同事加入此组织，在组织下创建项目，成员都可以进行推送更新

12.webpack

  1. 1.构建项目要做什么
  2.     1）编译项目中的js,sass,less,
  3.     2）合并js/css代码
  4.     3）压缩js/css代码
  5.     4）js语法的检查
  6. 2.构建工具
  7.     作用：简化项目构建，实现自动化构建 
  8. 3.loader
  9.     从配置出口入口，
  10.     配置css-loader(css文件转commonjs,加载到js模块中)（moudle的rules中）
  11.     配置style-loader(创建一个style标签，把样式样式资源添加到头部中)（moudle的rules中）
  12.     配置less-loader(安装不需要配置)（moudle的rules中）
  13.     配置自动创建html的模块html-webpack-plugin（在plugins中配置）（可以压缩html）（webpack@5与这个模块有兼容性）
  14.     配置file-loader,url-loader(比file-loader更加强大(可以打包字体图标)  url-loader依赖于file-loader  配置时，只会配置url-loader)(html-load处理html中的图片)
  15.     配置开发服务器，安装webpack-dev-server模块
  16.     抽离css(安装mini-css-extract-plugin模块)
  17.     压缩css(安装optimize-css-assets-webpack-plugin模块)
  18.     处理css的兼容性（postcss-loader 的插件 postcss-preset-env）
  19. 4.为什么要用到webpack
  20.     主要还是传统项目有不足：
  21.         1）项目文件非常多
  22.         2）有些模块需要手动的编译less,css
  23.         3)模块会特别多，放到服务器上，肯定会有非常多的二次请求
  24.         4）模块和模块之间是有依赖关系的
  25. 5.webpack的优势
  26.     1）基于Node开发的  webpack配置中的写法，是Node的写法
  27.     2）webpack打包非常多类型的模块  js
  28.     3）解决模块之是的依赖关系  减少模块之间的依赖

13.less和sass

  1. less语法：
  2.     可以将一个或多个属性值赋给一个变量
  3.     嵌套写法
  4.     可进行算术运算
  5.     map映射

14.第三方服务

  1. 用的nodemailer插件，用到的是qq邮箱，开启服务后给一个授权码，然后后端配置代码，使用代理邮箱群发
  2. 用的是阿里短信服务


15.小程序跳转

  1. (1)、wx.navigateTo(Object object);//保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面。使用wx.navigateBack可以返回到原页面。
  2. (2)、wx.redirectTo(Object object);//关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面。
  3. (3)、wx.reLaunch(Object object);//关闭所有页面，打开到应用内的某个页面
  4. (4)、wx.switchTab(Object object);//跳转到 tabBar页面，并关闭其他所有非tabBar页面

二.面试提项目

1.知识点集成项目

  1. 1.党建项目中用到了less,
  2.     1)把一个color的属性赋值给了一个变量
  3.     2）使用了嵌套写法
  4.     3）算术运算和map映射（类似于对象的方法，调用方法中的属性）没有用到
  1. 2.供热服务通中用到了webpack
  2.     用到了css-loader,style-loader,less-loader等
  3.     因为这个项目用到了graceui组件，体积比较大,选择了这项技术
  1. 客服系统：
  2.     客服系统使用微信内部提供的button按钮中open-type=contact调取客服界面
  3.   当用户点击小程序客服按钮进入会话，给后端传递参数，后端接收并处理，通过接口实现自动回复
  4.   也可以使用芝麻小客服的后台去配置
  1. 客户端二维码的生成：
  2.     前端调后端接口直接渲染的，微信开发文档中给出了实例接口，是后端调用去这个接口，前端调用的后端接口
  1. 支付功能：
  2.     用的是微信开发文档中的wx.requestPayment,在调用之前后端需要先调用微信支付文档中接口获取一些参数

2.VueJS 开发常见问题

三.面试提问

1.为什么选择vue

  1.     vue的核心：数据绑定 和 视图组件。
  2.     Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图，一个字：爽。再也不用你去操心DOM的更新了，这就是MVVM思想的实现。
  3.     视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成
  4.     reactjs 的全家桶方式，实在太过强势，而自己定义的 JSX 规范，揉和在 JS 的组件框架里，导致如果后期发生页面改版工作，工作量将会巨大。