Steven--Lee-CSDN博客

原创在vue2中使用vue3的核心功能（渐进式升级vue版本）

学了真香的vue3语法，但目前的vue2项目中短期内不会再升级了，空有屠龙之术无法施展？来试试以下的解决方案，让你在vue2项目中也能用上vue3的核心语法

2022-02-10 14:59:42 2785 4

原创 Git后悔药大全吐血整理建议收藏

我先上思维导图，好了你也可以先点个赞????一、撤销文件修改撤销单个文件的修改git reset HEAD XXX.js撤销所有未提交的修改git reset --hard因为此时的代码还没有提交到仓库，所以这种撤销是不可恢复的，请谨慎操作。撤销之后代码版本将会回回退到最近一次拉取/提交的状态。二、暂存区添加撤销1. 暂存区添加首先查看项目文件状态（有哪些没有被添加到暂存区的文件 Untracked files）Changes to be committed 新创建未提交

2021-04-07 18:14:07 470 2

原创 nodemailer邮件服务器(已开源) 项目复盘

一、项目简介一个可以本地启动的邮件服务器，支持可视化界面的邮件发送。技术栈使用 express + nodemailer + jade，开发完成之后又加入了自动化测试（接口测试），测试框架使用mocha,断言库should.js。二、项目背景故事要从三年前说起，当时刚刚在github完成了我的 GitHub page 首页,其中有一个connect模块，需要实现一个简单的留言功能。当时能想到的两种方案：买服务器、搭数据库、实现留言管理直接留言内容转化为邮件发送到我的邮箱综合考虑最终选择方案

2021-03-21 19:12:03 971

原创物联网-项目复盘（谨以此文，聊以慰风尘）

一、项目背景2018年年底的一个下午，西安的雾霾还是有一些严重，电脑前正专心写bug的我突然被叫到去一下会议室，还沉浸在编码世界的我没想太多随手拿起笔记本和笔就过去了。会议直奔主题，因为项目组接到一个新需求，需要使用全新的技术栈来实现一个物联网管理系统，包含硬件信息采集、硬件设备消息推送监听、GIS地图交互等功能...你就不能点进来看吗？

2021-03-19 02:27:00 526

原创 leetcode 977 有序数组的平方 [双指针]

一、题目描述：leetcode NO.977 有序数组的平方给你一个按非递减顺序排序的整数数组 nums，返回每个数字的平方组成的新数组，要求也按非递减顺序排序。示例 1：输入：nums = [-4,-1,0,3,10]输出：[0,1,9,16,100]解释：平方后，数组变为 [16,1,0,9,100]排序后，数组变为 [0,1,9,16,100]示例 2：输入：nums = [-7,-3,2,3,11]输出：[4,9,9,49,121]提示：1 <=

2021-03-02 01:04:39 323

原创从0开始调试源码（以vue3为例）

一、生成源码研究源码最好的方式还是自己本地运行起来打着断点看，都说授人以鱼不如授人以渔，所以源码调试的方法可能比之后的源码分析更加重要。1. clone项目git clone [email protected]:vuejs/vue-next.git2.安装依赖yarn --ignore-scripts3.修改配置修改package.json中的scripts下dev的配置，后边加上--sourcemap"dev": "node scripts/dev.js",// 改为"dev": "no

2021-02-02 01:10:32 1199

原创使用--ignore-scripts解决npm/yarn安装依赖失败问题

