- 博客(111)
- 收藏
- 关注
RSS订阅原创 浅谈lazyload、prefetch、preload
1.lazyload（懒加载）懒加载，也可以说成是按需加载，常见的有图片懒加载，前端的路由懒加载。1）图片的懒加载，原理主要通过判断img标签有没有进入视口来确定是否给予其正确的src属性从而来加载资源，这样做的好处主要是减少http请求，节省网络资源，提高在视口内的图片的加载速度。2）前端路由的懒加载，原理主要是在前端的项目构建打包阶段，把不同路由对应的组件分割成不同的代码块，然后当路由访问的时候才加载对应的组件，这样其实做的好处是按需加载和解析代码，提高首屏渲染速度。因为大家想一想，如果所有JS代
2021-03-14 14:32:08
735
原创 通过Object.prototype.toString() 来对JS的类型判断
最常用的类型判断就是typeof 和 instanceof最近发现还有一种进行类型判断的方法，就是利用Object.prototype.toString()方法，注意不是对象本身身上的toString()方法。const isType = (obj) => Object.prototype.toString.call(obj).match(/(?<=\s)\w+(?=\])/g)[0].toLowerCase();有个注意点，typeof和instanceof会把包装类型的字符串、数字、
2021-03-13 20:56:05
218
原创 JS如何判断某个对象是不是原生的，而不是polyfill的
比如说Promise对象，如何判断它是原生的。直接打印：console.log(Promise.toString());控制台的结果就会是这样：看到没有，里面有个native code，这就代表这个Promise对象是原生的了。
2021-03-13 20:22:04
428
原创 数组去重的几种实现方式
// 数组去重1.利用indexOf返回最先碰到的下标的特性const arr = [2, 4, 5, 2, 4, 7, 9, 1, 9, 500];function getUniqueArray(arr) { const result = arr.filter((v, i) => { return arr.indexOf(v) === i; }); return result;}console.log(getUniqueArray(arr));// 数组去重2.构造一
2021-03-12 16:45:17
169
原创 JS函数柯里化例子（手写代码）
function add() { var _args = Array.from(arguments); // 将函数参数保存起来 function _adder() { _args.push(...arguments); return _adder; } // 实现函数的功能 _adder.toString = function () { return _args.reduce((ac, cu) => { return ac + cu;
2021-03-06 09:50:48
786
1
原创 Vue 3.0 响应式原理精简版
<script> const arr = [-1, -2, -3, -4]; const toProxy = new WeakMap(); //存放的是 代理后的对象 const toRaw = new WeakMap(); //存放的是 代理前的对象 const trigger = function () { console.log('触发视图更新！'); } const isObject = function (target..
2021-03-02 21:57:46
90
原创 javascript 实现 addEventListeneroptions中第三options参数的once 选项
HTMLElement.prototype.addMyEventListener = function (type, listener, options) { const newListener = function (event) { listener.call(this, event); if (options.once === true) { this.removeEventListener(type, newListener);...
2021-02-15 13:11:58
718
原创 javascript自己实现函数的call()，apply()，bind()方法
call()和apply()差不多，要利用好函数的谁调用它，它的this就指向谁的特点。Function.prototype.call()的实现//实现Function.prototype.myCall = function (obj, ...args) { const _this = this; const fnName = _this.name; obj[fnName] = _this; const result = obj[fnName](...args); delete o
2021-01-26 16:47:53
115
1
原创 typescript中.d.ts文件以及模块注意点
菜鸟教程：.d.ts文件是什么？stackoverflow: .d.ts文件是什么？它是怎么和js文件映射的？知乎：node包的.d.ts映射——@types:本篇主要记录.d.ts文件的作用还有它是怎么与js文件映射的。.d.ts文件该怎么写，这个ts的官网和很多博客都已经写得十分十分详细了，这里也就没有记录...
2021-01-21 11:21:02
3187
1
转载 为什么要用多态，多态的作用？
一个例子把不同的bai子类对象都当作父类来看，可以屏蔽不同子类对象之间的差异，写出通用的代码，做出通用的编程，以适应需求的不断变化。 赋值之后，父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作。也就是说，父亲的行为像儿子，而不是儿子的行为像父亲。 举个例子：从一个基类中派生，响应一个虚命令，产生不同的结果。 比如从某个基类继承出多个对象，其基类有一个虚方法Tdoit，然后其子类也有这个方法，但行为不同，然后这些子对象中的任何一个可以赋给其基类的对象，这样其基类的对象就可以执行不同的操作了。实际上
2021-01-12 11:10:19
836
1
原创 webpack中loader使用和的工作原理
loader的本质就是一个个的函数，在模块的编译阶段，会使用这些loader对源代码进行处理，处理时，一般都会生成AST解析树，这样可以方便处理。单个loader的使用没有什么好记录的。多个loader的使用是用一个use数组，loader的使用顺序是从下往上，也就是从use数组的后往前执行的，下面的load1、loader2、loader3是我自己定义的loader use: [ 'loader1', 'loader2', { loader: 'loader3'
2020-12-25 18:40:15
1188
1
原创 webpack的执行流程
1.初始化compiler：new Compiler(cnofig)， config就是webpack.config.js文件的内容2.开始编译：调用compiler的run方法开始编译3.确定入口：根据config的entry找到所有的入口文件4.编译模块：从入口文件触发，调用所有配置的loader对模块进行编译，并且还要收集模块依赖的模块，不断递归进行编译5.完成模块编译：在经过第4步使用Loader编译完所有模块后，得到每个模块编译的内容和它们的依赖关系6.输出资源：根据入口和模块之间的依
2020-12-25 15:31:59
852
原创 webpack单独生成chunk的方法
这里记录一下我所知道的可以生成chunk的方法1.多入口 // 多入口：有一个入口，最终输出就有一个bundle entry: { main: './src/js/index.js', test: './src/js/test.js' },
2020-12-25 15:13:01
1421
原创 nodejs中的相对路径与当前工作目录
相对路径的概念大家都知道，我现在有这样一个目录结构：我在build.js下有如下代码如果我直接cd到script目录下，执行build.js文件是会报错的这是因为当前工作目录为D:\es6Test\script，通过process.cwd()可以打印出当前工作目录那么readFileSync读取的绝对路径为D:\es6Test\script\src\index.js，这个文件是不存在的。但是我们如果不cd到script目录下，从而执行下面的命令：可以看到代码并没有报错，并且当前node
2020-12-25 12:55:01
2847
原创 webpack最终生成bundle原理（主要是js模块化的原理）
这是生成的依赖树{ './src/index.js': { code: '"use strict";\n' + '\n' + 'var _add = _interopRequireDefault(require("./add.js"));\n' + '\n' + 'var _count = _interopRequireDefault(require("./count.js"));\n' + '\n' + 'functio
2020-12-25 10:46:45
505
原创 理解webpack中proxy的pathRewrite
废话少说，直接上代码proxy: { // 一旦devServer(5000)服务器接收到 /api/xxx 的请求，就会把请求转发到另一个服务器(3000) // 浏览器和服务器之间有跨域，但是服务器和服务器之间没有跨域 '/api': { target: 'http://localhost:3000', // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api） pathRewrite: { '^/api': ''
2020-12-22 18:11:27
10026
原创 剑指offer19题（正则表达式匹配） javascript语言描述
const isMatch = (s, p) => { const n = s.length; const m = p.length; const dp = []; for (let i = 0; i <= n; i++) { dp[i] = []; for (let j = 0; j <= m; j++) { dp[i][j] = -1; } } return solve(0, 0, s, p, dp) === 1;};c
2020-12-22 15:45:39
82
原创 webpack生产环境将css文件单独分离的好处
webpack打包的过程中，有一个环节叫提取js中的css成单独文件。在这之前，是使用style-loader，这样引入js的时候，就会把样式插入到style当中。那么为什么要把css文件单独提取出来呢？我个人做了以下分析：将css文件单独提取出来，那么就可以先在页面的最前面引入这个单独的css文件，浏览器先解析了css文件就会生成cssom从而与dom tree生成渲染树从而以最快速度渲染出页面。如果放在js文件中，不仅会增加js文件体积，使js文件的下载时间延长，而且进行解析js文件往往都是在d
2020-12-09 17:48:30
958
原创 webpack 5.0 HtmlWebpackPlugin插件报错，The ‘compilation‘ argument must be an instance of Compilation
就是webpack5太新了，以前的html-web-pack-plugin支持不了了解决方法：先把先有的html-webpack-plugin卸载了npm uninstall html-webpack-plugin然后安装最最最最新的npm i --save-dev html-webpack-plugin@next
2020-12-08 19:19:10
376
3
原创 es6模块化的注意点以及与commonjs模块化的区别
Commonjs的模块是运行时加载，而且加载的是整个模块// CommonJS模块let { stat, exists, readfile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3
2020-12-07 18:24:58
586
1
原创 javascript严格模式的限制
1.变量必须声明后再使用2.函数的参数不能有同名属性，否则报错3.不能使用with语句4.不能对只读属性赋值，否则报错5.不能使用前缀 0 表示八进制数，否则报错6.不能删除不可删除的属性，否则报错7.不能删除变量delete prop，会报错，只能删除属性delete global[prop]8.eval不会在它的外层作用域引入变量9.eval和arguments不能被重新赋值10.arguments不会自动反映函数参数的变化11.不能使用arguments.callee12.不能使
2020-12-07 16:52:02
928
原创 Javascript set get方法注意点
1.get方法return的值就是当前属性与其绑定的值，我们可以通过直接改变与其绑定的值来改变当前的属性值。let value = 'arthur';const o = { get prop() { return value; }};value = 'hsing';console.log(o.prop);结果2.set方法内部只能通过改变绑定的值来改变当前属性值，下面这样写是不行的let value = 'arthur';const o = { get prop()
2020-12-06 16:28:49
384
原创 nodejs promisify
const fs = require('fs');const promisify = (asyncFn) => { return (...args) => { return new Promise((res, rej) => { args.push((err, data) => { if (err) { rej(err); } else { res(data); }
2020-12-05 19:01:21
704
原创 Promise源码分析记录
1.Promise最基本resolve,reject, then的功能是怎么实现的？promise有三个状态，PENDING、FULFILLED和REJECTED，Promise的构造函数会接受一个executor回调函数参数，这个回调函数参数会立即被调用，并传入另外两个参数，即resolve和reject函数，它们分别接收一个value和一个reason参数，这两个函数是定义在Promise的构造函数里面的，resolve函数的功能就是将当前Promise的状态由PENDING改为FULFILLED，然
2020-12-05 18:00:32
157
原创 javascript动态规划之缓存与递归优化
动态规划的适用性1.最优子结构2.无后效性3.子问题的重叠性例题：一只青蛙一次可以跳上1级台阶，也可以跳上2级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。这个问题的最直白的写法就是： const numWays = function (n) { if (n < 0) { return 0n; //BigInt表示法 } if (n === 0){ return 1n //BigInt表示法 } const
2020-12-05 12:47:50
217
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人