前端学习（应对面试）

html：常见的块级（div走天下），行内块，行内标签随便能说出几个有代表的，input img a标签单独记忆

css：marigin-padding，font系列，border系列，定位，盒子模型（box-sizing），盒子阴影，flex布局，background系列等

js：数据类型（简单：字符串，数字型等，复杂：数组等）；数组常用方法重点记忆，对象字符串常用方法（分es6前后记忆，es6之前的方法，es6后的方法（filter，map，扩展运算符等）），解构赋值；应付面试还需要记一些，原型链，原型对象，对象原型，箭头函数，作用域，let，const，var区别和理解，promise等

ajax：简单理解记忆即可

vue：webpack可以稍微了解下，vue脚手架熟练使用，vue常用指令（v-model，v-for，v-if，v-else，v-on（@），v-bind（：），v-show）；vue生命周期；vue的computed，watch，data，methods，props，混入等；vue-router，路由基础和使用（保证手写出简单的路由文件）；vuex和路由要求相同，手写出简单的，这些你可以新建一个vue项目，从下载依赖包到写出这两个功能为止；axios的基本使用，$refs等。时间可以看下diff算法

js

（1）cookie、localStorage、sessionStorage的区别和使用？

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。   localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；
  
    共同点：都是保存在浏览器端，且同源（同域名同端口下聚合显示）的。
    区别：
        cookie数据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。
        sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小限制，但是要比cookie大得多，可以达到5M或者更大。
        数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；localStorage：始终有效，浏览器窗口关闭也一直保存；cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。
        作用域不同，sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；localStorage在所有的同源窗口中都是共享的；cookie也是在同源窗口中共享的，

（2） JS常用数据类型

简单数据类型：数字型Number，字符串类型String，布尔型Boolean，undefined，null

复杂数据类型（引用类型）：对象Object，数组Array。（在存储时仅仅在栈中以地址的形式指向堆）

（3）堆和栈

简单数据类型存储在栈中，复杂数据类型的地址存储在栈中

复杂数据类型存放在堆里面，首先在栈里面存放地址（十六进制表示），地址在指向堆里面的实例，真正的对象实例存放在堆空间中

（4）简单数据类型的相互转换

        （1）转换为字符串

        ①var num = 10;

        var str = num.toString();

        ②String（转换对象）；

        ③利用加号拼接字符串的方法。

        num + ” “;

        （2）转换为数组

        ①parseInt和parseFloat，整数型和浮点型的转换。

        语法格式：parseInt（转换的对象）

        parseInt("") //NaN

        转换小数时得到的结果是整数，console.log(parseInt("3.14")); //3取整         console.log(parseInt("120px")); //120会去除px这个单位。从第一个字符开始，找第一个数

        字，否则结果时NaN

        和parseFloat（转换的对象）

        转换可得到小数（浮点数），转换整数时依旧时整数，用法与上面基本相似。

        ②利用Number（转换的对象）

        var str = “123”；console.log(Number(str));

        ③利用算数运算（隐式转换）- / *(不用加号)

        （3）转换为布尔型

        ①Boolean()函数 ==> Boolean("") //false

        ②!!

（5）前置运算符和后置运算符的区别

前置运算符返回已经计算出结果的值，即++3在使用的时候代表4

后置运算符返回未经计算的值，即3++在使用的时候表示3

无论前置运算符还是后置运算符，都会使操作的变量产生相应的递增或递减，但对于++a这个式子而言，含义有所不同

（6）逻辑中断

对于&&或者||

&&：前一个条件为假的话，即可判断出逻辑语句的结果，所以此情况下系统会只判断前一个语句，后面的语句属于多余条件，不进行判断所有会造成逻辑中断

||： 前一个条件为真的话，即可判断出逻辑语句的结果，所以此情况下系统会只判断前一个语句，后面的语句属于多余条件，不进行判断所有会造成逻辑中断

（7）continue和break、reaturn关键字的区别

continue立即跳出本次循环，继续下一次循环。在循环中return和continue的用法一值。

break关键字立即退出整个循环。

return在函数中代表函数的结束并返回return后的值为函数的返回值，且不会执行return之后的语句。

