面试题

一.VUE

1.vue全家桶

• Vue-cli是快速构建这个单页应用的脚手架

  npm install -g @vue/cli //安装vue-cli 脚手架
  

• vue-router 路由

  npm install vue-router //或者在创建时选择vue-router
  

• vuex 状态管理

  vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要由五部分组成：state action、mutation、getters、module组成。

• axios 数据请求

  npm install axios --save
  

  axios是一个http请求包，vue官网推荐使用axios进行http调用。

2.vue双向数据绑定原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

实现步骤：

**第一步：**需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

**第二步：**compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

**第三步：**Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性主题对象(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

**第四步：**MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

3.生命周期

• beforeCreate()创建前

  组件实例创建之前，组件属性生效之前，数据观测和初始化事件还未开始

• created()创建后

  组件实例已经完全创建，属性已经绑定，但是DOM还没有生成，$el不可用

• beforeMount()挂载前

  在挂载开始之前被调用，相关的render函数首次被调用，编译模板把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

• mounted()挂载后

  el被创建的vm.$el替换，并且挂载到实例上面，进行数据请求，在这个生命周期中完成模板中的html渲染到html页面中，可以进行ajax请求

• beforeUpdate()更新前

  组件数据更新前被调用，发生在虚拟DOM重新渲染之前

• updated()更新后

  组件数据更新之后， 在由于数据更改导致的虚拟DOM重新渲染之后调用

• beforeDestroy()销毁前

  组件销毁之前被调用，实例仍然完全可用。

• destroyed()销毁后

  组件销毁之后被调用，调用后，所有的事件监听器会被移除，所有的子实例也会被销毁

4.指令

1. v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的

2. v-html指令：绑定一些包含html代码的数据在视图上

3. v-show指令：指令的取值为true/false，分别对应着显示/隐藏，改变的是元素css样式的display属性

4. v-if指令：取值为true/false，控制元素是否需要被渲染

5. v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。

6. v-for指令：遍历data中存放的数组数据，实现列表的渲染。

7. v-bind指令：用于动态绑定DOM元素的属性;例如 标签的href属性，标签的src属性等。v-bind可以简写成“：”

8. v-on指令：可以绑定事件的监听器。通过v-on指令修饰click点击事件，指定事件响应后的处理函数为methods中定义的方法，v-on:简写为@

9. v-model指令：用于表单输入，实现表单控件和数据的双向绑定。只要给input控件添加v-model指令，并指定关联的数据content，就可以轻松把用户输入的内容绑定在content上。

10. v-once指令：只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

    全局自定义指令

    Vue.directive(“指令名称”,对象)

    钩子函数

    bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    跟css有关的用bind

    inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中) 。

    跟js有关的用inserted

    update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新

    Vue.directive("focus", {
    	inserted: function (el) {
    		el.focus()
        }
    })
    

    局部自定义指令

    directives:{指令名称:{对象}}

    钩子函数

    bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中) 。

    update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新

    directives: {
    	focus: {
    		inserted: function (el) {
    			el.focus()
    		}
    	}
    }
    

5.v-if和v-show

共同点

v-if 和 v-show 都可以用来动态显示或隐藏DOM元素。

区别：

• 编译过程： v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
• 编译条件： v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• 性能消耗： v-if有更高的切换消耗。v-show 有更高的初始渲染消耗。
• 应用场景： v-if适合运行时条件很少改变时使用。v-show 适合频繁切换。

6.路由

get传值

形式用?连接需要传递的值

1、在main.js中配置接收值的组件的路由时,不需要预留传递参数的“形参”，

2、在传值的组件中，用路由跳转携带参数的方式，

3、在接收值的组件中，this.$route.query接收传来的值。

动态路由

1、在main.js中配置接收值的组件的路由时,预留传递参数的“形参”，

2、在传值的组件中，用路由跳转携带参数的方式，把值传过去。

3、在接收值的组件中，this.$route.params接收传来的值。

嵌套路由

