- 博客(54)
- 收藏
- 关注
RSS订阅原创 缩窄route范围来提速本地打包的尝试
按预期，笔者使用了同步语句做文件覆盖，webpack的watch不可能会监听到多余的文件变更行为。更具fileChange的判断逻辑，只要x与y的差值小于1000，webpack就能监听到先前的文件变更，触发额外的重新构建。好吧，只能调试webpack的watcher逻辑，看下内部到底干了什么，竟能监听到生命周期之前的文件变更行为。会参与计算，这个buffer变量也就导致了webpack能监听到生命周期之前的文件变更行为。我们假设plugin生效的时间点为x，webpack监听到文件改动的事件点为y。
2024-06-14 16:58:44
567
原创 多单页应用的构建优化-按entry拆分构建
当应用中存在多个单页也就是多个main文件时，排除其中不想打包的main文件，或者指定想打包的main文件，即可实现开发时按enrty拆分构建。运行时构建，可以通过获取变更文件，匹配引用到变更文件的main入口来实现。引用分析，可以通过babel的ast能力去识别import语句去做递归处理，构建引用树，作为变更文件溯源main的依据。多单页应用的仓库体积相对较大，而往往开发分支涉及的改动仅会影响其中的少数页面，因此无论是开发时还是生产时，都有必要去做选择性的前端代码构建。
2024-06-02 15:38:52
466
原创 如何全局引入js生成的scss代码
配置option.additionalData，additionalData字符串会转为scss代码，默认插入scss文件顶部。常见场景，某个scss变量需要用js动态生成且在全局scss文件都要用到，此时就可以用该方法实现。
2022-07-01 14:56:50
660
1
原创 递归删除子目录中所有dist和node_modules
const fs = require("fs")const path = require("path")const delDirs = ["node_modules", "dist"]var shell = require("shelljs")/** 递归删除当前目录下所有 dist / node_modules */function del(filePath, root = "") { fs.stat(filePath, function (err, stat) { if (err
2022-03-25 14:41:47
445
原创 yarn unlink 简单使用
// project 名为 projectA// package 名为 packageB// 1. 在packageB 目录下// 控制台提示 success registered "packageB".yarn link // 2. 在projectA 目录下// 此时已成功使用本地软链yarn link "packageB"// 3. 在projectA 目录下// 控制台提示 success Removed linked package "packageB".yarn unl
2022-02-07 14:28:11
1346
原创 文件去重脚本
// 使用说明// 首先在官网下载node http://nodejs.cn/download/ 就可以在命令行使用node命令了// 然后把这个文件放在在你需要去重文件的目录下 打开命令行到文件所在目录 输入 node fileDeDuplication 即可const fs = require("fs")const crypto = require("crypto")const readline = require("readline")const path = require("path"
2021-12-29 20:24:30
449
原创 diff简述
while(新前 <= 新后 && 旧前 <=旧后) { 四种匹配,不命中就遍历 和新前匹配的放到旧前之前,把旧node对应位置的项置为undefined 和新后匹配的放到旧后之后,把旧node对应位置的项置为undefined}addFrom(新前, 新后)removeFrom(旧前, 旧后)...
2021-12-29 17:50:17
154
原创 取消请求方法
rxjs实践解决请求竞态问题解决请求竞态问题// 然而rxjs只能解决请求竞态的问题，如果在请求期间修改了listdata数据源(如下所示读取了缓存)，那么页面结果展示依然是错误的// 最好的方法是对页面操作施加锁，一旦在请求，不能切tabgetList$ = new Subject();@Watch('filters', { deep: true, immediate: true })async resetFilters(filter: any) { const { startDate
2021-12-06 14:10:10
935
原创 敏捷学习-敏捷笔记
敏捷笔记一、传统项目管理特点1.所有的工作按照计划2.周期长，严格按需求，设计，开发，测试等流程3.变更管理严格，避免变更二、什么是敏捷1.投资回报率，回收期2.满足当前客户的需要3.满足未来客户的需要4.产品适应性，前提是保证人员构成合理5.支持盈利，看重价值三、敏捷宣言1.个体和互动高于流程和工具2.工作的软件高于详尽的文档3.客户合作高于合同谈判4.响应变化高于一、传统项目管理特点1.所有的工作按照计划2.周期长，严格按需求，设计，开发，测试等流程3.变更管理严格，避免变更二、什么是敏捷1
2021-11-07 18:36:09
218
原创 如何在单页应用中，不改变路由实现层级下钻功能
目录背景方案问题背景这几天项目遇到一个需求，需要在路由固定的前提下实现层级下钻功能。举个简单的例子，层级A的页面为root/test?title=testA，通过该页面可以跳转到A层级的子层级B页面root/test?title=testB，页面需要根据这个title分别查询各自的数据。问题在于，此时复用的是同一个router，因此并不会触发生命周期钩子，那么对于刷新的行为，该放在哪里实现呢？方案简单粗暴的方法，监听$route.query。同时当下钻行为时，改变query。除此之外，为了及时更
2021-10-08 21:55:36
261
原创 react学习手册
0.warning不要修改props不要直接修改this.state(而是应该使用 setState())state的更新是异步的，所以state的状态更新时不要同时相互依赖,但是可以通过传入函数延迟更新，这样就解决了this.setState((state, props) => ({ counter: state.counter + props.increment}));1.生命周期componentDidMount()应该相当于mountedcomponentWill
2020-11-04 18:20:15
568
原创 css学习2
1.不常见伪类选择器:default指向单选多选框中checked的元素（相当于默认选中）:empty指标签内无任何字符串的元素:placeholer-showninput提示内容出现时的元素，可以用于修改label选中时的位置（所以为什么不用focus呢？）:default指向单选多选框中checked的元素（相当于默认选中）...
2020-09-29 19:34:01
119
原创 快捷键骚操作
1.选中光标左侧或者右侧的整词匹配ctrl + shift 按住 按左右2.光标选中多行ctrl + alt 按住 按上下或者使用鼠标左键可以让光标选中多行选中多行后可以使用操作1来选中多个长度不一的单词
2020-09-20 15:02:16
218
原创 爱彼迎js规范学习（仅针对个人进行记录）
1.简写对象方法const atom = { addValue(value) { return atom.value + value; },};2.简写对象属性const lukeSkywalker = 'Luke Skywalker';const obj = { lukeSkywalker,};3.能不用var尽量不用var4.不要直接调用Object.prototype方法(因为怕被自身带有的函数所覆盖)// 更好const has = Object.prot
2020-09-13 16:46:13
611
原创 vue笔记（2）
1.router的钩子beforeEach，前置钩子，在进入页面之前使用，可以对页面进行导向afterEach，后置钩子，不能改变页面导向，用处不是很大
2020-09-07 17:29:01
134
原创 typeScript笔记
1.typeScript定义TypeScript是一种编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。2.ts的优势使用静态类型，对于不标准的数据类型参数直接给出错误提示，方便debug。关于引入基于类的面向对象编程方面，则是引入了接口概念，方便类型检查。...
2020-09-02 09:28:36
473
原创 前端学习笔记7
1.如何监控页面的奔溃用webService进行心跳检测，load开始，unload结束，每次postMessage记录时间，时间差超过指定时间间隔的2-3倍认为卡顿奔溃。// 页面 JavaScript 代码if (navigator.serviceWorker.controller !== null) { let HEARTBEAT_INTERVAL = 5 * 1000; // 每五秒发一次心跳 let sessionId = uuid(); let heartbeat = func
2020-08-24 14:26:04
172
原创 操作系统笔记
1.页面调度算法1、先进先出调度算法（FIFO，First In First Out）2、最近最不常用调度算法(LFU, Least Frequently Used)也就是淘汰一定时期内被访问次数最少的页面，LFU关键是看一定时间段内页面被使用的频率。3、最近最少使用页面调度算法（LRU，Least Recently Used）也就是首先淘汰最长时间未被使用的页面，LRU关键是看页面最后一次被使用到发生调度的时间长短。4、最佳置换算法每次淘汰时，找一个未来最长时间才会被访问的页面进行淘汰。优
2020-07-28 16:09:15
242
原创 leetcode 39.组合总和与40.组合总和Ⅱ
39. 组合总和给定一个无重复元素的数组 candidates 和一个目标数 target ，找出 candidates 中所有可以使数字和为 target 的组合。candidates 中的数字可以无限制重复被选取。说明：所有数字（包括 target）都是正整数。解集不能包含重复的组合。示例 1：输入：candidates = [2,3,6,7], target = 7,所求解集为：[ [7], [2,2,3]]tmpPath为当前数组，target为余下目标数量，sta
2020-07-28 14:15:08
168
1
原创 leetcode 10.正则表达式匹配
给你一个字符串 s 和一个字符规律 p，请你来实现一个支持 ‘.’ 和 ‘*’ 的正则表达式匹配。'.' 匹配任意单个字符'*' 匹配零个或多个前面的那一个元素所谓匹配，是要涵盖 整个 字符串 s的，而不是部分字符串。说明:s 可能为空，且只包含从 a-z 的小写字母。p 可能为空，且只包含从 a-z 的小写字母，以及字符 . 和 *。示例 1:输入:s = "aa"p = "a"输出: false解释: "a" 无法匹配 "aa" 整个字符串。答案：本题可以使用动态规划
2020-07-25 11:59:16
107
原创 nodejs 学习笔记
1.package.json2.npm常用功能1.install1.npm install == npm inpm会根据package.json配置文件中的依赖配置下载安装至node_modules文件夹2.-global == -g全局安装，安装后的包位于系统预设目录下不会在项目node_modules目录中保存模块包不会将模块依赖写入devDependencies或dependencies 节点运行 npm install 初始化项目时不会下载模块3.--save == -S安
2020-07-23 14:55:51
270
原创 leetcode 46.全排列
给定一个 没有重复 数字的序列，返回其所有可能的全排列。解：递归。每次从数组删除一个值，直到数组大小为0。重复的记录在map中跳过。var subsets = function(nums) { var ans = [[]]; var len = nums.length; var m = new Map(); fun(nums); function fun(arr){ //arr = arr.concat(); if(m.has(
2020-07-20 12:20:30
100
原创 计算机网络笔记
1.http与https的区别是超文本传输协议，请求-响应协议，基于tcp/ip通信协议传输数据。HTTPS协议 = HTTP协议 + SSL/TLS协议，在HTTPS数据传输的过程中，需要用SSL/TLS对数据进行加密和解密，需要用HTTP对加密后的数据进行传输，由此可以看出HTTPS是由HTTP和SSL/TLS一起合作完成的。HTTPS为了兼顾安全与效率，对数据进行对称加密，对称加密所要...
2020-04-28 14:44:40
644
1
原创 二分查找的边界问题
二分查找在有序数组中是一个非常低成本的查找方法，但是不对二分查找十分的熟悉很难对不同的需求快速写出不同的边界判断和边界返回。1.二分查找中的下中位数median = (length - 1) / 22.模板分析由于需求前变万化，我个人推荐固定(l<r)的判别。而对于l指针和r指针的理解：对于搜索过程中, high 位置的作用是减少搜索空间而 low 的作用是从0开始一直向着目标数...
2020-04-14 11:08:27
398
原创 异步操作相关(ajax、jqueryAjax、axios、promise、async...)
1.原生ajax<script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xmlHttp = new XMLHttpRequest(); //2.绑定...
2020-04-13 16:42:37
156
原创 死锁和银行家算法
死锁概念、产生原因死锁是指多个进程循环等待彼此占有的资源而僵持的局面。原因：可用资源太少。程序推进顺序不合理。死锁产生的必要条件需要同时具有以下四个条件：互斥条件：资源无法同时共享不可抢占条件：资源无法被使用进程以外对象释放占有且等待条件：进程等待时不释放资源循环等待条件：资源等待条件形成循环银行家算法概念当一个进程申请使用资源的时候，银行家算法通过先试探分配给该进...
2020-04-11 19:49:15
216
原创 设计模式
设计模式单一职责原则（SRP）一个对象或方法只做一件事情。减小粒度。最少知识原则（LKP）一个软件实体应当 尽可能少地与其他实体发生相互作用开放-封闭原则（OCP）软件实体（类、模块、函数）等应该是可以 扩展的，但是不可修改1.单例模式一个类只有一个实例,可以被全局访问，而且无法被重写。function Son(name){ this.name=name;}Son.prot...
2020-04-10 10:27:31
120
原创 leetcode 554. 砖墙(javascript)
你的面前有一堵方形的、由多行砖块组成的砖墙。 这些砖块高度相同但是宽度不同。你现在要画一条自顶向下的、穿过最少砖块的垂线。砖墙由行的列表表示。 每一行都是一个代表从左至右每块砖的宽度的整数列表。如果你画的线只是从砖块的边缘经过，就不算穿过这块砖。你需要找出怎样画才能使这条线穿过的砖块数量最少，并且返回穿过的砖块数量。你不能沿着墙的两个垂直边缘之一画线，这样显然是没有穿过一块砖的。初看此题...
2020-04-09 10:19:26
217
原创 前端学习笔记6
1.面向对象之三个基本特征封装：封装无非就是其属性和方法封装。继承：构造函数继承或者原型继承多态：子类方法覆盖父类，或根据参数的数量或者类型实现方法多态...
2020-04-08 17:51:04
209
原创 leetcode 95.不同的二叉搜索树 II(javascript)
给定一个整数 n，生成所有由 1 … n 为节点所组成的二叉搜索树。这道题是不同的二叉搜索树 I的进阶版本，I可以同过卡塔兰数直接抽象出答案，但是本题必须将构建的树具体保存。var generateTrees = function(n) { if(n==0) return [];//考虑为0的情况，防止返回[[]] let arr=[]; for(let i=1;...
2020-03-31 18:59:26
204
原创 leetcode 1298. 你能从盒子里获得的最大糖果数(javascript)
给你 n 个盒子，每个盒子的格式为 [status, candies, keys, containedBoxes] ，其中：状态字 status[i]：整数，如果 box[i] 是开的，那么是 1 ，否则是 0 。 糖果数 candies[i]: 整数，表示box[i] 中糖果的数目。钥匙 keys[i]：数组，表示你打开 box[i] 后，可以得到一些盒子的钥匙，每个元素分别为该钥匙对应...
2020-03-27 11:06:54
400
原创 前端学习笔记 5
1.WebSocket的实现和应用WebSocket是HTML5中的协议，支持持久连接。WebSocket是基于Http协议的，或者说借用了Http协议来完成一部分握手，在握手阶段与Http是相同的。核心属性：Upgrade:webSocketConnection:UpgradewebSocket只要建立一次连接，就可以连续不断的得到服务器推送的消息，节省带宽和服务器端的压力。...
2020-03-24 17:11:05
223
原创 git笔记
1.git init初始化当前文件夹为仓库，多了个.git文件夹2.git add将当前修改行为的文件提交至暂存3.git commit将暂存（全部）提交至仓库4.git status查询当前没有commit的修改行为5.git diff查询某个文件具体的修改行为（工作区与版本库比对）6.git log查询历史commit记录，加"--pretty=oneline"表示只显示...
2020-03-21 13:10:48
131
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人