aeipyuan-优快云博客

原创 vite基本实现

vite基本实现1. 设置入口并链接全局编写入口文件// /bin/www.js#! /usr/bin/env nodeconsole.log('入口调用成功！！！')配置package.json{ "name": "yuan-vite", "version": "1.0.0", "description": "", "main": "index.js", "bin": { "yuan-vite": "./bin/www.js" }, "key

2020-12-18 21:58:39 1140 1

原创 docker学习笔记

安装yum install -y epel-releaseyun install -y docker-io第二步失败使用yum install https://get.docker.com/rpm/1.7.1/centos-6/RPMS/x86_64/docker-engine-1.7.1-1.el6.x86_64.rpm查看配置cat /etc/sysconfig/docker启动service docker start验证docker version镜像指令

2020-11-23 11:21:17 249 1

原创 linux学习笔记

ls 相关指令-l列出文件-a列出隐藏文件-al列出所有-h以kb单位显示-i显示id*.txt所有txt?.txt一个字符开头的txt[abcd].txt表示abcd中的一个[a-z].txt表示a-z中的一个rmrm -d test或者rm -r test删除文件夹(-d只能移除空文件夹)rm a.js删除a.jsmv/cpmv bb test/aa 将bb文件夹移动到test/aa下mv 1.js 2.js 将1..

2020-11-23 11:19:08 284

原创 npm包发布流程