//创建一个路由实例对象
const routes = new VueRouter({
	//配置路由规则
	routes: [{
		path: "/",
		redirect: "/home"   //重定向
	}, {
		path: "/home",
        name: "Home",
		component: Home,
		children: [{
            path: "login",//以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。
            component: Login
        }]
    })

路由钩子函数

**全局的路由钩子函数：beforeEach、beforeResolve、afterEach **

beforeEach(to, from, next)：进入路由前执行
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 this, 因为当守卫执行前，组件实例还没被创建
beforeResolve(to, from, next)：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
afterEach(to, from, next)：导航确认执行时执行，可理解为导航完成时执行

• to: (Route路由对象) 即将要进入的目标路由对象to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）
• from: (Route路由对象) 当前导航正要离开的路由
• next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) ***必须调用

单个的路由钩子函数：beforeEnter

进入某个路由才会执行,beforeEnter(to, from, next): 进入该路由前

组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

beforeRouteEnter(to, from, next)： 进入组件时
beforeRouteUpdate(to, from, next)： 组件被复用时调用
beforeRouteLeave(to, from, next)： 离开组件前

跳转路由

vue路由跳转有四种方式

1. router-link

2. this.$router.push() (函数里面调用)

3. this.$router.replace() (用法同push)

4. this.$router.go(n)

   区别：

   this.$router.push 跳转到指定url路径，并向history栈中添加一个记录，点击后退会返回到上一个页面

   this.$router.replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

   this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现,

声明式	编程式
<router-link :to="...">	router.push(...)

声明式	编程式
<router-link :to="..." replace>	router.replace(...)

7.axios

数据请求，二次封装，拦截请求

axios 的使用

1、安装  cnpm  install  axios --save

2、哪里用哪里引入axios

vue axios对ajax的二次封装

//封装一个请求数据的方法，对axios的二次封装
import axios from "axios";
export default function ajax(url = "", params = {}, type = "get") {
    //1、定义Promise对象
    let promise
    return new Promise((resolve, reject) => {
        //2、判断请求方式
        //params={size:10,page:1}   //size=10&page=1
        if ("get" === type) {
            let paramsStr = ""
            // Object.keys(params)  //["page", "size"]
            Object.keys(params).forEach(key => {
                paramsStr += key + "=" + params[key] + "&"
            })

            if (paramsStr !== "") {
                paramsStr = paramsStr.substr(0, paramsStr.lastIndexOf("&"))   //size=10&page=1
            }
            //拼接url的完整路径
            url += "?" + paramsStr
            promise = axios.get(url)
        } else if ("post" === type) {  //post请求方式
            promise = axios.post(url, params)
        }
        //返回请求结果
        promise.then((response) => {
            resolve(response.data)
        }).catch((err) => {
            reject(err)
        })
    })
}

拦截请求

• 请求拦截器
  • 请求拦截器的作用是在请求发送前进行一些操作
    • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
• 响应拦截器
  • 响应拦截器的作用是在接收到响应后进行一些操作
    • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

# 1. 请求拦截器 
axios.interceptors.request.use(function(config) {  //interceptor因特赛普特
  console.log(config.url)
  # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
  config.headers.mytoken = 'nihao';
  # 1.2  这里一定要return   否则配置不成功  
  return config;
}, function(err){
   #1.3 对请求错误做点什么    
  console.log(err)
})
#2. 响应拦截器 
axios.interceptors.response.use(function(res) {
  #2.1  在接收响应做些什么  
  var data = res.data;
  return data;
}, function(err){
  #2.2 对响应错误做点什么  
  console.log(err)
})

8.vuex

安装 npm i vuex -s

vuex有五种，分别是 State、 Getter、Mutation 、Action、 Module

state用来存储数据

mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等

actions 定义方法来提交mutations中定义的方法

9.MVVM

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。

1. Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
2. View 代表UI 组件，它负责将数据模型转化成UI 展现出来，
3. ViewModel 是一个同步View 和 Model的对象（桥梁）。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

10.SPA单页面应用

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

1. 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
2. 基于上面一点，SPA 相对对服务器压力小；
3. 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

1. 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
2. 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
3. SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

11.vue的核心，

组件化和数据驱动

12.如何定义组件，

全局组件和局部组件

在页面外边建立components文件，定义全局组件，使用import 组件名称 from 组件地址 引入

在每个页面里面建立一个components文件，定义局部组件，同样使用import…from引入

通过import引入的组件需要注入到对象中才能使用

export default {
  components: {
	组件名称,
  },

13.less和scss

less和scss是css预处理语言，是一种动态样式语言，less定义变量用@，scss定义变量用$

Less(Learner Style Sheet)是一种向后兼容的语言，可以编译到级联样式表（CSS）中，并在客户端和服务器端运行。 它是一种开源语言，兼容跨浏览器。

14.methods，watch，computed区别

vue中的计算属性computed
需要在{{}}里添加一些需要计算再展示出来数据时，特别是当运算比较复杂时，直接计算会显得特别不清晰，此时就需要计算属性computed，通常里面都是一个个计算相关的函数，函数里头可以写大量的逻辑，最后返回计算出来的值，即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算、就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入
计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，不需要重新计算，这就极大的提高了我们程序的性能。而methods里面数据不会缓存，每次都需要重新计算，所以不用methods.

watch监听器
使用watch来响应数据的变化，watch 中的属性 一定是data 中 已经存在的数据
当需要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择，watch是观察一个特定的值，根据被观察者的变动进行相应的变化

methods

方法，跟前面的都不一样，我们通常在这里面写入方法，只要调用就会重新执行一次，相应的有一些触发条件

15.v-for

遍历data中存放的数组数据，实现列表的渲染

v-for中key的作用

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

16.虚拟dom

JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制，以提高浏览器的性能

17.router-link-active

定义表示router-link激活选中时的状态

18.组件之间的通信

（1）父传子：父组件定义数据，子组件将数据绑定在属性中，如 :自定义属性=“父组件data中定义的数据” :msg=“msg”,绑定之后，通过props接收绑定的数据，如:props:[“msg”],之后可以在子组件中使用数据
（2）子传父：子组件定义数据，然后通过如点击事件等执行一个函数，函数中包括一个用$emit触发一个自定义事件，如this.$emit(“myevent(自定义一个事件)”，msg(传递的数据))，在父组件中，@myevent(子组件中自定义的事件)=“getMsg(父组件中定义的方法)”,然后在父组件的methods中通过自定义的方法getMsg（data）{this.text=data}得到数据
（3）兄弟组件：通过bus公交车，首先var bus=new Vue() 全局定义，组件A传值在methods中用bus.$emit("自定义事件A",this.msg)，将传递的数据发送至公交车，组件B接收在mounted中用bus.$on(“自定义事件A”,（data）=>{})

19.跨域，同源策略

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

解决：使用proxy代理

proxy: {
      "/api": {
        target: "http://localhost:3000/api/", //要代理的域名  本地的数据库
        changeOrigin: true, //开启代理，允许跨域访问
        pathRewrite: {
          "^/api": "",
        },
      },
    }

二.JS

1.js数据类型，6种+es6一种

五种基本数据类型（Number,String,Boolean,Undefined,Null）

一种复杂数据类型（Object）

es6语法新增的数据类型 (Symbol)

2.typeof打印出来的数据类型有几个

typeof检测返回 7种： undefined、boolean、string、number、object、function、symbol

Null检测出来是object

Symbol检测出来是function，但Symbol()检测出来是symbol

3.强制类型转换，隐式类型转换

1.强制转换

通过toString（），Number（），Boolean（）函数强制转换

2.隐式转换

隐式转换通常发生在运算符加减乘除，等于，还有小于，大于等

1.字符串加数字,数字就会转成字符串

2.数字减字符串，字符串转成数字。如果字符串不是纯数字就会转成NaN。字符串减数字也一样。两个字符串相减也先转成数字。

3.乘，除，大于，小于跟减的转换也是一样

4.break return continue

continue 是跳出本次迭代，会继续执行下一个迭代。

break是退出本次循环。

return是返回函数的结果值，并终止当前函数

5.递归，用在哪里，深度拷贝

如果在函数中存在着调用函数本身的情况，这种现象就叫递归

注意：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。

递归一般的作用用于解决三类问题：
(1)数据的定义是按递归定义的。（Fibonacci函数）
(2)问题解法按递归算法实现。
这类问题虽则本身没有明显的递归结构，但用递归求解比迭代求解更简单，如Hanoi问题。
(3)数据的结构形式是按递归定义的

深度拷贝

通常JSON.parse(JSON.stringify())的方式进行深拷贝是不可以拷贝undefined、function、RegExp等类型。

Object.assign()对象的拷贝

而递归拷贝可以：

function clone(Obj) {
    var buf;   
    if (Obj instanceof Array) {
        buf = [];  // 创建一个空的数组
        var i = Obj.length;
        while (i--) {
            buf[i] = clone(Obj[i]);
        }
        return buf;
    } else if (Obj instanceof Object){
        buf = {};  // 创建一个空对象
        for (var k in Obj) {  // 为这个对象添加新的属性
            buf[k] = clone(Obj[k]);
        }
        return buf;
    }else{
        return Obj;
    }
}

6.数组常见的API（方法）什么是伪数组，set对象，map对象

concat() 方法用于连接两个或多个数组，不改变现有数组

join()用于连接多个字符或字符串，返回值为一个字符串，不改变原数组

push() 方法可向数组的末尾添加一个或多个元素，改变原数组

pop() 方法用于删除并返回数组的最后一个元素，会改变原数组

shift() 方法用于把数组的第一个元素从其中删除，改变原数组

unshift() 方法可向数组的开头添加一个或更多元素，改变原数组

slice()复制数组，不会修改原数组

splice()数组的增删改，改变原数组

reverse() 方法用于颠倒数组中元素的顺序，改变原数组

伪数组也叫类数组，它无法直接调用数组方法。但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象

应用场景Set用于数据重组，Map用于数据储存

Set：　
（1）成员不能重复
（2）只有键值没有键名，类似数组
（3）可以遍历，方法有add, delete,has
Map:
（1）本质上是健值对的集合，类似集合
（2）可以遍历，可以跟各种数据格式转换

7.面向对象，原型，原型链，继承

面向对象只是过程代码的一种高度封装，目的在于提高代码的开发效率和可维护性

面向对象就是说，使用对象的时候，你可以直接使用它所提供的功能而忽略其内部组成情况，

面向对象就是找一个对象，指挥得结果，将执行者转变成指挥者

原型

①所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
②所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype

原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

继承

ES5中原型链的继承，ES6中class类的继承

8.js作用域，变量提升，this指向，改变this指向的方法

变量根据作用域的不同分为两种：全局变量和局部变量。

1. 函数内部可以使用全局变量。
2. 函数外部不可以使用局部变量。
3. 当函数执行完毕，本作用域内的局部变量会销毁。

变量的提升：是变量声明的提升，提升到当前作用域的最前面，解析器会率先读取函数的声明，并使其在执行任何代码前可用

this指向

1.普通函数this指向window，严格模式下指向undefined

2.构造函数this指向实例化对象，原型对象里面的方法也指向实例化对象

3.对象方法中的this指向该方法所属的对象

4.事件绑定方法中的this指向绑定改事件的对象

5.定时器函数的this指向window

6.自执行函数中的this指向window

改变this指向：call，apply，bind

共同点：都可以改变this指向

不同点:

• call 和 apply 会调用函数, 并且改变函数内部this指向.
• call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
• bind 不会调用函数, 可以改变函数内部this指向.
• 应用场景
  1. call 经常做继承.
  2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
  3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

9.闭包优缺点

闭包就是指有权访问另一个函数作用域中变量的函数，简单理解为一个作用域可以访问另一个函数内部的局部变量

注意:（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

10.js内置对象有哪些

Object 是 JavaScript 中所有对象的父对象

数据封装类对象：Object、Array、Boolean、Number 和 String

其他对象：Function、Arguments、Math、Date、RegExp、Error

11.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）class 类的继承
　　ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

10）async、await
　　使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
　　async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

11）promise
　　Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

12）Symbol
　　Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的

13）Proxy代理
　　使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

12.bom有关，浏览器对象类型

BOM 为浏览器窗口对象的一组 API

属性：nevigator 获取浏览器信息

location 浏览器定位和导航

history 窗口浏览器历史

screen 屏幕信息

方法：window方法

三种对话框：alert()警告框,confirm()确认框,prompt()输入框

两种计时器：setTimeout()超时定时器,setInterval()间歇定时器

开启窗口：open(),关闭窗口：close()

事件：window事件

事件名	描述
load	文档和所有图片完成加载时
unload	离开当前文档时
beforeunload	和 unload 类似，但是它提供询问用户是否确认离开的机会
resize	拖动改变浏览器窗口大小时
scroll	拖动浏览器时

13.location，cookie，sessionstorage

//cookie localStorage sessionStorage的区别？

    //相同点:都可以存储数据

    //不同点:

        //1、生命周期

            //cookie：一般由服务器生成，可以设置有效期。如果在浏览器端生成，默认关闭浏览器就消失

            //localStorage  除非手动删除，否则永久存储

            //sessionStorage  仅在当前会话窗口有效，关闭会话窗口就自动清除

        //2、存储大小

            //cookie存储大小4kb左右

            //localStorage和sessionStorage  一般5M左右

        //3、易用性

            //cookie需要自己封装方法

            //localStorage和sessionStorage  已经有现成的方法 setItem() getItem()

        //4、与服务器端的通信

            //cookie 每次都会携带在http头中，如果保存过多数据的时候就会存在问题

            //localStorage和sessionStorage 都是在客户端保存，不参与服务器的通信

14.内存泄漏

1. 全局变量 不用 var 声明的变量，相当于挂载到 window 对象上。如：b=1; 解决：使用严格模式
2. 被遗忘的定时器和回调函数
3. 闭包
4. 没有清理的 DOM 元素引用

15.优化网站

1. 压缩css、js文件
2. 合并js、css文件，减少http请求
3. 外部js、css文件放在最底下
4. 减少dom操作，尽可能用变量替代不必要的dom操作
5. 使用事件委托，减少事件注册，节省内存，简化dom节点更新时相应事件的更新

16.事件绑定，普通事件

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。

普通事件

btn.onclick = function(){
	alert(1);
}

事件绑定

btn.addEventListener("click",function(){
	alert(1);
},false);

后面的false是指定事件是否在捕获或冒泡阶段执行，false：默认，事件句柄在冒泡阶段执行，

ajax：

1.工作原理，步骤流程

第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。
第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

2.同步和异步

ajax同步 ： 意味着此时请求Server后，JS代码不再继续执行，等待Server返回后才继续往下执行。

ajax异步 ： 意味着此时请求Server后，JS代码继续执行，不管Server什么时候返回。

async:false,  //使用同步的方式,true为异步方式
async:true,  //使用异步的方式,true为异步方式

3.get和post

1. GET在浏览器回退时是无害的，而POST会再次提交请求。
2. GET产生的URL地址可以被Bookmark，而POST不可以。
3. GET请求会被浏览器主动cache，而POST不会，除非手动设置。
4. GET请求只能进行url编码，而POST支持多种编码方式。
5. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
6. GET请求在URL中传送的参数是有长度限制的，而POST么有。
7. 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
8. GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
9. GET参数通过URL传递，POST放在Request body中。

4.常见状态码

• 200 表示从客户端发来的请求在服务器端被正常处理了。
• 204 表示请求处理成功，但没有资源返回。
• 301 表示永久性重定向。该状态码表示请求的资源已被分配了新的URI，以后应使用资源现在所指的URI。
• 302 表示临时性重定向。
• 304 表示客户端发送附带条件的请求时（指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）
• 400 表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
• 401 表示未授权（Unauthorized)，当前请求需要用户验证
• 403 表示对请求资源的访问被服务器拒绝了
• 404 表示服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。
• 500 表示服务器端在执行请求时发生了错误。也有可能是Web应用存在的bug或某些临时的故障。
• 503 表示服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

5.js延迟加载方法

js的延迟加载有助与提高页面的加载速度

一般有以下几种方式：

• defer 属性

HTML 4.01 为 <script>标签定义了 defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。defer属性只适用于外部脚本文件

• async 属性

HTML5 为 <script>标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。 目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。

async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。 缺点：不能控制加载的顺序

• 动态创建DOM方式

这些代码应被放置在标签前(接近HTML文件底部)

• 使用jQuery的getScript方法

$.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数  
      console.log("脚本加载完成")  
});

