大前端必备知识

一、vue的基础知识

vue实现双向绑定原理

  • 1、Object.defineProperty()中的set/get设置属性值/获取属性值
  • 2、过程

    • Observer劫持并监听所有属性

      • 发生变化,通知Dep观察者(update函数)
      • Watcher负责向观察者列表添加对应更新函数
      • Compile编译解析
      • 初始化/更新

vue生命周期

  • beforeCreate

    • data和methods中的数据和方法还没初始化
  • created

    • data和methods初始化完成
  • beforeMount

    • 模板已经在内存编译好了,尚未挂载到页面
  • mounted

    • 页面挂载完成,可以操作DOM
  • beforeUpdate

    • 页面数据是旧的,data数据是新的,页面和最新数据还没同步
  • updated

    • 页面和data已经保持最新
  • beforeDestory

    • 进入销毁阶段,data、methodes…还可用
  • destroyed

    • 组件已经完全销毁,data、methods以及过滤器,指令不可用

vue组件通信

  • 父子通信

    • 父组件绑定属性“:data-attr”数据
    • 子组件在props接收驼峰式dataAttr数据
  • 子与父通信

    • 子组件$emit(‘to-parent’,newMsg)绑定属性传输数据
    • 父组件绑定@to-parent=”getChildren(e)”属性接收数据
  • 兄弟通信

    • 在main.js建立一个Vue.prototype.bus事件总线(中间层)
    • 在borther1,this.bus.$emit(‘属性toborther2’,值)
    • 在borther2接收,this.bus.$on(‘toborther2’,function(val){ that.msg = val })

vue的虚拟DOM

  • 虚拟DOM出现是为了减少频繁大面积的重绘引发的性能问题
  • 虚拟dom和真实dom的区别

    • 1、虚拟dom不会排版与重绘 2、真实dom频繁排版与重绘效率相当低 3、虚拟dom进行频繁修改,然后一次性比较并修改真实dom中需要改的部分,最后并在真实dom中进行排版与重绘,减少过多dom节点排版与重绘损耗 4、虚拟dom有效降低大面积的重绘与排版,因为最终与真实dom比较差异,可以只渲染局部
  • DOM Diff

    • 指的是通过Diff算法去比较虚拟DOM的变化
  • vue怎么更新节点

    • 1、先根据真实DOM生成virtual DOM 2、当virtual DOM某个节点的数据改变后会生成一个新的Vnode 3、Vnode和oldVnode作对比,发现有不一样的就直接修改在真实的DOM,然后使oldVnode的值为Vnode

路由

  • 全局路由拦截(路由守卫)

    • router.beforeEach(( to, from, next )=>{}) //跳转前

      • to: 即将进入的目标(路由对象)
      • from:当前导航正要离开的路由
      • next()进行下一个钩子,next(false)中断当前导航,如果此时URL改变,则会重置为from后的路由地址, next(‘/’) next(path: ‘/’)终止当前导航,跳转到一个不同的地址,next(error)如果参数为一个error实例,则会终止导航
    • beforeResolve(( to, from, next )=>{}) //跳转成功
    • afterEach(( to, from, next )=>{}) //跳转后
  • 局部路由拦截

    • 路由内部钩子: beforeEnter(( to, from, next )=>{})
    • 组件内部钩子

      • beforeRouteEnter(( to, from, next )=>{}) //从另外的组件进入该组件前触发该钩子
      • beforeRouteUpdate(( to, from, next )=>{}) //同一个组件,参数不一样,不一样数据
      • beforeRouteLeave(( to, from, next )=>{}) //该组件离开跳转到另外的组件时触发该钩子
  • 路由传参

    • this.$router.push({ path: /Re/${id} })
    • this.$router.push({ name: ‘Re’, params: { id: id } })
    • this.$router.push({ path: ‘/Re’, query:{ id: id } })

vuex

  • state定义共享变量
  • mutations同步修改共享变量(更改state,提交mutation)
  • actions可以提交mutation,action中执行store.commit
  • getter计算属性

如何解决单页面的SEO问题

  • prerender-spa-plugin
  • SSR

    • 定义

      • 服务端渲染,用户请求网页,都是后端先调用数据库,获得数据之后,将数据和页面元素进行拼接,组合成完整的html页面,再直接返回给浏览器
    • 优势

      • 1、更好的SEO,由于搜索引擎爬虫抓取工具可以查看渲染页面
      • 2、更快内容到达时间,特别对于缓慢的网络情况或缓慢的设备
    • 劣势

      • 1、构建设置和部署的更多要求
      • 2、更多服务器端负载
  • Nuxt.js

二、微信小程序基础