1. 初始化运行npm init生成配置文件{ "name": "aeip_add",/* 包名字 */ "version": "1.0.0",/* 版本 */ "description": "a add function",/* 描述 */ "main": "index.js",/* 入口文件 */ "scripts": {/* 脚本命令 */ "test": "echo \"Error: no test specified\" && exit 1" }

2020-10-25 11:18:35 274

原创 webpack优化

1. 抽离公共文件a,b都引用jquery和c.js打包结果mode: 'development',entry: { a: './src/demo2/a.js', b: './src/demo2/b.js'},output: { path: path.resolve(__dirname, 'dist', 'demo2'), filename: '[name].js',},// Asset Size Chunks Chunk Names//

2020-08-18 20:23:36 127

原创 webpack简单实现

webpack简单实现1. 注册命令行指令(可以直接通过mypack指令打包)项目根目录创建mypack文件夹npm initnpm初始化，并修改bin为主文件路径{ "name": "mypack", "version": "1.0.0", "description": "", "main": "index.js", "bin": { "mypack": "bin/mypack.js" }, "scripts": { "test": "ec

2020-08-15 23:09:49 228

原创使用directives设置自定义图片懒加载指令

1. 使用方式<section v-for="(item,index) in imgSrc" :key="index"> <img class="img" v-lazyImg="item"></section>2. 注册指令directives: { lazyImg},3. 实现方式img标签inserted事件发生后，对组件进行监听，并将占位图src赋值，记录真实src到data_src上let lazyImg = { inserted(e

2020-08-09 21:07:53 173

原创优化js定时器准确性

思路：使用时间戳，计算延迟时间，用延迟时间抵消一部分定时器的时长不做优化let cnt = 0;let start = Date.now();// 耗时任务setInterval(() => { let num = 100000000; while (num--) { }});setInterval(() => { cnt++; console.log("延迟：" + (Date.now() - (start + cnt * 1000)));}, 1000);

2020-08-03 21:39:48 972

原创几种js设计模式

1. 工厂模式作用：实现对象的批量创建/* 构造函数 */function Person(name) { this.name = name;}function Car(model) { this.model = model;}/* 创建 */function create(type, val) { return (this instanceof create) ? this[type](val) : new create(type, val);}create.pro.

2020-08-01 09:21:10 430

原创滑动窗口的最大值 -- 单调队列

滑动窗口最大值给定一个数组和滑动窗口的大小，找出所有滑动窗口里数值的最大值。例如，如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3，那么一共存在6个滑动窗口，他们的最大值分别为{4,4,6,6,6,5}；针对数组{2,3,4,2,6,2,5,1}的滑动窗口有以下6个： {[2,3,4],2,6,2,5,1}， {2,[3,4,2],6,2,5,1}， {2,3,[4,2,6],2,5,1}， {2,3,4,[2,6,2],5,1}， {2,3,4,2,[6,2,5],1}， {2,3,

2020-07-12 17:01:10 237

原创 JS链表实现栈和队列

1. 栈top指针记录栈顶元素，插入和删除都是对top操作function Node(val) { this.val = val; this.next = null;}function Stack() { this.top = null; this.length = 0;}/* 入栈 */Stack.prototype.push = function (node) { if (!this.top) { this.top = node;

2020-07-06 19:10:23 428

原创 js数组扁平化的几种实现方式

1. 递归调用let res = [];function flattern(arr) { arr.map(item => { if (Array.isArray(item)) res.concat(flattern(item)); else res.push(item); })}2. reduce结合递归function flattern(arr) { return arr.reduce

2020-07-06 08:54:16 335 1

原创 Vue传值方式

1. provide和inject实现祖先逐渐与后代组件传值/* 祖先组件 */export default { //... methods: { test(val) { console.log("test: ", val); } }, provide() { return { test: this.test } }}/* 后代组件 */export default { //... inject: ['test'], create

2020-07-05 20:50:29 141

原创浏览器的进程和线程

1. 浏览器进程概念：进程是操作系统分配资源的最小单位，每个进程之间有独立的地址空间浏览器中存在以下进程：浏览器进程：负责页面显示、用户交互、子进程管理等功能渲染进程：将HTML、CSS、JS转化为可交互网页，默认每个Tab标签都有一个渲染进程GPU进程，为了实现页面绘制和动画效果而开发的进程网络进程，负责页面网络资源加载插件进程，每个插件对应一个进程，防止崩溃影响浏览器使用2. 浏览器线程概念：线程是程序执行的最小单位，一个进程下的所有线程共享该进程的地址空间GUI渲染.

2020-07-05 16:23:05 463

原创基于Vue的Upload组件实现

Upload组件基本实现仓库：https://gitee.com/aeipyuan/upload_component前端1. 组件结构<template> <div class="uploadWrap">  <div class="upload"> <input type="file" class="fileUp" @change="uploadChange" multiple :accept="accep

2020-07-04 12:28:55 8150

原创 HTML 5 ShareWorker

ShareWorker和Worker区别worker：专属线程，只针对当前运行环境（HTML 5 Web Workers）sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。方法start：开启连接connect：连接postMessage：发送数据onmessage：接收数据页面通信举例页面<body> <input type="text" id="input"> <button id="submit

2020-06-23 23:12:39 360

原创 webpack打包速度优化

配置resolve.moduleswebpack默认顺序是在当前模块的node_modules目录下，没找到再去上级目录寻找，一般一个项目只有一个根目录下的node_modules,配置指明存放第三方模块的绝对路径可以减少寻址module.exports = { resolve: { modules: [ path.resolve(__dirname, 'node_modules') ] }}配置loaders的include

2020-06-23 19:57:10 840

原创 Keep-Alive组件的使用

使用场景组件切换时缓存之前加载的状态不会被销毁，避免反复渲染同时减少网络请求使用方式使用keep-alive中的属性include或exclude,根据组件name判断<keep-alive include="test1"> <router-view></router-view></keep-alive>在路由中配置属性标识是否缓存{ path: '/te

2020-06-23 10:59:32 353

原创 459. 重复的子字符串 next数组

459. 重复的子字符串给定一个非空的字符串，判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母，并且长度不超过10000。输入: "abab"输出: True解释: 可由子字符串 "ab" 重复两次构成。题解next数组每一个值代表除当前点的最长公共前后缀长度-1的值，若符合条件，最后一个next值就是倒数第二个重复子串的尾巴的索引，例如abcdabcdabcdabcd最后一个next值等于11，也就是倒数第二个d的索引，通过这个索引求出重复子串长度15-11=4，再比

2020-06-22 23:24:46 291

原创 6.21笔试小结

1. 进程与线程进程是资源分配的基本单位进程又拥有自己独立的资源，系统每创建一个进程就会为其分配一部分地址空间，由此进程与进程之间不会互相干扰线程是程序执行的基本单位线程与CPU资源分配无关，多个线程共享同一进程的资源，使用相同的地址空间两者区别（1）调度：进程是拥有资源的基本单位，线程是调度和分配的基本单位（2）并发：进程和线程都可以并发执行（3）资源：进程拥有系统资源，线程不拥有系统资源，但可以访问其所在的进程的所有资源（4）开销：创建或回收进程时，系统都需要分配和回收资源

2020-06-22 15:52:59 161

原创 canva学习笔记

创建canvas标签<canvas id="canvas" width="600" height="400">浏览器不兼容提示文本</canvas>js实例let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');矩形绘制let ctx = canvas.getContext('2d');/* 绘制填充矩形 */ctx.fillStyle = "rg

2020-06-21 09:59:14 367

原创前端性能优化小结

一. 浏览器渲染优化1. 构建DOM树过程：将字节转换为字符集 -> 根据w3c规定的token令牌进行词法解析生成结点 -> 根据嵌套规则生成DOM树形结构2. 构建CSSOM过程：与HTML类似3. 渲染树4. 总步骤处理HTML标记，生成DOM树处理CSS标记，生成CSSOM树将DOM树和CSSOM树融合成渲染树根据生成的渲染树计算确切位置和大小，又叫回流（重排）根据渲染树以及回流结果，得到绝对像素，进行绘制5. 优化方案语义化标签，如果不是w3c

2020-06-20 12:34:13 164

原创 axios和fetch的封装

axiosimport axios from 'axios';import qs from 'qs';/* 全局默认 */switch (process.env.NODE_ENV) { case 'production': axios.defaults.baseURL = "api.abcdef.com"; break; case 'test': axios.defaults.baseURL = "192.168.20.21";

2020-06-17 20:53:22 275

原创最短路径（javascript实现）

743. 网络延迟时间有 N 个网络节点，标记为 1 到 N。给定一个列表 times，表示信号经过有向边的传递时间。 times[i] = (u, v, w)，其中 u 是源节点，v 是目标节点， w 是一个信号从源节点传递到目标节点的时间。现在，我们从某个节点 K 发出一个信号。需要多久才能使所有节点都收到信号？如果不能使所有节点收到信号，返回 -1。输入：times = [[2,1,1],[2,3,1],[3,4,1]], N = 4, K = 2输出：2深度优先搜索以K为起点，深度

2020-06-14 09:53:10 1022

原创字典树（js实现）

function TreeNode(val) { this.key = val; this.cnt = 1;//字符串占用个数 this.isEnd = false; this.value = null; this.children = new Map();}function Tree() { this.root = new TreeNode(null);}/* 方法 */Tree.prototype = { /* 插入操作 */ i

2020-06-04 18:53:58 607

原创复杂链表的复制leetcode

复杂链表的复制请实现 copyRandomList 函数，复制一个复杂链表。在复杂链表中，每个节点除了有一个 next 指针指向下一个节点，还有一个 random 指针指向链表中的任意节点或者 null。示例1：输入：head = [[7,null],[13,0],[11,4],[10,2],[1,0]]输出：[[7,null],[13,0],[11,4],[10,2],[1,0]]步骤：将新节点A',B',C'...插入到原链表A,B,C...中找到各节点random值，根据相对

2020-06-02 20:06:44 152

原创十大排序算法总结（Javascript实现）

十大排序算法复杂度：不稳定的排序：“快选希堆”1. 直接插入排序枚举一个元素分别与前面的元素比较，直到遇到比自己更小的function insertSort(arr) { for (let i = 1; i < arr.length; i++) { if (arr[i] < arr[i - 1]) { let tmp = arr[i]; for (let j = i; j >= 0; j--) {

2020-05-30 23:56:09 246

原创 HTTP缓存学习

1. 缓存控制Catch-Controlmax-age：缓存有效期public：允许其他用户读取缓存（公共缓冲服务器）private：只允许特定用户读取缓存（公共缓冲服务器）no-catch：不走强缓存，每次都请求服务器验证缓存是否可用（协商）no-store：不走缓存，每次直接请求数据2. 缓存过期判断机制根据Catch-Control的s-maxage或max-age判断，以s-maxage为例，若当前时间>缓存生成时间+s-maxage则表示已经过期（s-maxage与ma.

2020-05-29 23:18:39 319

原创 Fiber学习

生成virtual DOM树bable转换jsx的结果let style = { border: "1px solid orange", margin: "5px" }let element = ( <div id="A1" style={style}> A1 <div id="B1" style={style}> B1 <div id="C1" style={style}>C1</div> <div id="C

2020-05-29 15:59:41 194

原创 TCP与UDP学习小结

TCP六个标志位：SYN – 同步（建立联机）ACK – 确认PSH – 传送FIN – 结束RST – 重置URG – 紧急TCP通讯过程1. 三次握手建立连接客户端发一个SYN握手包给服务端服务端发一个ACK确认包和SYN握手包给客户端客户端发一个ACK确认包给服务端此时，客户端和服务端都得到了对方确认，开启传输通道，抛出线程处理连接2. 数据传输数据发送端传输PSH包数据接受端回复ACK包3. 四次挥手断开连接为什么要有四次挥手？计算机资源有限，不

2020-05-28 13:23:22 254 2

原创获取url参数牛客

题目描述获取 url 中的参数指定参数名称，返回该参数的值或者空字符串不指定参数名称，返回全部的参数对象或者 {}如果存在多个同名参数，则返回数组示例输入http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe key输出[1, 2, 3]解法:使用split方法分割字符串得到参数序列数组[ 'key=1', 'key=2', 'key=3', 'test=4' ]设置一个对象以键值对的方式存数

2020-05-26 23:15:47 515

原创 https安全传输建立过程学习

简单过程以chrome和bilibili网站通信为例：前提：bilibili向CA机构申请证书首先是bilibili将自己的信息和公钥放置到证书，然后向CA提交申请，CA核实确实bilibili身份后用自己的私钥对证书进行签名使用chrome向bilibili发起请求浏览器向服务器发起请求服务器响应请求，将CA证书发给浏览器浏览器获取内置的CA公钥对证书上的签名进行验证，证明服务器的身份（即验证公钥是不是bilibili的），验证成功后获取证书上的公钥浏览器生成一段随机数，并使用服务器

2020-05-26 16:44:10 304

原创 toUpperCase和toLowerCase的实现

实现过程(以小写转大写为例)：将字符串拆开为一个一个字符使用charCodeAt获取每个字符的ASCII码使用String.fromCharCode将ASCII码-32的结果转化为字符合并转换后的数组function toUpperCase(str) { let arr = str.split(''); for (let i = 0; i < arr.length; i++) { if (arr[i] >= 'a' && arr[i]

2020-05-22 08:28:30 314

原创 new 和 Object.create()区别

new 和 Object.create()区别new操作符创建一个对象的过程创建一个对象obj将obj连接到原型链上，即设置obj.__proto__ = Constructor.prototype绑定this指向，传参执行原型函数(参数应用到obj对象上)判断执行结果，没有则返回obj/* 手写方法 */function myNew() { /* 创建新对象 */ let obj = new Object(); /* 构造函数,取第一个传入的参数，argument

2020-05-16 19:35:53 253

原创 react-router理解

react-router理解1. Provider和ConsumerProvider和Comsumer是React提供的两个原生组件，Provider的value属性传递数据，Provider包裹内的所有Consumer都可以直接获取到Provider的数据获取方法let { Provider, Consumer } = React.createContext();使用方法<Provider value={{ name: "aeipyuan" }}> <div&gt

2020-05-13 10:16:24 765 1

原创实现一个简易版的react

实现一个简易版的reactReact.createElement作用：将babel解析的结果转换成树形结构class Element { constructor(type, props) { this.type = type; this.props = props; }}function createElement(type, props, ...children) { props = props || {}; props.chil

2020-05-12 13:46:56 197

原创浅学virtualDom和diff算法

浅学virtualDom和diff算法virtual Dom创建virtual Dom/* 实现 */class Element { constructor(type, props, children) { this.type = type; this.props = props; this.children = children; }}function createElement(type, props, children) {

2020-05-12 10:18:49 232

原创 148. 排序链表归并排序 | 快速排序

148. 排序链表在 O(n log n) 时间复杂度和常数级空间复杂度下，对链表进行排序。输入: 4->2->1->3输出: 1->2->3->4来源：https://leetcode-cn.com/problems/sort-list/归并排序法：利用快慢指针将链表分为前后半段先对slow.next找到后半段并进行排序断开链表前后半段，对前半段进行排序合并排序完成后的左右两条链表function mergeTwoLists(x, y) {

2020-05-11 12:13:26 207

原创树状数组

树状数组定义树状数组(Binary Indexed Tree(B.I.T), Fenwick Tree)是一个查询和修改复杂度都为log(n)的数据结构。主要用于查询任意两位之间的所有元素之和，但是每次只能修改一个元素的值；经过简单修改可以在log(n)的复杂度下进行范围修改，但是这时只能查询其中一个元素的值(如果加入多个辅助数组则可以实现区间修改与区间查询)。作用：实现求数组前缀和实现批量更新区间和快速查询(实质是两个端点前缀和相减得到)下图为树状数组实现原理，红色箭头代表更新操作的

2020-05-09 19:26:25 135

原创 34.在排序数组中查找元素的第一个和最后一个位置--二分查找

34. 在排序数组中查找元素的第一个和最后一个位置给定一个按照升序排列的整数数组 nums，和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。你的算法时间复杂度必须是 O(log n) 级别。如果数组中不存在目标值，返回 [-1, -1]。示例 1:输入: nums = [5,7,7,8,8,10], target = 8输出: [3,4]示例 2:输入: nums = [5,7,7,8,8,10], target = 6输出: [-1,-1]来源：https:/

2020-05-09 09:18:31 154

apache.zip

kuayuTest.zip

空空如也