• 使用setTimeout延迟方法
• 让JS最后加载

把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

6.垃圾回收

JS引擎中有一个后台进程称为垃圾回收器，它监视所有的对象，并删除那些不可访问的对象。

什么是垃圾

一般来说没有被引用的对象就是垃圾，就是要被清除，有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。

如何检垃圾

一种算法是标记 标记-清除 算法

7.promise 先执行promise，在执行async，最后定时器

先执行微任务，后执行宏任务

[宏任务：macro task]

    \- 定时器

    \- 事件绑定

    \- ajax

    \- 回调函数

    \- Node中fs可以进行异步的I/O操作

[微任务：micro task]

    \- Promise(async/await)  => Promise并不是完全的同步，当在Excutor中执行resolve或者reject的时候，此时是异步操作，会先执行then/catch等，当主栈完成后，才会再去调用resolve/reject把存放的方法执行

    \- process.nextTick （node中实现的api，把当前任务放到主栈最后执行，当主栈执行完，先执行nextTick，再到等待队列中找）

• MutationObserver （创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。）

async function async1(){
  console.log('async1 start')    //2
  await async2()
  console.log('async1 end')		 //6
}
async function async2(){
  console.log('async2')          //3
}
console.log('script start')      //1
setTimeout(function(){
  console.log('setTimeout')      //8
},0)  
async1();
new Promise(function(resolve){
  console.log('promise1')		  //4
  resolve();
}).then(function(){
  console.log('promise2')         //7
})
console.log('script end')		  //5
//结果
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