npm安装报错问题最近使用npm安装依赖频繁遇到安装失败的问题，报错如下npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! @3.0.5 preinstall: `node ./scripts/checkYarn.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the @3.0.5 preinstall script.npm ERR! This is probably not a probl

2021-01-18 00:55:22 6782

原创一行脚本展开或收起swagger-ui所有项目

初心发现swagger-ui没有搜索功能，进入一个接口很多的swagger页面找接口很不方便，于是写了下面的一段脚本，可以收起或展开所有折叠面板。展开后可以ctrl+f搜索…直接复制以下代码在控制台执行即可。Array.from(document.querySelectorAll('.opblock-tag')).map(v=>v.click())Array.from($$('.opblock-tag')).map(v=>v.click(

2021-01-15 00:38:03 1159

原创函数柯里化理解及最简实现

一、描述官方描述：函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。换一种更准确的解读：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数二、实现代码及分析const curry = (fn, ...args) => fn.length <= args.length // 判断参数的数量足够执行函数 ? fn(...args) // 执行函数 : curry.bind(null, fn, ...args) // 使用bind的

2020-12-30 02:27:38 617

原创手写call、apply与bind及实现逻辑分享

const isFunction = fn => typeof fn === "function"/** * 模拟call实现步骤 * 1.判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。 * 2.判断传入上下文对象是否存在，如果不存在，则设置为 window 。 * 3.处理传入的参数，截取第一个参数后的所有参数。 * 4.将函数作为上下文对象的一个属性。 * 5.使用上下文对象来调用这个方法，并保存返回结果。 *

2020-12-30 01:58:12 277

原创 D2大会资源分享（解决了GitHub下载限速）

什么是D2D2 前端技术论坛 (Designer & Developer Frontend Technology Forum, 简称 D2），是由阿里经济体前端委员会主办的面向全球前端领域的技术论坛，立志于建设一个促进业内交流、引领前端领域发展的平台。回顾上周末宅在家里看了两天直播，也做一些笔记，因为官方放出了D2 PPT 下载链接（文末有链接），笔记就不放出来献丑了。资源链接有GitHub大文件下载经验的小伙伴可以直接点击GitHub PPT。(GitHub文件默认下载速度只有几

2020-12-22 13:29:29 602 1

原创 dom事件模型详解

一. dom0事件模型（原始事件模型）当时还没有形成正式的W3C标准，但该事件模型仍在早起广泛应用。一个dom节点只能绑定一个事件再次绑定会覆盖之前的事件二. dom2事件模型因为DOM于1998年10月1日成为W3C的推荐标准，但是该标准并没有定义事件相关的内容，所以新的标准直接从DOM2开始。DOM2规范是从2000 年 11 月开始（于2003 年 1 修订确认），关于事件模型新增了addEventListener方法…详情如下新增冒泡和捕获的概念一个元素节点支持绑定..

2020-12-13 23:50:48 528

原创原生JS多线程解决方案：Worker

一、简介一般情况下我们使用JS都是单线程的模式，也就是前边的代码执行完，才能轮到后边的代码执行。后来因为电脑计算能力的增强，单线程模式对于多核CPU的计算机计算能力便出现了一些浪费。web Worker是H5新增的功能，可以手动创建一个或多个额外线程来优化我们的页面。一般我们的主线程来处理UI展示、交互等方面的任务，Worker 线程可以用来完成一些耗时的操作，可以明显的提升用户体验。nodeJS请直接使用worker_threads模块二、用法1.主线程创建额外线程（接收的参数只能是一

2020-11-08 22:09:33 567

原创 HTML查缺补漏

HTML部分查缺补漏，里面都是我曾经忽略或是含糊不清的部分，希望对广大猿媛们有所帮助~

2020-11-08 01:23:50 486

原创 DOCTYPE相关查缺补漏

一、作用设置文档模式指定后会以标准模式不存在或格式不正确会导致文档以兼容模式呈现html5开始不再基于SGML，无需引用DTD二、相关名词解释兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作标准模式：渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行SGML：是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源XML：可扩展标记语言。标签可以自己创建且数量无限多HTML：超文本标记语言。标签都是固定的而且数量有限

2020-11-02 01:17:44 144

原创自动发消息脚本

网上看到的一段很有意思的代码set WshShell= WScript.CreateObject("WScript.Shell")WshShell.AppActivate "群的名称"for i=1 to 10WScript.Sleep 500WshShell.SendKeys "^v"WshShell.SendKeys iWshShell.SendKeys "%s"Next

2020-07-14 09:22:48 30575 17

原创一行代码实现访客人次统计

代码markdown版本 ![visitors](https://visitor-badge.glitch.me/badge?page_id=momodiy.github.io)html版本<img src="https://visitor-badge.glitch.me/badge?page_id=momodiy.github.io" alt="visitor">在线示例说明将代码中的momodiy.github.io替换成你自己的page_id即可（可以自定义一个

2020-07-14 00:43:03 2003 6

原创小白也能彻底理解的prototype原型链第二篇

前言回顾一下，上一篇文章主要通过构造函数与其实例对象讲解了原型对象、构造函数和隐式原型链之间的关系及用法，希望没看过的同学去先去看看第一篇再来。这一篇我们主要是来完整的学习下原型链。首先需要了解的__proto__和constructor属性是一般对象所独有的函数也是一种对象，且独有prototype属性null和undefined不属于一般对象1.构造函数与实例对象之间的原型链function Person () {}let person1 = new Person()以上代码大

2020-07-09 00:51:16 1165

原创小白也能彻底理解的prototype原型链第一篇

前言原型链这部分的概念对于前端开发人员，一直是一个难点，尤其是es6语法中还引入了class关键字，我们可以通过更直观的方式使用js对象继承等功能。本以为原型链相关知识现在只有在面试中用到了，但最近发现在研究lodash、vue等项目的源码架构时，才发现原型链相关知识点是必知必会的...

2020-07-03 00:25:38 1708 2

原创过滤数组中为falsey的对象

falsy定义falsy可以直译为假值，包含false，'',"",null,undefined与NAN这几种数据类型。思路第一步使用filter过滤falsy类型的数据这一点应该很容易想到，第二步就是考虑如何将数组中每一项转化为Boolean值。其中Boolean作为一种数据类型，同时Boolean()也是一种构造函数，可以将接收到的第一个参数转化为boolean值返回，那么第一种解法来了（idea来自freecodecomp算法篇）const noFalsy = arr => arr.f

2020-06-14 23:19:30 2901

原创从豆瓣爬取并下载对应关键字的全部图片（以周杰伦为例）

源码import requestsimport jsondef download(src, id): dir = './' + str(id) + '.jpg' try: pic = requests.get(src, timeout=10) except requests.exceptions.ConnectionError: # ...

2020-05-26 20:54:20 77888

原创 echarts常见样式速查(修改频率最高的几种样式)

echarts 最常见的几种样式（可能是修改频率最高的），欢迎补充~柱状图柱宽度坐标轴字体颜色隐藏坐标轴刻度线图表位置设定网格线样式折线图点样式折线图下方区域渐变

2020-05-19 16:42:46 4863 2

原创 java文件存在引用却报错（Cannot resolve symbol 'XXX'）

问题描述路径中明明存在的文件，引用却提示报错Cannot resolve symbol 'XXX'。后来尝试了rebuild、clean install、reimport问题依旧存在,浑身难受。最奇怪的是其他人都启动正常，且本地我将被引用的文件改了个名发现报错就神奇的消失了，再把名字改回来依旧提示引用不到…解决方案最终我还是没有妥协（通过一个一个将文件改名的方式），发现导致该bug是因为...

2020-04-29 14:25:19 7522 6

原创 python黑科技：一句代码启动一个http服务

环境准备linux安装了python的windows（配置好环境变量）启动命令1. python版本小于3.0python -m SimpleHTTPServer 8080-m意为将python模块作为脚本运行启动端口配置为80802.python版本等于或高于3.0python -m http.server 8080END...

2020-04-15 00:24:03 6322

原创三分钟搞懂es6 Symbols

一、描述Symbols是JavaScript在es6版本新引入的一种基本数据类型，其中每个从Symbol()返回的symbol值都是唯一的。二、基本用法给user对象添加一个唯一的keyconst id = Symbol('id')let user = { value: '999', id: '001', [id]: 1001}console.log(user) /...

2020-04-06 16:50:34 5607

原创 vue项目运行正常，打包后无法正常显示（30秒解决方案）

一.问题描述使用vue-cli创建的的项目，开发过程中无任何问题，在开发完成后准备打包上线，此时打包也无任何问题。然而打包后使用Tomcat发布时却出现了白屏问题。二.原因探索1.打开控制台查看network，显示的都是各类资源404的报错，那很显然是资源路径错误。注意，下图中的资源路径没有拼接项目名。（使用本地Tomcat测试）2.资源路径尝试为了确认第一步的猜想，我们可以手动加上...

2020-03-02 22:13:29 12304 1

原创 vue子组件样式无效问题

问题描述拿elementUI中的row-class-name来说，组件中直接给这个css类加样式你会发现它根本不生效。记得当时临时解决方案是写了一个无scoped限定作用域的style（css代码块）研究发现样式不生效是因为使用scoped限定作用域后，父组件的样式将不会作用到子组件中。解决方案在css代码前加上/deep/,你可以叫它深度选择器。它还可以写作>>>E...

2020-01-13 00:21:40 7426

原创 js图片下载(支持跨域/解决Access-Control-Allow-Origin)

一、思路使用canvas绘制图片使用toBlob方法将canvas图片转换为文件使用a标签的download属性下载这个canvas转化生成的图片文件canvas.toBlob()将canvas图像转换为文件参数一为可操作的blob对象构成的的回调函数参数二为生成的图片后缀名，默认为png参数三为生成图片的质量，比如0.9二、源码const imageDownload ...

2020-01-12 23:34:59 8744 1

原创快速查看当前node项目使用的依赖并生成图表

node项目快速查看依赖使用情况命令在打包的命令后边加一个--report参数npm run build --report示例END

2019-12-09 23:28:26 4697

原创打开浏览器全屏实现（类似F11效果）

一、全屏展示当前页面类似于按f11得到的样式,隐藏浏览器边框书签栏以及操作栏。const fullScreen= () => { let el = document.documentElement; lett rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen ...

2019-11-04 10:17:27 7642

原创环信无需对方同意直接添加好友

一、预期功能环信web版(或h5版)实现添加好友功能，需直接添加好友而不用确认通过，能够实现直接添加好友然后开始聊天。二、主要思路查询了环信官方给出的开发文档发现不支持这种操作，但在环信控制台界面，管理员可以直接让两个用户建立好友关系，因此考虑使用环信已有接口实现。研究发现添加好友的接口要通过Bearer验证，也就是说要在登陆成功时获取到通过验证的token信息，然后就可以拿着token发...

2019-10-09 18:06:18 2372

原创解决iframe跨域传参（Blocked a frame with origin）

一.问题描述使用iframe通过iframe子页面调用父页面或父页面调用iframe子页面时，因为违反了浏览器安全策略，无法跨iframe获取到另一页面的数据，在控制台中可以看到如下报错Blocked a frame with origin “http://localhost:****” from accessing a cross-origin frame.二.解决方案以上问题可通过...

2019-09-24 16:05:19 136454 39

原创 vue实现dom元素拉伸

一、实现效果封装了三个methods方法，传入对应节点即可实现对应元素节点的拉伸收缩。二、代码1. 函数封装/**** 让指定的dom元素支持沿x轴的拉伸收缩* oBox为指定的dom节点* e为鼠标按键默认传入的对象*/ moveX(oBox, e) { let x = e.clientX; let oBoxW = oBox.offsetWidth; ...

2019-09-17 00:21:45 4361 2

原创 NumPy入门（附基本算术运算、统计运算、排序等demo）

一、基础概念Python中使用最多的第三方库，也是SciPy、Pandas等数据科学的基础库。二、ndarray处理其实就是多维数组。Python中的 list 保存的是对象的指针，因此数据量大时很占内存，低效且慢。NumPy 数组存储在一个均匀连续的内存块中，这样数组计算遍历所有的元素，不像列表 list 还需要对内存地址进行查找，从而节省了计算资源，高效快速。import nu...

2019-07-28 20:05:00 620

原创 python语言入门(列表、元组、字典、集合、注释、import)

数据类型列表很像javascript的数组。具有增删改查的功能，我们可以使用len()函数获得lists中元素的个数；使用append()在尾部添加元素，使用insert()在列表中插入元素，使用pop()删除尾部的元素。lists = ['a', 'b', 'c']lists.append('d') # 列表最后一位插入print(lists)print(len(lists)...

2019-07-28 11:54:07 1600

原创超简洁的mui点击评分组件（完整代码及示例图）

一、组件介绍其实就是一个代码块简单的使用mui自带的图标及jquery实现了一个点击评分的组件，代码很短，尽可能的使用了mui自身的一些样式和方法避免重复造轮子。使用了mui自带的icon，无需图片。二、相关依赖mui.jsmui.cssjquery.js三、关键代码1. html<div class="icons mui-inline kps"> &...

2019-07-06 16:02:22 2323

原创 generator-yield（es6）入门系列

一、概念generator函数是一种执行过程中可暂停的函数。比如在一个函数中需要发起一次ajax请求，在请求之后再向下执行，这种场景我们可以使用generator函数。二、语法1. 定义函数generator英文翻译为构造器的意思，可以将一个generator函数理解为多个普通函数构成的函数function * nice () { console.log(1) yield ...

2019-06-09 22:19:27 640

原创任意折叠代码的黑科技（无需插件）

发现一个可任意折叠代码的黑科技。将想要被折叠起来的代码放入以下语法中，即可实现折叠。简单粗暴无需插件以下代码块中可以放任意代码或注释//#region 任意注释// 想被折叠一大段代码，可以包含注释//#endregion折叠效果任意注释END...

2019-06-05 13:40:20 1187

原创 Webpack启用Sass编译

一、安装依赖npm i sass-loader node-sass -D二、webpack配置module: { rules: [ { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ]}webpack解析sass文件一共需要...

2019-06-02 17:32:19 1788

原创实例方法、实例属性、静态方法与静态属性的创建与使用（es5 vs es6）

一、es5版本相关知识点构造函数原型链const Person = function (name, age) { this.name = name // 实例属性，可以通过对象.属性访问的属性叫实例属性 this.age = age}// 静态属性，挂载在构造函数Person.info = 'nice'// 实例方法，挂载在原型链，生成的对象可直接点方法的方式调用...

2019-05-30 22:18:52 1956 2