前端学习(应对面试)

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

        }

  }

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值