8.重绘和回流

重绘：只修改样式，不改变结构布局，如改变背景色，字体颜色

**回流 **: 因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的。完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流

当页面布局和几何属性改变时就需要回流

9.防抖和节流

防抖

对于短时间内连续触发的事件(如鼠标滚轮滚动事件），防抖的含义就是让某个时间期限(如1000毫秒)内，事件处理函数只执行一次。

节流

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

10.常访问的技术网站有哪些

csdn，简书，npm官网，w3c，各组件的官网

git常用指令

1.常用指令

git clone +地址 克隆远程版本库

git init 初始化本地版本库

git add . 添加所有文件到暂存区

git status 查看文件提交状态

git commit -m “commit message” 提交到git仓库

git pull 拉取

git push 推送

git branch +分支名 创建分支

git checkout +分支名 切换分支

git branch 显示所有本地分支

2.解决冲突

产生冲突

先新建分支fenzhi1，添加内容提交，切回主分支，添加内容提交，然后合并分支，出现Merge conflict in 文件名，代表出现冲突，冲突代码<<<<<<<HEAD 主分支修改内容 =======分支修改的内容>>>>>>>fenzhi1

解决冲突

打开文件，哪个修改内容有用时，将有用修改的内容保留到主分支上，并将冲突代码删除就行，

3.回退版本

先git log 显示日志

找到想要回退的版本

第一种方法：git reset -hard HEAD^ 回退上一个版本

回退上上个版本HEAD^^等类推

回退100个版本 git reset -hard HEAD~100

第二种方法：git reset -hard +版本号 回退到指定版本

通过git reflog获取版本号

其他

1.http和https区别

HTTP：超文本传输协议是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL

HTTPS和HTTP的区别：

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

2.TCP/IP握手

TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议

建⽴连接三次握⼿

在 TCP 协议中，主动发起请求的⼀端为客户端，被动连接的⼀端称为服务端。不管是客户端还是服务端， TCP 连接建⽴完后都能发送和接收数据，所以 TCP 也是⼀个全双⼯的协议。
起初，两端都为 CLOSED 状态。在通信开始前，双⽅都会创建TCB 。 服务器创建完TCB 后遍进⼊ LISTEN (listen) 状态，此时开始等待客户端发送数据

第⼀次握⼿
客户端向服务端发送连接请求报⽂段。该报⽂段中包含⾃身的数据通讯初始序号。请求发送后，客户端便进⼊ SYN-SENT 状态，x 表示客户端的数据通信初始序号。syn-sent
第⼆次握⼿
服务端收到连接请求报⽂段后，如果同意连接，则会发送⼀个应答，该应答中也会包含⾃身的数据通讯初始序号，发送完成后便进⼊ SYN-RECEIVED 状态。syn-received
第三次握⼿
当客户端收到连接同意的应答后，还要向服务端发送⼀个确认报⽂。客户端发完这个报⽂段后便进⼊ ESTABLISHED 状态，服务端收到这个应答后也进⼊ESTABLISHED (established)状态，此时连接建⽴成功。

为什么要三次：因为这是为了防⽌失效的连接请求报⽂段被服务端接收，从⽽产⽣错误

断开链接四次握⼿

3.从输入url到请求数据完成

分为4个步骤：

（1）当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

（2）浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

（3）一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

（4）此时，Web服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了我们关注的前端模块

4.常用浏览器内核

谷歌Google 内核之前是webkit，现在是blink

苹果Safari 内核是webkit

IE 内核是Trident

火狐Firefox 内核是Gecko

欧朋Opera 内核是blink

Microsoft Edge 内核是EdgeHTML

360和搜狗这些分极速模式和兼容模式，极速模式用的Webkit的内核，兼容模式用的Trident内核。

5.行内元素块元素

块级元素(block)

每个块级元素独自占据一整行或多整行

如：h，p,div,ul,ol,li标签等

特点：总是从新行开始，高度，宽度，行高，外边距以及内边距都可以控制，宽度默认100%，可以容纳内联元素和其他块元素

行内元素(inline)

行内元素不占有独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构

如：a,span,strong,em,del,ins,br标签等

特点：和相邻行内元素在一行上，宽高无效，水平方向上的padding和margin可以设置，垂直方向上无效，默认宽度为本身内容的宽度，行内元素只能容纳文本或其他行内元素(较特殊)

6.H5新特性，C3新特性

H5新特性

1. 语意化更好的标签元素 article footer header nav section
2. 表单控件，calendar date time email url search
3. canvas
4. 用于媒介回放的video和audio元素
5. 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
6. 位置API：Geolocation
7. 拖放API：drag、drop

C3新特性

1.文本阴影text-shadow：偏移量x 偏移量y 模糊度 颜色

2.边框圆角 border-radius

3.盒子阴影 box-shadow：水平位置，垂直位置，模糊距离，阴影尺寸，阴影颜色，内外阴影

4.边框图片boeder-image：url() slice/width repeat

5.背景大小 background-size：

6.背景原点background-origin 这个原点，指的是图片左上角

7.background-clip背景区域裁切

8.多背景background: url() ,url(),url();

9.线性渐变： background-image: linear-gradient(direction，color1，color2…);

direction：预定义方向（to bottom/top/left/right/top left）或角度值(±xdeg)

10.径向渐变： background-image: radial-gradient(shape，color1，color2…);

shape：定义形状，默认ellipse椭圆形，circle圆形

11.过渡transition：transition-property，transition-duration，transition-timing-function，transition-delay

简写：transition：all 1s；

ease逐渐慢下来，linear匀速，ease-in加速，ease-out减速，ease-in-out先加速后减速

12.2D变形transform

平移translate(x,y);x右为正，y下为正

缩放scale(x,y);无单位，无负值，默认为1，<1缩小，>1放大

旋转rotateZ(Zdeg);顺时针为正，逆时针为负

倾斜skew(Xdeg,Ydeg)x方向逆时针为正，y方向顺时针为正

13.3D变形

translateZ，rotateX和rotateY

14.透视 perspective：px

transform-style：preserve-3d 保留3d效果

尤其是translateZ的变化，依靠视距来观察

15.动画animation

@keyframes 动画名称{

from{}

to{}

}  //设置动画

使用动画

animation：动画名称，动画时间，运动曲线，何时开始，播放次数，是否反向；

7.css优先级

!important>行内样式>ID选择器>class选择器>标签选择器>通配符(*)>继承样式>浏览器默认样式

8.定位

定位position

属性值：

static静态定位

默认属性，即是标准流的特征，此定位下无法通过边偏移属性来改变位置

relative相对定位

相对于自身初始位置进行定位，原来的位置继续占有，不脱离标准流，移动时是按初始位置左上角进行移动

absolute绝对定位

完全脱离标准流，不占位置，父盒子必须进行定位，否则以body为准对齐

fixed固定定位

以浏览器窗口作为参照物来定义元素位置，无论浏览器滚动条如何滚动，该元素始终显示在浏览器窗口的固定位置，固定定位完全脱标，不占位置，不随滚动条滚动

定位后会有z-index属性，调整堆叠次序

9.IE盒模型，标准盒模型

标准盒模型box-sizing：content-box

大小为padding+border+width

IE盒模型box-sizing：border-box

大小为width 包含padding+border

10.弹性盒模型

display：flex

用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局

flex-direction：改变主轴方向

row主轴水平方向，起点左端 row-reverse起点右端

column主轴垂直方向，起点在上 column-reverse起点在下

flex-wrap：换行

justify-content：主轴上的对齐方式(水平方向)

align-items：副轴上的对齐方式(垂直方向)

11.px ，rem ，em

px：像素

相对于电脑屏幕而言，建议用偶数设定字体大小，默认16px，

em:

em的值并不固定，会继承父元素字体的大小，默认情况下1em=16px

rem：(root em)根em

还是相对大小，但仍是相对HTML的根元素

12.图片格式

1.jpg*

jpg是一种有损压缩格式，压缩效率高，容量相对来说最小，网络传输速度快，它不能存为透明背景，在网页中应用最广，一般在不需要透明背景的时候就使用这种图片。

2.gif*

gif是一种无损压缩格式的图片，最多只有256种颜色，颜色丰富的图片转化为这种格式会颜色失真。它的背景可以是透明的，但不能是半透明的，透明背景中的图像，如果边缘轮廓是曲线的，会产生锯齿，它还可以保存为动画格式

3.png*

png的目的是为了代替gif图片，无损压缩，背景可以是透明或者半透明的，透明图像边缘光滑，没有锯齿，网页中需要透明或者半透明背景的图片，首选是png图片。

4.psd

psd是photoshop的专用格式，UI设计师使用photoshop设计效果图，最后会将psd格式的效果图交付给前端工程师，这种格式是不压缩的，而且保留了图层、透明和半透明等图片信息，所以这种图片格式的容量相对来说是很大的，前端工程师使用这种格式的效果图来切图制作网页，但是网页中不会使用这个格式的图片，它的作用一是保存图片的原始数据，二是方便图片的修改。

5.webp

是由谷歌于2010年推出的新一代图片格式，在压缩方面比当前jpg格式更优越，在质量相同的情况下，WebP格式图像的体积要比jpg格式图像小40%，不过这种图片还没有得到广泛的浏览器支持，仅在Chrome和Opera上支持，在其他浏览器上需要安装插件才可以显示，目前还没有大规模使用

位图和矢量图

位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。上面讲的5种图像都属于位图。 矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿。

6.svg*

svg是一种矢量二维图形格式，它是基于xml标记语言描述的，可以通过任何文本编辑器创建。它的优点是文件容量小，放大不失真，而且背景也可以是透明的。目前大量使用这种格式来制作网页图标或者网页地图，由于它是矢量的，所以在不同终端屏幕上(pc、手机)都有很好的显示效果

7.flash

flash是一种矢量动画文件格式，曾经在网络上风靡一时，如今已逐渐退出历史舞台，原因是它的技术更新跟不上发展，这种格式既可以是静态的图形，还可以是多媒体动画，还可以加入用户交互和数据，

13.栅格化布局

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1. 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
2. 使用行来创建列的水平组。
3. 内容应该放置在列内，且唯有列可以是行的直接子元素。
4. 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
5. 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
6. 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

小程序

1.生命周期

onLoad:function(options){}  //监听页面加载
onReady:function(){} //监听页面初次渲染完成
onShow: function () {} //监听页面显示
onHide: function () {} //监听页面隐藏
onUnload: function () {} //监听页面卸载

2.页面跳转方式

1.使用导航标签

<navigator url="../home/home">跳转</navigator>

2.通过添加bindtap事件跳转

wx.navigateTo({url:’’}) 跳转到非tabbar页面，左上角有返回按钮

wx.redirectTo({url:’’})关闭当前页面，跳转到非tabbar页面，左上角有返回主页按钮

wx.navigateBack({delta:1})返回前1页面

wx.switchTab({url:’’}) 跳转到tabBar页面，同时关闭其他非tabBar页面

wx.reLaunch({url:’’}) 关闭所有页面，打开到应用内的某个页面

3.数据请求封装

先封装

//封装一个请求数据的方法
function requestApi(url, data = {}, method = "get") {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        "content-type": "application/json"
      },
      success: function (res) {
        if (res.statusCode == 200) {
          resolve(res)
        }
      },
      fail: function (err) {
        reject(err)
      }
    })
  })
}

