前端知识总结

35次阅读

共计 8000 个字符，预计需要花费 20 分钟才能阅读完成。

前端知识总结

vuejs

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 卓越

正文完
es6 html5 vue.js 微信小程序
发表至： javascript
2019-07-16
 0
vue+node全栈移动商城【5】-简单的筛选搜索功能
关于javascript:前端面试每日-31-第951天
关于javascript:MVC依赖注入和AutoFac
H3BPM关于钉钉免登失败的处理