目录

  • app.js

    • 系统的方法处理文件,主要处理程序声明周期的一些方法
  • app.json

    • 路由地址、全局配置,导航头颜色、名称
  • app.wxss

    • 全局界面样式
  • project.config.json

    • 控制小程序版本,appid
  • sitemap.json

    • 用来配置小程序及其页面是否允许被微信索引
  • pages

    • 小程序各个页面文件
  • components

    • 组件
  • images

    • 图片
  • template

    • 模板

生命周期

  • 页面生命周期

    • onLoad

      • 监听页面加载
    • onShow

      • 监听页面显示
    • onReady

      • 监听页面初次渲染完成
    • onHide

      • 监听页面隐藏
    • onUnload

      • 监听页面卸载
  • app生命周期

    • onLaunch

      • 监听小程序初始化,只触发一次
    • onShow

      • 监听小程序显示
    • onHide

      • 监听小程序隐藏
    • onError

      • 错误监听函数

路由

  • wx.switchTab

    • 跳转到tabBar页面,并关闭其他所有非tabBar页面
  • wx.reLaunch

    • 关闭所有页面,打开应用内某个页面
  • wx.redirectTo

    • 关闭当前页面,跳转到应用内某个页面,不允许跳tabbar页面
  • wx.navigateTo

    • 保存当前页面,跳转到应用内某个页面,不能跳到tabbar页面,最多十层页面栈
  • wx.navigateBack

    • 关闭当前页面,返回上一页或多级页面

页面传递数据的方法

  • url参数传递

    • 1、wx.navigateTo({ url: ‘../list/list?username=’ + this.data.username }) 2、wx.redirectTo 3、wx.reLaunch
  • 本地缓存

    • wx.setStorageSync(‘username’,this.data.username)
  • 全局变量

    • appjs里面app.globalData对象中新建属性

基本原理

  • 双线程通信方式

    • view视图层:渲染页面结构

      • 1、初始化状态
      • 2、首次渲染状态
      • 3、持续渲染状态
      • End
    • 通过JSBridage通信
    • AppService逻辑层:用来逻辑处理、数据请求、接口调用

      • 1、初始化状态:onLoad(只执行一次)、onShow(每次切换都会执行)
      • 2、等待激活状态:接收到“界面线程初始化完成”信号,讲初始化数据发送到“界面线程”,等待界面线程完成初始渲染
      • 3、激活状态:首次渲染完成,调用onReady函数
      • 4、后台状态:也能接收数据,局部渲染
      • End
  • 虚拟DOM

    • 1、js对象模拟DOM
    • 2、比较两个DOM树
    • 3、比较两个DOM树的差异
    • 4、把差异应用到真正的DOM树上

数据请求封装

  • 在utils封装wx.request请求

    • 组件中引入应用

提高应用速度方法

  • 提高页面加载速度
  • 用户行为预测
  • 减少默认data的大小
  • 组件化方案

双向绑定

  • this.setData({})
  • bindinput绑定事件方法,监听变化

三、js基础知识

原型、原型链

  • 函数对象

    • 所有函数prototype(显式原型)
    • 函数、数组、对象都拥有__proto__(隐式原型)
    • 原型对象,拥有prototype属性的对象,在定义函数时就被创建
  • 构造函数

    • 构造函数会拥有本身方法,也会拥有显式原型的方法,即实例继承构造函数的方法
  • 原型链(查找属性,在__proto__中查找,通过__proto__形成原型链)

    • prototype
    • proto
    • constructor

继承

  • 含义

    • 发生在对象与对象之间
  • 方法

    • 原型

      • 构造函数(子构造函数prototype继承父构造函数的原型方法)
    • apply,call借调构造函数

      • 例:
    function Fn(name,age){                                 
        this.name = name;  
        this.age = 20;                                   
    }
    function Son(name,age,sex){       
        Fn.call(this,name,age);   
        this.sex = sex;                                                                             
    }
    function Son2(name,age,sex){      
        Fn.apply(this,arguments);
        this.sex = sex;                                                                            
    }   
    var  s1 = new Son("李四",20,“男”);
    console.log(s1);    //    son:{  name:"李四",age: 20,sex:"男" }       
    var  s1 = new Son2("张三",29,“女”);
    console.log(s2);   //son:{ name: "张三",age:29,sex:"女"}     

                 

闭包

  • 含义

    • 就是能读取其他函数内部变量的函数
  • 作用

    • 好处

      • 1、保护函数内的变量 安全,防止命名冲突
      • 2、内存维持一个变量,可以做缓存
      • 3、匿名自执行函数可以减少内耗
    • 坏处

      • 1、增大内耗,造成内存泄漏
      • 2、闭包跨域访问,导致性能损失