//暴露
module.exports = {
  requestApi
}

在app.js中配置请求数据接口地址

globalData:{
    base_url:"http://localhost:3000"
}

页面js中使用

//先引用
const app = getApp()
let {
  requestApi
} = require("../../utils/request.js")

//事件中使用
requestApi(app.globalData.base_url+"/goods/list",{page:1,size:10}).then(res=>{})

4.目录结构

pages 所有页面的集合

index.js 对应页面的业务逻辑

index.json 当前页面的配置信息

index.wxml 当前页面结构html

index.wxss 当前页面样式css

utils 模块化的js，如请求封装js

app.js js的入口

app.json 页面的全局配置文件

app.wxml 全局css

sitemap.json 页面检索

components 组件集合

view相当于div

text相当于span

image相当于img

block无意义，不被编译

wx：if相当于v-if

wx：else相当于v-else

bindtap相当于click

5.组件之间的通信

1、onShow/onHide + localStorage

wx.getStorageSync('__data') //获取

wx.clearStorageSync('__data') //清除上次通讯数据

wx.setStorageSync('__data') //设置通信数据

记得清除通信数据，否则可能出问题

有可能localStorage会读取失败，导致通信失败

页面初始化也会触发onShow

2.onShow/onHide + globalData

app = getApp()

app.$$data.XX = null  //清除上次通讯数据

