Donnien的博客

原创 手写发布订阅类

class Sub { events = {}; on(type, func) { !Array.isArray(this.events[type]) ? (this.events[type] = []) : null; let arr = this.events[type]; if (arr.includes(func)) return; arr.push(func); } off(type, func) { let arr = this.eve

原创 JS各种声明变量方式的区别

1.let和var的区别var存在变量提升,而let不存在变量提升(更严谨)console.log(x); //undefinedconsole.log(y); //Uncaught ReferenceError: Cannot access 'y' before initializationvar x = 12;let y = 13;全局上下文中基于var声明的变量是直接存储到GO(window)中,而let声明的变量是存储到VO(G)中,和GO没有关系var x = 12;le

原创 vue项目打包以及优化

vue项目的打包上线及优化项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理vue项目的打包脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包打开终端，切换到项目根目录输入命令：npm run build会在当前项目的根目录下生成一个dist文件夹，里面就是打包后的文件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NISVuSR5-1627475455629)(img\01-打包后的文件目录

原创 element-ui Navbar使用小结

左侧导航NavMenu 导航菜单el-menu:整体菜单组件unique-opened：是否在同一时间只保留一个菜单项的展开router：是否使用 vue-router 的模式，启用该模式会在激活导航时以el-menu-item的 index 作为 path 进行路由跳转default-active：默认被展开的菜单项，它 的值为el-menu-item的indexdefault-openeds:当前需要展开的菜单项el-submenu：一级菜单项index:当前一级菜单项的唯一

原创 js文件内使用第三方库组件

原创 登陆后跳转的注意点!!!!

一定要记得先存储token再进行跳转!!!错误示范this.$router.push({ name: 'index' })localStorage.setItem('houtai_token',res.data.data.token)报错提示登陆时会报错,而且需要点击两次登陆才能登陆成功跳转到首页正确代码// 一定要记得先存储token再进行跳转!!!!!!!localStorage.setItem('houtai_token',res.data.data.token)

原创 跳转重复路由的处理

错误NavigationDuplicated: Avoided redundant navigation to current location: "/comment/108".解决方法// 跳转重复路由处理this.$router.push({ path: `/comment/${this.post.id}` }).catch(() => {});

原创 组件递归小结

组件递归：组件内部调用组件自身细节：不能在当前组件中使用import+components的方式引入自身并注册来使用Unknown custom element: <hmCommentItem> - did you register the component correctly? For recursive components, make sure to provide the "name" option.翻译：未知的用户元素hmCommentItem，你有没有正确的注册这个组件.

原创 导航守卫小结

导航守卫在我们的项目中，并不是所有的页面都能自由的跳转，有些页面需要登陆之后再跳转现在的问题：不登陆也能进入到个人中心页–不合理解决：添加导航守卫，判断用户是否登陆，如果登陆则进行跳转，否则重定向到登陆页在src/router/index.js中添加守卫，限制用户的跳转登陆成功之后存储token到本地存储if (res.data.message === "登录成功") { // 在跳转之后，存储token到本地存储 localStorage.setItem('heima_65

原创 登陆后页面回跳功能实现

页面回跳在文章详情页，如果没有登陆，则应该通过拦截器重定向到登陆页但是有一个需求：登陆成功之后，仍然回到当前文章详情页解决：1.当重定向到登陆页的时候，将当前文章详情页的地址做为参数传递给登陆页2.在登陆成功之后，根据之前传递的地址进行回跳将当前文章详情页的地址做为参数传递给登陆页// src/utils/request.js 添加响应拦截器 核心代码是第7行axios.interceptors.response.use(function (response) {// 响应成功 co

原创 Axios基础语法

/* * http://www.axios-js.com/zh-cn/docs/ * * 基于Promise封装的ajax库，核心XMLHttpRequest * * axios 函数(对象) * + CancelToken 用于取消ajax请求 * + all 基于promise.all实现ajax的并行，当所有的ajax请求都成功，整体才会返回一个成功的promise实例 * + spread 解析出基于all返回的结果 * + create 创建一个新的实例，来做

原创 检测数据类型的公用方法

const toType = function toType(obj) { // null/undefined if(obj == null) return obj+''; let reg = /^\[object ([a-zA-Z0-9]+)\]$/; // 引用数据类型 return typeof obj === 'object' || typeof obj === 'function' ? // 正则捕获exec [Object xxx] 捕获.

原创 模拟ajax的并行和串行

// 模拟发送网络请求const query = (interval) => { return new Promise((resolve) => { setTimeout(() => { resolve(interval); }, interval); });};/* 并行 同时发送多个请求 等待所有请求都成功之后再继续往下执行 Promise.all 等待所有promise实例都是成功态才执行then的回调函数 *//*

原创 变量提升知识点补充

/* 判断体中的变量提升机制 带var的还是只声明 判断体中带function的,在变量提升阶段,也是只声明了,不在判断体中的function是声明加定义的*/console.log(a); // undefinedconsole.log(b); // undefinedif (!('a' in window)) { // 'a' in window 检测'a'是否是window的一个属性 var a = 13 function b(){}}console.l

原创 迭代器规范类封装

class Interator { constructor(assemble){ let self = this self.assemble = assemble self.index = 0 } next(){ let self = this, assemble = self.assemble if (self.index > assemble.length - 1) {

原创 生成器函数generator常规语法

/* function* fn(){ console.log(this); return 10}fn.prototype.name = '小林'// 普通函数执行 返回这个函数的一个实例 但是函数内部的代码并没有执行let itor = fn()console.log(itor);// 调用itor.next方法才会将fn中的代码执行 并放回一个对象{ value: 10, done: true }console.log(itor.next());*/// ===

原创 yarn常用命令

yarn init 等价于 npm inityarn add 包名 等价于 npm i 包名yarn remove 包名 等价于 npm un 包名yarn global add 包名 等价于 npm i 包名 -g

原创 手写promise(面试版)

(function () { "use strict"; function Promise(executor) { var self = this; if (typeof executor !== "function") throw new TypeError("Promise resolver is not a function"); if (!(self instanceof Promise)) throw new TypeError("

原创 Map和weakMap

// Map// let m = new Map()// m.set('name', '小林')// m.set('name', '小谢')// console.log(m); // Map(1) { 'name' => '小谢' } 同键名会覆盖(即去重)// let obj = { name: 1 }// m.set(obj,'456') // 这个obj的引用空间还是被set所引用导致v8垃圾回收机制回收不了obj// obj = null // 把obj清空// conso

原创 Promise.all(race)

// Promise.all([promise数组:{要求数组中的每一项尽可能都是promise实例}])：返回一个新的promise实例AA，AA成功还是失败，取决于数组中的每一个promise实例是成功还是失败，只要有一个是失败，AA就是失败的，只有都成功AA才是成功的// Promise.race：传入一个数组,最先知道状态的promise实例，是成功还是失败，决定了AA是成功还是失败function fn(interval) { return new Promise((resolv

原创 CSS定位总结

固定定位固定定位 相对于什么做定位 浏览器div { position: fixed; top:0; left:0;}固定(绝对定位)定位 3个特点脱标会重叠 z-index决定谁先显示变成行内块元素的水平垂直居中定位top left 50%margin 负 自身宽度和高度的一半绝对定位div{ position:absolute;}它的参照物是什么：使用了 相对定位或者绝对定位或固定定位的 祖先元素

原创 批量新增元素(减少回流/重排)

// 1.利用文档碎片 let box = document.querySelector('#box'), frag = document.createDocumentFragment(); for (let i = 0; i < 10; i++) { let span = document.createElement('span'); span.innerHTML = i + 1; frag.appendChild(s.

原创 轮播图(在新版浏览器渲染队列下利用样式读写分离的应用场景)

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>在线Web高级</title> <style> * { margin: 0;.

原创 promise面试题

// async function async1() {// console.log('async1 start');// await async2();// // 下一行代码放到了微任务队列当中// console.log('async1 end');// }// async function async2() {// console.log('async2');// }// console.log('script start');// set.

原创 宏任务与微任务习题

// setTimeout就是作为宏任务来存在的，而Promise.then则是具有代表性的微任务，// 上述代码的执行顺序就是按照序号来输出的。// setTimeout((_) => console.log(4));// new Promise((resolve) => {// resolve();// console.log(1);// }).then((_) => {// console.log(3);// });// console.log(2)

原创 手写bind方法(基于call实现,柯理化函数思想)

function fn (x,y,ev) { console.log(this,x,y,ev); return x+y}obj = { name: 'obj'}// 重写bind方法 基于call实现Function.prototype._bind = function _bind(context,...params) { // this->fn context->obj params->[10,20] // 这里多一个arg

原创 手写call以及apply方法(完整版包含格式校验)

// 重写内置call方法Function.prototype._call = function _call(context, ...params) { // this->fn context->obj params->[10,20] // context是undefined或者null的情况 if (context == null) context = window; // context是传的是原始值得情况 if (!/^(object|function)

原创 jQ源码部分解读

/* * 闭包进阶之：单例设计模式 & 模块化编程思想 * 模块化编程历史「当代前端开发，都是模块化编程：公用性&复用性、提高开发效率、方便管理、团队协作开发...」 * @1 高级单例设计模式「闭包+对象」 问题：根据模块之间的依赖，需要明确导入顺序 * @2 AMD 按需加载(require.js) 问题：所有的依赖都是需要提前导入的 “前置依赖” * @3 CMD(sea.js) & CommonJS规范(Node.js) 问题：客户端浏览

原创 柯理化函数编程思想

// 柯里化函数编程思想是指利用闭包的保存机制(形成闭包,把一些信息预习存储起来),供其上下文来使用// 例题// 写一个函数fn 使得满足下面条件// let res = fn(1,2,3,4,5)(3)// console.log(res) // => 1+2+3+4+5+3 = 18function fn(...params){ return function (...args) { // 利用上面保存的parmas的值 args = args.c

原创 手写节流函数(主要业务代码不含格式校验)

// throttle的思想是降低触发的频率 减少一段时间内触发的频率 即是节流// 清除延时器/* 清除延时器的原理 1.设置延时器时,timer=setTimeout(...),这里的timer是个数字, 代表是在系统中是第几个延时器 2.clearTimeout(timer)清楚延时器时,只会把系统中的对应的第几个延时器清楚, 但是timer还是原来的数字并不会变为null*/function clearTimer(timer){ if (tim

原创 词法作用域小例题

// 词法作用域就是指作用域是由代码中函数声明的位置来决定的，// 所以词法作用域是静态的作用域，通过它就能够预测代码在执行过程中如何查找标识符。function bar() { var myName = "极客世界" let test1 = 100 if (1) { let myName = "Chrome浏览器" console.log(test) }}function foo() { var myName = "极客邦"

原创 暂时死区小例题

// let和const声明可以让变量在其作用域上受限于它所使用的块、语句或表达式。// 与var不同的是，这些变量没有被提升，并且有一个所谓的暂时死区(TDZ)。// 试图访问TDZ中的这些变量将引发ReferenceError，因为只有在执行到达声明时才能访问它们。let a = 10; // 全局使用域function foo() { // TDZ 开始 // 创建了未初始化的'a' console.log(a); // ReferenceError 报错 // TDZ结束，'

原创 类数组调用数组方法(鸭子类型)

/* * 鸭子类型：长得像鸭子，就想让期具备鸭子的方法 * 类数组「还有类Promise...」结构很像数组，但是不是Array的实例，所以无法直接调用Array.prototype上的方法，而我们期望他可以使用这些方法的，这样就需要函数借用 */// let elements = document.getElementsByTagName('*');// 它是HTMLCollection集合/实例「类数组集合」，不能直接使用数组的办法，如果想使用数据的办法？ // 前提条件：类数组结构和数

原创 重写内置new方法完整版(包含Object.create()以及格式校验)

function Dog(name) { this.name = name;}Dog.prototype.bark = function () { console.log('wangwang');}Dog.prototype.sayName = function () { console.log('my name is ' + this.name);}/* * 重写内置NEW * Ctor:constructor 想创造谁的实例，就传递哪一个构造函数 Do

原创 用户输入URL到渲染页面整个过程之间发生了什么

在不考虑用户输入搜索关键字的情况下 1,用户输入url并回车 2,浏览器进程检查url，组装协议，构成完整的url 3,浏览器进程通过进程间通信（IPC）把url请求发送给网络进程 4,网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程 5,如果没有，网络进程向web服务器发起http请求（网络请求），请求流程如下： 5.1 进行DNS解析，获取服务器ip地址，端口（端口是通过dns解析获取的吗？这里有个疑问）

原创 字符串出现次数最多的所有字符以及出现次数(经典面试题,拓宽思路)

/*==去重思维==*/let str = "zhufengpeixunzhoulaoshi";let obj = {};[].forEach.call(str, char => { if (typeof obj[char] !== "undefined") { obj[char]++; return; } obj[char] = 1;});let max = 1, res = [];for (let key in obj) { let item = obj[key];

原创 replace方法当中参数传回调函数案例

let time = "2019-08-13";//=>变为"2019年08月13日"let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;//=>这样可以实现//time = time.replace(reg,"$1年$2月$3日");//console.log(time); //=>2019年08月13日//=>还可以这样处理 [str].replace([reg],[function])//1.首先拿REG和TIME进行匹配捕获，

原创 正则两种创建方式的区别(正则表达式需要拼接自定义变量的场景)

//=>构造函数因为传递的是字符串，\需要写两个才代表斜杠let reg = /\d+/g;reg = new RegExp("\\d+","g");//=>正则表达是中的部分内容是变量存储的值//1.两个斜杠中间包起来的都是元字符（如果正则中要包含某个变量的值，则不能使用字面量方式创建）let type = "zhufeng";reg = /^@"+type+"@$/; console.log(reg.test("@zhufeng@")); //=>falseconso

原创 Mysql数据库常用sql语句

-- 查询学生表SELECT id,username,sex,age FROM student;-- 获取所有字段的简单写法SELECT * FROM student;-- 插入数据-- 语法： insert into 表名称(字段1，字段2,....，字段N) values(字段1的值，字段2的值,......字段N的值)-- 场景：向student表中出入一条数据insert into student(username,sex,age) values('赵六','男',18);--

原创 字符串隐式转换

/* * 把其它类型转换为string * + [val].toString() & String([val]) * + 原始值类型：基于引号包起来、bigint会去掉n * + 对象类型值： * + 调用 Symbol.toPrimitive * + 如果不存在则继续调用 valueOf 获取原始值，有原始值则把其转换为字符串 * + 如果不是原始值，则调用toString转换为字符串 * 特殊