跨域

  • 含义

    • 协议、域名、端口有一个不同就是跨域
  • 解决跨域

    • 1、CORS跨源通信:浏览器和服务器同时支持,浏览器IE不能低于IE10,前端正常ajax请求,需要服务器实现CORS接口,就可以实现跨域通信
    • 2、JSONP:a、只能get请求,不能post b、dataType:”jsonp”, jsonp: “jsoncallback” c、先在客户端注册一个callback,然后把callback名字传给服务器,服务器生成json数据,然后以js语法方式生成function,function名字就是传递上来的参数jsonp.最后将json数据直接入参的方式,放置到function,生成一段js语法文档,返回给客户端
    • 3、window.name:不同页面/不同域名 仍然存在
    • 4、document.domain将两个不同页面设置成相同练=的域名,设置成更高的父域
    • 5、location.hash子框架具有修改父框架src的hash值
    • 6、window.postMessage:HTML5的api允许两个窗口跨域发送信息,解决dom跨域通用方法

构造函数

  • 任意一个普通函数用于创建一类对象时,称为构造函数或构造器

作用域链

  • 作用域:变量和函数可访问范围,或者说变量或函数起作用的区域
  • 作用域链:是一个对象列表,用来检索各个变量对象中的变量和函数,这样可以保证执行环境有权访问那些变量和函数

cal、 apply、bind的区别

  • 相同:改变this指向,作用一样
  • 不同:接收的参数不一样,call(this,a,b,c),apply(this,arguments)立即执行,bind是返回对应函数,稍后执行,需要手动执行

null和undefined的区别

  • null是空值,类型为object
  • undefined表示“缺少值”,未定义

事件冒泡、事件捕获和事件委托

  • 事件冒泡

    • 含义

      • 自下而上(自内而外)的触发事件
    • 如何防止事件冒泡

      • jq的e.stopPropagation
  • 事件捕获

    • 含义

      • 自上而下(自外而内)的触发事件
  • 事件委托

    • 含义

      • 只指定一个事件处理程序,将原本子元素上的处理程序委托给父元素执行
    • 为什么

      • 新增子元素,不需添加事件,因为已经绑定父元素
    • 怎么做

      • $(‘parent’).on(‘click’,’li’,function(e){ })

原生方法

  • 赋值方法

    • pop和push

      • pop从尾部删除1个元素
      • push增加若干元素
    • shift和unshift

      • shift头部删除1个元素
      • unshift头部增加若干元素
    • splice

      • 含义

        • 向数组中添加/删除项目,并返回被删除的项目
      • 参数

        • index:添加或删除项目的位置
        • howmany:要删除的项目的数量
        • item:向数组添加的新项目
    • reverse

      • 将数组中元素顺序反转
    • sort

      • 将数组元素进行排序
  • 访问方法

    • concat

      • 用于连接两个或多个数组,返回新数组
    • join

      • 用于把数组中的所有元素放入一个字符串,即指定分隔符进行分隔
    • slice

      • 通过索引位置获取新的数组,不会修改数组,只会返回新的子数组
    • toString

      • 将其转换为字符串
    • indexOf和lastIndexOf

      • indexOf返回指定字符串首次出现的位置(从左往右)
      • lastIndexOf返回指定字符串首次出现的位置(从右往左
  • 迭代方法

    • forEach

      • 遍历
    • map

      • 遍历
    • filter

      • 过滤器,把数组的某些元素过滤掉,然后返回剩下的元素
    • every和some

      • every从迭代开始,一旦有一个不符合条件的则停止
      • some一直在找符合条件的值,找到就停止
    • reduce和reduceRight

      • reduce升序从左往右(累加器)
      • reduceRight降序从右往左(累加)

数据类型

  • Null
  • Number
  • String
  • Boolen
  • Undefined

js设计模式

  • 模块模式
  • 构造函数模式
  • 混合模式
  • 工厂模式
  • 单例模式
  • 发布-订阅模式

js的占位显示色块(有点预加载的意思)

js的遍历

  • for

    • 耗时23-24ms,break,continue,return支持
  • for…in

    • 耗时4858ms
  • for…of

    • 耗时480-485ms
  • forEach

    • 耗时209ms,break,continue,return不支持使用

性能测试工具

四、ES6的基本语法

var、let和const赋值

  • var 声明变量,可有变量提升作用,函数级作用域
  • let 声明变量,块级作用域
  • const声明常量

解构

  • 含义

    • 允许按照一定模式,从数组和对象中提取值,对变量进行赋值
  • 解构赋值的类型

    • 数组

      • [a,b,c,d] = [1,2,3,4] // a=1,b=2,c=3,d=4
    • 对象

      • {foo,bar} = {foo: ‘aaa’,bar: ‘bbb’} //foo=’aaa’, bar = ‘bbb’
    • 字符串

      • [a,b,c,d,e] = ‘hello’ //a=h,b=e,c=l,d=l,e=o
    • 数值和布尔值

      • let {toString: s} = 123; //s === Number.prototype.toString;
    • 函数参数

      • function add([x, y]){ return x + y; }; add([1,2]); //3

箭头函数

  • this指向外层
  • 使用callapplybind,this指的是绑定的对象

Set去重

  • Set是新的数据结构,成员的值是唯一的
  • […set]
  • Array.from(new Set(array)) Set结构数组化

新增数据类型Symbol

  • 含义

    • 表示独一无二的值
    • Symbol值通过Symbol函数生成
  • 用途

    • 1、用作属性名

“模板字符串

怎么实现继承

  • Class继承

模块化

promise

  • 含义

    • 对象构造函数

      • resolve表示成功回调
      • reject表示失败回调
  • 方法

    • promise.all

      • 要多个异步请求一起成功才返回成功
    • promise.race

      • 只返回第一个执行完成的异步操作结果

async/await

  • 含义

    • 在方法外层必须 async异步函数
    • await必须执行完异步操作,才会执行下一步
  • 用法

    • 内置执行器
    • 返回Promise

五、html与css基础知识

块级元素和内联元素

  • 块级元素

    • div/h1/li/ul/p/th/td
  • 内联元素

    • a/b/input/span/i/img

如何实现水平垂直居中

  • 1、position:absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);
  • 2、position: absolute; top bottom left right:0; margin:auto;
  • 3、position: absolute; top: 50%; left: 50%; margin-top: -25px; // height的一半 margin-left: -25px; //宽的一半