（8）原型链

前置知识：

        构造函数（类）：每一个实例化的类表示对象，而类即是构造函数，例如，一个水果表示一个类，通过水果这个类实例化出一个对象——一个苹果，即苹果就是对象。构造函数是概括了一类事物的集合，通过将集合的各个属性实例化，就可以创造出对象。

class Father {

     constructor(uname) {

        this.uname= uname

     }

}

let obj = new Father("zs") // { uname: "zs" }

原型链: 

        每一个构造函数都存在一个属性prototype，他也是一个对象，其中存储一些公共方法和属性，即表示存储这个类的一些特征，而实例对象（我们使用中定义的对象）通过构造函数实例化，为了表示他是由哪个类所创建，于是在生成实例对象的时候，会把prototype完全复制到实例对象中，形成__proto__这个属性，两者一模一样，且栈中的地址相同，修改其中一个的属性，另一个会相应变化。而prototype中又有一个属性constructor，他表示类的本身，也就是构造函数本身，所以这三者会形成一种链式结构————————原型链。

由于每一个原型对象， prototype它也是一个对象，他也存在构造函数，所以通过他的__proto__会一直指向最终的构造函数 Object

（9）call，apply，bind三者的区别和联系

        (1) call方法 fn.call(被指向的对象,函数参数) 改变函数this的指向

        主要作用可以实现继承

        (2) apply调用函数,也可以改变函数内部this的指向

• 但是他的参数必须是数组形式(伪数组)apply(被指向的对象,['1','2'])
• apply的主要应用:
• 利用apply借助数学内置对象求最大值等:Math.max.apply(Math, 数组) //指向没有改变,所以只是相当于调用Math.max方法,数组(apply传参方式)为此方法本来需要传递的参数.

        (3) bind方法 绑定的意思

        fn.bind(被指向的对象)

• 不会调用原来的函数
• 可以改变原来函数内部的this指向
• 返回的是原函数改变this之后产生的新函数,不会改变原函数

        如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind

（10）闭包

闭包指可以被另外一个函数访问其变量的函数

函数嵌套函数的时候，内部函数可以访问外部函数的变量

闭包的主要作用,延伸了变量的作用范围

上层作用域的变量，会通过[[Scopes]]属性存在闭包函数中，而这个属性中的 Closure对象就是我们需要的闭包数据，上层作用域里的变量数据,所以,造成内存被占用,一直不释放,也就是内存泄漏.可以实现外部访问闭包函数.一个作用域的变量互通

ajax等知识点

（1）ajax简述

ajax（Asynchronous Javascript And XML）异步JavaScript和XML

使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

ajax可以视作对js内置XMLHttpRequest对象的优化和封装

（2）XMLHttpRequest对象详解

        使用XHR发起GET请求

var xhr = new XMLHttpRequest()
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks') // 参数通过?xx=ss&ss=ss方式拼接在url后面
xhr.sent()
xhr.onreadystatechange = funciton() {
    if(xhr.readyState === 4(请求完成) && xhr.status === 200(请求成功)) { //判断的属性的status是创建对象xhr里的属性,代表服务器响应的状态,不可以更改
    console.log(xhr.responseText) //响应回数据中的status,是服务器端返回数据的状态,通过后端可以更改
    }

}

        使用XHR发起POST请求

var xhr = new XMLHttpRequest()
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
xhr.setRequestHeader('Conetnt-Type','application/x-www-form-urlencoded')
xhr.sent('')(提交数据使用字符串格式,多个数据使用&连接,不可以在open中拼接字符串,需要在sent中写入)
xhr.onreadystatechange = funciton() {
    if(xhr.readyState === 4 && xhr.status === 200) { 
        console.log(xhr.responseText) //得到的是一个JSON字符串
    }

}

        xhr对象的readyState属性

（3）常用http状态码

百度

（4）什么是跨域

由浏览器同源策略限制的一类请求场景，当两个不同地址，不同端口，不同协议之间请求就会产生跨域。

（5）防抖和节流

防抖：是当事件被触发后,延迟n秒后再执行回调,如果在n秒内事件又被触发,则重新计时

