小蛮牧码者-CSDN博客

原创 CommonJs模块化实现原理&ES Module模块化原理

我们在src/index.js中引入了a.js、b.js, webpack会把’src/a.js’、‘src/b.js’作为modules的key值，该模块内容作为modules的value值；如果是通过export default 方式导出的，那就在 exports 对象加一个 default 属性。进行node ./build.js后查看dist文件下。执行入口函数，为防止命名污染，封装成立即执行函数。

2023-12-11 17:30:01 735

原创 tapable最详细源码分析及手写实现

tapable整体介绍tapable 是一个类似于 Node.js 中的 EventEmitter的库，但更专注于自定义事件的触发和处理。const { SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook, AsyncParallelHook, AsyncParallelBailHook, AsyncSeriesHook, AsyncSeriesBailHook, AsyncSeriesWaterfallHook， Asyn

2022-04-12 15:11:53 1141 2

转载 V8 Promise源码全面解读

阅读本文你将收获什么？了解 V8 Promise 源码全过程，世界上不再有能困住你的 Promise 题目，我就是这么肯定这篇文章的干货仅仅了解或者实现了 Promise/A+ 规范，这与 JavaScript 的 Promise 中间还有很大的差距如果你在面试时将 Promise 回答到本文的深度，一定是收获 SP 或者 SSP offer 的利器，因为面试官大概率也不知道这些知识。你知道浏览器 & Node 中真正的 Promise 执行顺序是怎么样的吗，如果你只是看过 Promise

2022-03-21 11:15:22 503

原创记录webpack的source map使用详细说明

common.jsexport const show = () => { debugger document.write('hello webpack 11')}没有使用source-map，看一下调试效果：evaldevtool: 'eval'调试效果：eval - 每个模块都使用 eval() 执行，并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source

2022-03-14 17:49:28 1990

原创 webpack中hash、chunkHash、contentHash的区别

webpack中hash、chunkHash、contentHash的区别hashHash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的hash值就会更改。这样会导致缓存失效。项目中的文件只要有一个文件改变，那么整个项目文件的hash都会改变。chunkhashchunkhash：和webpack 打包的chunk 有关，不同的entry 会⽣成不同的chunkhash值只有在改变某个chunk的文件时，才会生成对应的hash。比如我改变了index依赖的base.less文件构

2022-03-10 15:56:31 1115

原创详细记录如何在跨域请求中携带cookie

1. 搭建环境1.生成工程文件npm init 2.安装 expressnpm i express --save 3.新增app1.js，开启服务器3001const express = require('express')const app = express()const port = 3001// 设置`cookie`app.get("/login", (req, res) => { res.cookie("JESSIONID", "10101001", {

2022-02-28 17:37:06 5308 6

原创在 Vue 中正确使用防抖和节流

1. 观察者防抖1. 在 create() 钩子里，创建防抖回调，并将其赋值到实例上：this.debouncedWatch = debounce(…, 500)。2. 在观察者回调 watch.value() { … } 中传入正确的参数调用 this.debouncedWatch()。3. 最后，beforeUnmount() 钩子中调用 this.debouncedWatch.cancel() ，在卸载组件之前，取消所有还在 pending 的防抖函数执行。<temp

2022-02-28 11:52:57 987

原创箭头函数特殊性与普通函数的区别

参考：https://juejin.cn/post/7050492355056664612箭头函数没有[[Construct]]函数对象是一个支持[[Call]] 、 [[Construct]]内部方法的对象。每个支持[[Construct]]的对象必须支持[[Call]]，也就是说，每个构造函数必须是一个函数对象。因此，构造函数也可以成为构造函数函数或构造函数对象。所以，想要对某个对象使用new，就得确保该对象具有 [[Construct]]这个内部方法。而箭头函数没有 [[Construct]]

2022-02-24 17:24:33 355

原创将数组按指定大小分组

使用Array.from()创建新的数组, 这符合将生成的区块数。使用Array.slice()将新数组的每个元素映射到size长度的区块。如果原始数组不能均匀拆分, 则最终的块将包含剩余的元素。let chunk = (arr, size) => Array.from({ length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size));let arr = [1, 2, 3

2022-02-16 09:16:50 657

原创 Object.create()与new的具体实现与区别

Object.create与new区别function A() { this.name = 'abc';}A.prototype.a = 'a';A.prototype.showName = function () { return this.name;}var a1 = new A();var a2 = Object.create(A.prototype);从这个例子可以看出，a2只继承了A原型的属性和方法，a1 是构造函数 A 的实例，继承了构造函数 A 的属性

2022-02-14 10:57:16 1052

原创 VueRouter源码详细解读

路由模式1. hash使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。Hash URL，当 # 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面。2. history依赖 HTML5 History API 和服务器配置3. abstract支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进

2022-01-21 16:03:20 2404

原创解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题

解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}

2022-01-21 09:17:30 534

原创 Promise.all捕获错误

Promise.all默认只要有一个错误就直接返回错误。promise.all中任何一个promise 出现错误的时候都会执行reject，导致其它正常返回的数据也无法使用Promise.all([ Promise.resolve(1), Promise.reject('err'), Promise.resolve(2)]).then(res => { console.log(res)}).catch(err => { console.log('error', err)})

2022-01-14 16:17:50 3787

原创 vue3中ref、reactive、shallowRef、 shallowReactive、toRaw、unref、toRef、toRefs、customRef使用与区别

refreftoRef普通ref对象特殊ref对象不会和原始对象挂钩创建的ref对象，与原始对象挂钩重新渲染不会触发渲染-普通ref对象不会和原始对象挂钩重新渲染如下面的例子中， ref对象改变，视图已更新，原始数据json保持不变。<template> <div>b = {{b}}</div></template><script>import { ref } from '...

2022-01-13 17:30:32 2509

原创 vue3与vue2的详细区别

vue3与vue2区别

2022-01-10 11:55:34 5299

原创 Vite与webpack优势

Vite：快缓存：依赖库缓存http缓存：源码协商缓存、模块强缓存esbuild： go语言速度比webpack快10-100倍按需编译源码webpack 原生js编写的，性能不如go语言。

2022-01-06 11:26:36 724

原创详解Vue.use使用与原理

Vue.use

2021-12-22 16:38:24 1533

原创 es6-promise源码重点分析难点解析

es6-promise源码重点分析难点解析

2021-12-20 17:10:55 459

原创 MutationObserver详解

MutationObserver用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。Mutation Observer 有以下特点：它等待所有脚本任务完成后，才会运行（即异步触发方式）。它把 DOM 变动

2021-12-17 10:29:23 38902 1

原创判断是否是数组的方法

var _isArray = void 0; if (Array.isArray) { _isArray = Array.isArray; } else { _isArray = function (x) { return Object.prototype.toString.call(x) === '[object Array]'; }; }

2021-12-15 14:45:11 569

原创详解void 0与undefined区别

在学习js库或者框架的时候，发现很多地方用到了void 0，就细心研究了一下。void 运算符对给定的表达式进行求值，然后返回 undefined。void 运算符通常只用于获取 undefined的原始值，一般使用void(0)（等同于void 0）。在上述情况中，也可以使用全局变量undefined 来代替。—摘自 MDN换句话说 void 0和undefined是等价的。如下：volid 后面的不能跟未声明的变量，否则会报错。void+xxx都是undefined，那么为什么一些工具

2021-12-15 14:41:11 1008

原创 Promise详解

Promise是一种异步编程的解决方案，可以将异步操作以同步的流程表现出来，避免了回调函数的层层嵌套，解决了传统的回调地狱问题。他可以说是一个容器，一个包含未来结果的容器。Promise有三个状态：pending(初始化)、fulfilled（成功）、rejected（失败）。状态由异步操作结果决定。一旦状态改变，就不会再变。Promise对象只要两种可能：pending->fulfilled, pending->rejected;并且不可逆。const promise = new Pro

2021-12-15 13:47:35 1067

翻译 Promises/A+规范中文翻译

翻译： https://promisesaplus.com/Javascript Promise是一个全面、通用的开放标准，由开发者指定，为开发者参考。Promise代表异步操作的最终结果。与promise对象交互的主要方式是通过.then()方法，then()方法注册了回调函数，用于接收最终结果或者拒绝的原因。这个规范详细说明了.then方法的执行流程，为所有遵循Promises/A+标准的开发者提供共用的基础。严格来说，本规范相当稳定了。尽管Promises/A+组织为了处理一些新发现的边角问题，

2021-12-15 13:45:00 313

原创原型与原型链

原型原型链 js

2021-12-09 16:56:32 282

原创 this全面理解

this 理解

2021-12-08 15:41:20 248

原创 new调用函数，new具体做了什么？

new具体做了什么

2021-12-08 13:57:15 284

原创在浏览器里，从输入 URL 到页面展示，这中间发生了什么？-学习笔记

参考来源：极客时间-李兵专栏从图中可以看出，整个过程需要各个进程之间的配合，浏览器进程、渲染进程和网络进程的职责如下：浏览器进程主要负责用户交互、子进程管理和文件储存等功能。网络进程是面向渲染进程和浏览器进程等提供网络下载功能。渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。这个过程可以大致描述为如下。首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。然后，在网络进程中发起真正的

2021-09-27 17:13:03 433

原创 TCP/IP协议

HTTP和WebSocket都是基于TCP/IP，在网络中，一个文件通常会被拆分为很多数据包来进行传输，而数据包在传输过程中又有很大概率丢失或者出错。互联网中的数据是通过数据包来传输的。如果发送的数据很大，那么该数据就会被拆分为很多小数据包来传输。比如你现在听的音频数据，是拆分成一个个小的数据包来传输的，并不是一个大的文件一次传输过来的。数据包如何送达主机： IP如果要想把一个数据包从主机 A 发送给主机 B，那么在传输之前，数据包上会被附加上主机 B 的 IP 地址信息，这样在传输过程中才能正确寻址。

2021-09-23 18:01:48 167

空空如也

空空如也