display:none;和visibility:hidden;区别

  • display//不占位隐藏
  • visibility//占位隐藏

清除浮动

  • 1、添加子元素伪元素选择器
  • 2、overflow: hidden;第一个盒子设置margin-bottom,第二个盒子设置margin-top

css属性继承

  • 文本相关属性:font-family / font-size / font-style / line-height / text-align / color
  • 列表相关属性:list-style
  • 表格相关属性:border-spacing
  • 其他属性:cursor / visibility

static/relative/absolute/fixed的区别

  • 1、static默认值,不设置属性,会按正常的文档流
  • 2、relative相对定位,相对它本身的位置
  • 3、absolute绝对定位,可能是相对父元素的relative/absolute定位,也有可能是相对body定位
  • 4、fixed定位对象是根据浏览器窗口进行定位

link和@import区别

  • link是html标签,页面加载时,link会同时被加载,没兼容性,样式权重高
  • @import是css加载,会等页面加载后才加载,IE5以上才能识别,比link低

BFC

  • 含义

    • 块级格式化上下文,块级元素的布局渲染规范
  • 创建BFC

    • float不是none
    • position值不是static/relative
    • display值是inline-block,table-cell,flex,table-caption,inline-flex
    • overflow值不是visible

IE6的bug

  • 图片有边框bug

    • 解决:给图片border:0;或者border:none;
  • 双倍边距

    • 解决:display:inline;
  • 默认高度

    • 解决:font-size:0;或者overflow:hidden;
  • 按钮元素默认大小不一致

    • 解决:a标签模拟

六、浏览器兼容性

不同浏览器margin和padding不同

  • 解决:清除标签默认样式 *{ margin: 0; padding: 0; }

IE6双边距问题

  • 解决:display:inline;

标签高度设置小于10px,在IE6和IE7会超出自己设置的高度

  • 解决:overflow:hidden;或line-height小于高

图片默认有间距

  • 解决:float布局

IE9不能使用opacity

  • 解决:opacity: 0.5;filter: alpha(opacity = 50);filter:progid:DXImage Transform.Microsoft.Alpha(style = 0,opacity = 50);

边距重叠问题

  • 解决:给子元素增加父元素,父元素设置overflow:hidden;

cursor: hand在safari上不支持

  • 解决:统一使用cursor:pointer;

七、HTTP的状态及请求

常见状态码

  • 200 成功,一切正常
  • 302 重定向
  • 304未修改
  • 403服务器禁止访问
  • 404找不到请求的资源
  • 500服务器错误

http流程

  • 1、建立连接
  • 2、客户端发送请求到服务器
  • 3、服务器返回相应信息:状态行、协议版本好、成功或错误代码
  • 4、客户端接收服务器返回信息显示在用户显示屏,然后断开链接

http方法

  • GET获取数据
  • POST传输数据
  • PUT传输文件
  • HEAD获取报文首部
  • DELET删除文件
  • OPTIONS查询相应URL支持的HTTP方法

八、项目遇到的问题

vue

  • 1、兼容IE10:组件babel-polyfill
  • 2、打包后线上资源图片路径地址不对:修改cofig/index.js配置文件公共路径

微信小程序

  • 1、富文本html在小程序不兼容:用wxParse组件编译成功小程序view标签

html、css

  • 1、键盘挡住输入框挡住:css控制滚动页面

Copyright © KEN卓越

    原文作者:KEN卓越
    原文地址: https://segmentfault.com/a/1190000019773216
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