// html
<button id="button">防抖</button>
// js
let button = document.getElementById("button")
let timer
button.addEventListener('click', function() {
  if (timer) { clearTimeout(timer) }
  timer = setTimeout(() => {
    console.log(11111);
  }, 1000)
})

节流：节流策略，顾名思义，可以减少一段时间内事件的触发的频率。

当鼠标连续不断地触发某时间，只在单位时间内触发一次。期间的点击无效

// html
<button id="button">节流</button>

// js
let button = document.getElementById("button")
let flag = false
button.addEventListener('click', function() {
  if (!flag) {
    flag = true
    setTimeout(() => {
      flag = false
    }, 1000)
    console.log(11111);
  }
})

（6）git常用命令行

        git status // 查看暂存区文件和修改后文件状态

        git add . // 将更改文件存入暂存区

        git commit -m "xxx" // 将暂存区文件提交在本地git仓库

        git checkout xxx // 切换指定分支

        git branch // 查看所有分支（当前分支高亮显示）

        git clone xxx // 克隆远程分支代码（xxx为远程分支代码）

        git checkout -b xxx // 创建并切换为此分支

        git pull origin 远程分支:本地分支 // 将远程分支拉取到本地分支，（当本地分支未创建时，自动创建，并合并远程分支到当前分支）

        git merge xxx // 将指定分支合并到当前分支

        git push origin 本地分支:远程分支 // 将本地分支推到远程分支，（当远程分支未创建时，会自动创建）

（7）webpack相关知识了解一下，有助于理解vue

（8）正则表达式，稍微看一下

vue部分

（1）vue常用指令

v-bind：

        目标: 给标签属性设置vue变量的值

        v-bind语法和简写

        语法:v-bind:属性名="vue变量"

        简写:  :属性名="vue变量"

v-on:        

        目标: 给标签绑定事件

        语法

        v-on: 事件名="要执行的少量代码"

        v-on: 事件名=“methods中的函数名"

        v-on: 事件名=“methods中的函数名(实参)"

        @事件名=...简写形式

        方法在methods选项定义

v-model:

        value属性和vue数据变量,双向绑定到一起

        语法: v-model="Vue数据变量"

        双向数据绑定(双向指定的value属性-vue变量,暂时只能用在表单标签,后期可以用在组件中)

        变量变化 -> 视图自动同步

        视图变化 -> 变量自动同步

        vue变量的初始值会影响表单的默认数据

        v-model的本质：v-bind（变量改变标签使用的变量跟随变化（属性名）） + v-on（标签事件改变时定义变量跟随改变（事件名））

v-text和v-html

• v-text="Vue数据变量",用的较多
• v-html="Vue数据变量",用的较少,因为有安全风险

v-show和v-if

        控制标签的隐藏和出现(true时显示，false隐藏)

        show的本质是css display: block; display: none;的封装

        if的本质是从节点树中删除和插入

        v-if 可以搭配 v-else v-else-if使用和if语句相同

v-for  

        列表渲染, 所在标签结构, 按照数据数量, 循环生成

        语法:

• v-for="(值变量, 索引变量) in 目标结构"
• v-for="值变量 in 目标结构"

        注意: 

• 想要谁循环就放在谁身上(根据遍历到的数据动态生成标签)
• 目标结构可以是数组/对象/字符串(可遍历结构)
• 循环都是独立执行的
• v-for的临时变量名只能用在v-for范围内

（2）动态class动态style

        语法 :class="{类名: 布尔值}"；语法 :style="{css属性名: 值}"  

（3）过滤器

        转换格式，过滤器就是一个函数，传入值返回处理后的值

        过滤器只能用在，插值表达式和v-bind动态属性里

        语法：

• Vue.filter("过滤器名", (值) => {return "返回处理后的值"})   // 全局过滤器,可以生效在所有的vue文件中
• filters: {过滤器名字: (值) => {return "返回处理后的值"}}   // 局部过滤器,只在当前vue文件中生效

        使用: 变量名 | 过滤器名

（4）计算属性 computed

一个变量的值,依赖另外一些数据计算而来的结果

语法: computed: {

        计算属性名 () {

                return "值"

        }

}

