耶温的博客

前端工程师进阶之旅-手撕代码主要包括一些工作中常用的方法，面试常问到的方法。还有一些不太了解，趁机深入了解的知识点。废话少说，直接干代码就完事了。数据类型判断使用 Object.prototype.toString 实现。function myTypeof(data) { return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();}数组去重//new Set() 集合//ES6提供了新的数据结构Set

H5 端 rem 适配方案与 viewport 适配remrem 是 CSS3 新增的一个相对单位（root em，根 em）只根据当前页面 HTML 页面的 font-size 设置，如果根目录的 font-size 为 18px，则 1rem=18px媒体查询设置@media screen and (min-width: 320px) { html { font-size: 32px; }}@media screen and (min-width: 375px) {

CSS3 Canvas 实现两张图片合成一张图片需求需求：在项目中遇到将一张固定图片和一张二维码图片合成一张新图片，并且用户能够将图片保存下载到本地。思路：使用 CSS3 中的 Canvas 将两张图片绘制。HTML 部分<div> <img id="img1" src="wenbo.jpg" alt="" /> <img id="img2" src="demo.png" alt="" /></div><br /><d

使用 Less下载依赖：npm install less less-loader在mian.js 中添加:import less from "less";Vue.use(less);使用：<style lang="less"></style>使用 Less 时运行报错this.getOptions is not a function原因：less-loader安装的的版本过高解决：重新安装较低版本npm uninstall less-load

PromisePromise 介绍Promise 对象表示一个异步操作的最终完成（或失败）及其结果值。状态：一个 promise 必然处于以下几种状态之一待定：初始状态(pending)已兑现：操作成功完成(fulfilled)已拒绝：操作失败(reject)创建 PromisePromise 对象是由关键字 new 及其构造函数来创建的。该构造函数会把一个叫做“处理器函数”（executor function）的函数作为它的参数。这个“处理器函数”接受两个函数——resol

H5 离线存储-使用 serverWorker 实现离线存储所用技术serverWorkerserviceWorker 生命周期install 事件会在 serviceWorker 注册成功时候触发，主要用于缓存资源activate 事件会在 serviceWorker 激活的时候触发，主要用于删除旧的资源fetch 事件会在发送请求的时候触发，主要用于操作缓存或者读取网络资源注意：如果 sw.js 发生了改变，install 事件会重新触发activate 事件会在

SetSet 对象允许储存任何类型的唯一值，无论是原始值或者是对象引用本质：构造函数，用来生成 Set 数据结构描述Set 对象是值的集合,你可以按照插入的顺序迭代它的元素。Set 中的元素只会出现一次，即 Set 元素是唯一的。相当于集合，可以进行并集交集运算。值的相等对于原始数据类型（boolean，number，string，null，undefined），如果储存相同值则只保存一个，对于引用类型,引用地址完全相同则只会存一个。+0 与-0 在存储判断唯一性的时候是恒等的

WPA-渐进式 web 应用PWA 是什么渐进式 Web 应用，提升 web app 浏览体验。manifest应用程序清单基本介绍：web app manifest是 PWA 技术集合中的一部分web app manifest可以让网站安装到设备的主屏幕，而不需要用户通过应用商店下载web app manifest，在一个 JSON 文本文件中提供有关应用程序的信息（名称，作者，图标和描述等等）传统的 web app 入口网站书签，收藏夹直接搜索W

正则表达式正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。这些模式被用于RegExp的 exec和 text方法，以及String中的 match、matchAll、replace、search和split方法创建表达式字面量使用两个 / 直接创建正则表达，已斜杠表示开始和结束var reg = /ab/g当脚本加载后，正则表达式字面量就会被编译。当正则表达式保存不变时，使用此方法可获得更好的性能。RegExp构造函数var reg = new R

HTML5HTML5和HTML事件注意：行内代码的为H5新增事件Window事件属性：针对 window 对象触发的事件（应用到 标签）onafterprint文档打印之后运行的脚本onbeforeprint文档打印之前运行的脚本onbeforeunload文档卸载之前运行的脚本onerror在错误发生时执行的脚本onhaschange当文档以改变时运行的脚本onload页面结束加载之后触发onmessgae在消息被触发时运行的脚

正则匹配解析Url参数【如: /search/u1s2s3q4k2】分享一个方法，用来解析url参数，常用在筛选页面。url：/search/u1s2s3q4k2需求把 u1s2s3q4k2解析成一个参数对象{ k : [ '2' ] , q : [ '4' ] , s : [ '2' , '3' ] , u : [ '1' ] }方法如下：//字符串为let url = u1s2s3q4k2在这里插入代码片let obj = url .match(/[a-z]+\d+/g)

在Vue中全局定义防抖函数防抖作用：如果一个函数持续地触发，那么只有在它结束后一定时间才会执行一次。首先可以在Vue项目工具JS文件中定义，后续可以引入使用export const debounce = function (fn, delay) { let timer = null; return function () { let context = this; let args = arguments; clearTimeout(timer); //清除