app.$$data.XX = XX//设置通信数据

globalData污染

页面初始化也会触发onShow

3.eventBus(或者是pubsub) 事件发布订阅

on emit off

4.globalData + watcher

使用oba开源库

6.阻止事件冒泡和默认行为

catchtap 绑定事件并阻止事件的冒泡

react

1.生命周期

   //组件将要挂载的时候执行
    componentWillMount() {}

    //组件挂载完成的时候执行
    componentDidMount() {
        //可以在这里操作dom，进行ajax数据请求
    }

    //在父组件中改变prop传值的时候触发
    componentWillReceiveProps(nextProps) {}

    //是否要更新数据，如果返回值为true时，可以更新数据，否则不可以
    shouldComponentUpdate(nextProps, nextState) {
        return true
    }

    //数据将要更新的时候触发
    componentWillUpdate(nextProps, nextState) {}

    //组件更新完成时触发
    componentDidUpdate(prevProps, prevState) {}

    //组件销毁时触发
    componentWillUnmount() {}

2.常用的ui框架有哪些

Bootstrap

Bootstrap通过它优秀的栅栏系统，很好的实现了响应式布局。Bootstrap还提供了时尚的排版样式，表单，buttons，表格，轮播等等。

mint-ui

基于 Vue.js 的移动端组件库

Element-ui

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Ant Design

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。