注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同,不需要调用,使用的时候和变量一致

使用this.计算属性名也可以使用该变量

计算属性将基于它们的响应依赖关系缓存。计算属性只会在相关响应式依赖发生改变时重新求值。这就意味着只要计算属性依赖值（非响应式数据获得的计算属性值将永远不发生改变）还没有发生改变，多次访问时计算属性会立即返回之前的计算结果，而不必再次执行函数。（当有需求实时的获取值得时候可以采用函数调用的形式得到值）

计算属性的完整写法：

// 给计算属性赋值触发set方法

// 使用计算属性的值,触发get方法

computed: {

        "属性名": {

                set(值) {

                },

                get() {

                        return "值"

                }

        }

}

（5）侦听器watch

可以侦听data/computed属性值的改变

语法1: 

watch: {

        "被侦听的属性名" (newVal, oldVal) {

        }

}

高级语法:

watch: {

        "要侦听的属性名": {

                immediate: true, // 立即执行        

                deep: true, // 深度侦听复杂数据类型内变化

                handler (newVal, oldVal) {}

        }

}

（6）组件的概念和理解

每一个.vue文件都是一个组件

• 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
• 组件化 ：封装的思想，把页面上 `可重用的部分` 封装为 `组件`，从而方便项目的开发 和 维护
• 一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的结构 样式 和 行为(html, css和js)
• 各自独立，互不影响

每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

• 创建组件, 封装要复用的标签, 样式, JS代码
• 注册组件(使用前需要引入)
  • 全局注册 – main.js中 – 语法如图
  • 
  • 局部注册 – 某.vue文件内 – 语法如图
  • 
• 使用组件(组件名当template标签使用,组件对象代表引入时命名的对象)

（7）组件通信：父子

父向子传值：在父组件中的template里使用时，通过属性名="值"的形式传给子组件

子组件内通过props接受

props: []  // 简单写法

props: { 属性名: { type: 类型, default: 默认值 } } // 复杂数据类型的返回值使用函数的形式返回 () => { return {} }

子向父传值：

子组件触发父自定义事件方法

前置补充, 父->索引->子组件(用于区分是哪个子组件)

• 父组件内,绑定自定义事件和事件处理函数
  • 语法: @自定义事件名="父methods里函数名"
• 子组件内,恰当的时机,触发父给我绑的自定义事件,导致父methods里事件处理函数执行
• this.$emit(自定义事件名, 参数/传递的值)

（8）mixins混入

通过组件内script标签内通过mixins对象混入。混入对象为一个js文件，通过export default 暴露内容，语法格式与vue组件相同

格式为： mixins: [obj, obj2]

使用场景：在多个页面中使用同一个变量或方法时，可以定义混入组件，在main.js中引入

Vue.mixin({

        methods: {

                ...具体方法

        }

})

（9）依赖注入

通过provide和inject实例对象可以实现父组件给所有子组件传值

在父组件中声明provide对象，以函数的形式返回一个对象中需要传递的数据，在子组件中使用inject接收（使用方式和props类似）

（10）vue生命周期

百度（vue3.0有变化）

（11）$refs和$nextTick使用

通过ref属性获取组件对象

this.$nextTick(函数体)(一般情况下写的箭头函数,因为箭头函数没有this指向,使其this指向vue实例对象)

（12）vue动态组件（vue-router前身）

多个组件使用同一个挂载点，并动态切换

方法： 设置挂载点<component>,使用is属性来设置要显示哪个组件

<component :is="要显示的动态组件名"></component>

（13）组件插槽（需要着重理解）

（14）vue-router模块

（15）vuex

vue用来存储数据的插件

是一个js文件

import Vue from 'vue'

import Vuex from 'vuex'

import user from '@/store/modules/user.js'

Vue.use(Vuex)



export default new Vuex.Store({

  namespaced: true,

  state: {

    userData: {},

  },

  actions: {

        // 异步处理state数据

  },

  mutations: {

    setData(state, data) {

      state.userData = data

    },

   getters: {

        // vuex state变量快速访问，类似computed

        },

        modules: {

                // 与vuex语法类似，小的vuex

        }

  }

})