weixin_46240162的博客

原创 圣诞学习篇~项目部署操作

兄弟们圣诞节快乐，女朋友不在，在家肝代码一天，为了增加节日气氛 给兄弟们总结一篇完整版本的前端快速部署代码的文章给助助兴。没做过的敲起来吧！下面将介绍两种项目部署的方法，在我的理解里分别对应的是半自动部署和全自动部署

原创 元气提醒~脱单神器

元气提醒利用微信订阅号的方式，给女朋友每天定时定时推送消息。谁还敢说我们程序员是直男？他们都不懂浪漫！如果还没有女朋友的这个可以祝你一臂之力，早日脱单。掘金的第一篇文章在摸鱼的过程中完成！项目地址 https://gitee.com/jimmyxuexue/daily-push-to-girlfriendV1.0.0公众号这一块一直是我最薄弱的部分，一大堆的配置，有幸看到一个大牛给她女朋友写的，碰巧赶上我女朋友也马上生日，就也跟着大牛的文章写了下来并部署完成，女朋友也觉得不错，真是喜死了。！

原创 从零起步，基于 webpack 搭建一个适用于小项目的 vue 脚手架

从零起步，基于 webpack 搭建一个适用于小项目的 vue 脚手架需要对 webpack 有一定的了解，会更好的掌握和理解的搭建下来项目地址 https://gitee.com/jimmyxuexue/small-project-by-vue为啥会需要自己搭建呢？vue 的脚手架已经是非常的好用了，为啥还需要再自己搭建呢？对于我来说，理解和学习一个新的知识最快的方式就是去熟悉 API，之后就是类似与研究源码一般，去自己实现它，这个是我对 webpack 学习成果的一个测验，看看自己对于 w

原创 react-redux 核心原理实现 - 附加 useMemo和UseCallBack

react-redux 核心原理实现 - 附加 useMemo和UseCallBackredux不是react官方出的库，react-redux才是react官方出的库，是在redux的基础上进行封装。react-redux是将组件再次进行细分，分成了容器组件和UI组件为什么要使用react-redux这一点在我刚学习react-redux的时候也一直是困扰了我许久，因为我感觉就直接使用redux已经是很方便的可以使用了。但是使用react-redux我们在写类组件的时候还要写很复杂的connec

原创 react组件化通信-ContextApi的使用细节

react组件化通信-ContextApi的使用细节常见问题context现在不常见了，不建议使用？现在的开发，context不常见是对的，但是不是不建议使用，存在即合理，如redux源码就是有用到这个思想的，react-router也是有用到的但是尽量少用是真的，因为消耗的性能是相对比较大的，因为一旦改变所有的有使用的子组件都会进行渲染更新，这个还是相对比较消耗性能的，所以要慎重！并不是不用context与reduxredux主要做的是数据共享，而context目标的跨层级传递

原创 nodemon 核心实现

nodemon 核心实现nodemon 是一个非常好用的一个工具，因为 node 命令是不会更新的，每次当我们修改了一些代码，是不会按照的最新的代码去执行的，执行的还是上次执行命令时的代码。nodemon这个工具最好用的地方就是会实时更新，非常方便于我们在开发阶段的时候这个也是在B站上看一个大佬的视频，然后自己跟着造轮子，记录分享一下心得这里想说的是，很多人对node有理解上的错误，以为node就是一个做服务器的，其实这个是不对的，服务器在我眼里只是它的一个很厉害的技能，我觉得更重要的是它为前端开

原创 egret 开发飞机大战

egret 开发飞机大战egret 是一套完整的 HTML5 游戏开发解决方案，在开发的时候是采用 TypeScript 语言开发的。对于前端开发人员还是非常的友好的，毕竟 ts 是 js 的超集，尤其是在大学里有学习过 c#或者 java 的同学，上手一定会感到非常的亲切，很快就能够上手了。之所以会做这个 demo 是因为公司老大给我下半年定的工作重心就是小游戏，所以 egret 对我来说是一个全新的领域，但是 egret 在网上资料都是很稀缺的，相当于是块荒凉之地，视频什么的基本都是很多年以前的

原创 Vue3设计思路 -- 虚拟DOM以及patch算法

function reactive(obj) {const proxy = new Proxy(obj, {get(target, key) {/*render函数第一次渲染的时候会获取引用的值 所以第一次渲染就会走到这个 get 方便我们开始做依赖收集/track(target, key)return target[key]},set(target, key, value) {target[key] = valueconsole.log(‘proxy’, key)/修改的时候，去

原创 Vue3设计思路 -- 响应式API

Vue3设计思路 – 响应式APIvue3 基于推出了一套基于ES6 Proxy代码的全新composition API，这套API相比与原来的option API更加的规范，但是也是做了一些兼容性的让步compositionAPI优势主要体现在:proxy拥有着更好的性能，因为原来的响应式是通过Object.defineProperty来实现的，而这个操作是非常的消耗性能的原来的optionAPI是将各个内容块进行分开，如data(){},method：{}生命周期等等，如果一个组件比

原创 Vue3设计思路 -- 实现简单的createApp工厂函数

Vue3设计思路 – 实现简单的createApp工厂函数vue3相比于vue2有了质的飞跃，尤大大做了很多底层的逻辑工作。使得vue3的速度比原来要快乐非常的多，配合上Vite这个工具，可以给开发者更好的开发体验。看代码可以知道createApp()之后创建的实例可以立刻跟一个mount方法，但是底层其实还有一个编译的过程。写了以后会收获很大的，原来还能这样设计！创建实例的区别vue3是底层实现了createApp 这个工厂函数，而不是使用像vue2一样需要 new Vue() 产生的实例的

原创 Vite的理解与手写一个Vite

Vite的理解与手写一个ViteVite是和vue3一起发布的一个重磅工具，也是尤大大扬言可能会取代webpack的一个强大的工具。所以是前端的小伙伴们一定要学习和了解的一个东西Vite的原理和工作模式对我个人来说，vite给我的第一感觉就是 – 快！！相比于传统的webpack，少了一段打包的过程，基本是属于一个秒开的状态的。我们再来对比一下使用webpack 和 vite相比两者控制台（network）的区别。webpack似乎只有一个app.js是和打包相关的，点开可以看到这个是一个巨

原创 promise源码实现(宏任务版promise)

promise源码实现这个promise的实现还是属于比较阉割版本的，promise的异步是微任务，这里我为了实现异步的代码只是简单的用setTimeout封装了一个宏任务版本的promisepromise特点我们要自己封装一个promise，首先要知道promise具有什么特性promise有三个状态 准备状态、解决状态、失败状态，默认是准备状态，除此之外还有一个就是promise保存的值class XPromise{ static PENDING = 'pending';

原创 你不知道的JavaScript（上卷）- - 书本知识点记录

JavaScript你可能不知道的事(小黄书) - 上册小黄书是公司带我的姐姐推荐给给我看的，她跟我说JS好才是王道，有空把三本都看了，于是我在摸鱼的时候看完了小黄书上册…小黄书涉及到的知识点还是非常的精细的，这里记录的是对于我来说让我眼前一亮的知识点，换句话就是我之前都不是很理解或者说是没有涉猎到的知识点。也不是代表除了这些别的我都懂了。总之读书是真的很重要。以后会一直记录下去。函数作用域function test(a) { b = a * 5; // 报错 b没有被定义 let

原创 JS细节知识点（请求头，rem，事件对象，自定义全局变量）

浏览器的请求头的使用请求头：navigator 对象的 userAgent 属性，使用这个属性我们可以判断用户是在手机浏览器还是电脑上操作。function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone o

原创 原生JS实现复制功能

在开发过程中经常遇到复制的功能如：目前我知道的知识量是可以用两个方法来实现，分别是使用第三方插件，clipboard 插件可以实现，但是今天知道了一个原生 JS 就可以实现的方法，而且感觉十分的有用。所以这里就具体的介绍原生 JS 的复制方法let oInput = document.createElement("input")oInput.value = this.hostUrl // 这里记录的就是需要保存的值document.body.appendChild(oInput)oInput.

原创 文件上传（OSS）

title: Koa 2框架中接收文件，实现文件上传date: 2020-11-22sidebar: autocategories:文件上传小技巧tags:koaKoa 2框架中接收文件，实现文件上传文件上传这个操作是非常非常常用的，如果是使用JS直接写一个文件上传的代码的代码量是巨大的，且不容易理解，这里我也是在网上查了很久，可以使用koa-multer插件来实现文件上传传统的文件上传我过去的做法是先将然后文件全部转码成Base64的一长串字符串，将这一长串字符串传给.

原创 2021-04-01

前端性能优化对于前端来说，性能优化无非就是执行相隔方面，分别是。文件获取优化和代码执行优化文件获取优化加载文件 css jshttp 协议的细节‘从输入 url 到页面渲染发生了什么大厂怎么上线前端的代码代码执行优化节流 防抖重绘 回流vue react（ssr）常见优化，代码执行的更少，dom 的操作更少浏览器是如何操作 DOM 的文件优化网络协议网络协议是很多性能优化的基础，了解了网络协议，很多优化也就是会呼之欲出ip 协议 （寻址） 通过 ip 找到准确

原创 JS异步编程（async、await详解）

JS 异步编程js 是一门单线程的语言，这个也就意味着，一次只能有一个人干活，所以为了不造成页面的堵塞，js 是异步加载。笔记点击这里回调函数的基本概念function loadImage(src, reslove, reject) { const image = new Image() image.src = src image.onload = reslove(image) // 这时候就相当于是直接同步代码了 因为直接调用了reslove这个方法，就不异步了 image.onlo

原创 文档背景图

原创 Driver.js 页面导航插件

Driver.js官网Driver.js是一个页面引导插件，可以快速的帮我们实现页面引导的这个功能，并且有以下好处封装完美，只需要引入实例化，绑定类名既可以实现多步骤，可以自定下一步上一步文字，弹窗位置等等方法封装完善，可以注册点击下一步上一步之后的事件。使用方法基本使用基本使用会实现的就是一个有个overlay 就这个元素是高亮的 const driver = new Driver() document.querySelector('.btn1').addEventLis

原创 Koa 2框架中接收文件，实现文件上传

Koa 2框架中接收文件，实现文件上传文件上传这个操作是非常非常常用的，如果是使用JS直接写一个文件上传的代码的代码量是巨大的，且不容易理解，这里我也是在网上查了很久，可以使用koa-multer插件来实现文件上传传统的文件上传我过去的做法是先将然后文件全部转码成Base64的一长串字符串，将这一长串字符串传给后端，后端再根据字符串，使用Buffer.from逆解析，最终将图片保存在服务器上，我自己理解的这样的作法有以下的几点不好。因为是将整个Base64字符串传递给后端，就会造成一个接口

原创 windows电脑中安装mysql（简单版）

windows电脑中安装mysql（简单版）MySql的安装有很多种，网上比较多的都是自己配置,这种酒比较繁琐，需要记很多的指令，当然繁琐有繁琐的好处，能够更加的理解mysql在系统层面上的运行。今天上传的是使用软件的方式快速的配一个Mysql，非常香！需要的环境电脑要有VC++2015-2019的环境，如果没有的可以在下载地址中快速下载一个，就十几M，下载安装一下很快去mysql官网下载 mysql-installer-community-8.0.17.0.msi 记住要是一个可执行文

原创 移动端绝对（固定）定位问题与解决

移动端绝对（固定）定位问题在公司做移动端界面时，暴露了几个隐藏的不容易发现的问题，最典型的就是绝对（固定）定位的问题，趁着现在项目差不多做完了，记录一下。出现的问题原因首先这种需求使用定位做是完全没用任何毛病的。当手机在输入文字的时候，手机回调出键盘，键盘和浏览器的窗口时同层的，就导致浏览器的高度变低了，定位的元素自然也就往上漂浮了。解决方案这个问题真的时搞了我很久，最初以为是没有给出写死的高度的原因，发现无论怎么给高度结果都一样，也参考了网上很多的咨询，这种问题有以下几种解决方案

原创 Vue3新特性

Vue3 新特性Vue3已经发布了，虽然没有看发布的版本，但是我看了发布前的一些已经公布的Vue3新特性，其中主要的是composition-apicomposition-api使用composition-api这个模块需要使用setup()函数setup() 函数 ， 专门为属性所提供的新属性，它为Vue3的 Composition API 新特性提供了统一的入口setup() 函数会有两个参数setup()函数的第一个参数是一个对象 可以获取到属性传值的值 – 前提是必须

原创 typescript（Day7）- - 修饰器

typescript（Day7） - - 装饰器总算完结啦，源码在：https://gitee.com/jimmyxuexue/basic_knowledge_of_typescript装饰器：一种特殊的类型声明，可以附加在类的声明、方法、属性上，可以修改类的行为通俗的将装饰器本质上就是一个方法，可以注入到类、方法、属性参数来扩展类、方法、属性的功能常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器装饰器的写法：普通装饰器（无法传参） 、 装饰器工厂（可传参）装饰器是过去几

原创 typescript（Day6）

typescript（Day6） - - 命名空间与命名空间模块化命名空间在其他语言中已经是一个很常见的功能了 c# java php都有命名空间的过去JS是不存在命名空间的 在TS里面 实现了命名空间 但实际的原理还是通过立即执行函数（自执行函数） - 因为函数有块作用域使用方式TS使用 namespace 空间名{} 的形式来定义命名空间 命名空间下的数据放在大括号里面命名空间内部之间的变量可以随意进行访问，如果命名空间以外的区域想要访问空间里面的数据，需要使用export关键

原创 typescript（Day5）泛型

typescript（Day5）泛型泛型的出现主要是为了让我们的类、方法、接口得到最大程度的复用，并且还保留有类型检测。过去的代码复用性不高?一样的功能需要写两遍，当我们使用any类型来对函数进行封装，复用性确实是高了，但是确实了类型检测，所以综合下来，泛型的出现，就是为了解决这个问题，在保证代码复用性的前提下，还能继续的享有类型检测泛型一般使用<T>来表示泛型，在定义了泛型之后，其他地方如果需要使用这个泛型就只需要用T来表示即可。泛型接口函数接口 – 限制函数

原创 typescript（Day4）接口

typescript（Day4）接口这里所说的接口并不是前后端数据交互的api接口，而是typescript对类型约束的接口。接口都是使用 interface关键字来定义接口接口可以和现实生活中的接口相互呼应，是一种规范，可以让程序更加的健壮，体验预知到一些可能发生的错误typescript中的接口有很多，如：属性接口函数类型接口可索引接口可拓展接口、接口继承属性接口：属性接口 - - TS中处理json对象属性的一种接口属性接口案例 - - 封装ajax属性接口总结

原创 typescript（Day3）静态属性、静态方法、多态、抽象类

typescript（Day3）静态属性、静态方法、多态、抽象类1. 静态属性和静态方法静态属性和静态方法并不是发展到typescript的时候js才有的，在es5的时候我们也可以是使用构造函数的方式来定义静态属性和静态方法的。typescript的静态属性和静态方法和es6的基本也是一致es5 时期静态属性与静态方法typescript的静态属性与静态方法总结：静态属性和静态方法是不需要通过new实例就可以直接调用的属性和方法静态方法只能获取到静态属性，是没有办法获取到实例的属

原创 typescript（Day2）函数和类

typescript（Day2）函数和类函数ts就是一套完整的面向对象语言，所有的面向对象的语言其实语义都是互通的，因为之前我学习过c#，所以感觉是非常好理解的TS中的函数和c#也是基本一样，八九不离十，除了函数的重载会稍微有点区别和JS相比，TS的函数也是一样，我们可以提前约束函数的形参类型，函数的返回类型，ts是js的超集，所以JS能用的方法，ts都可以使用，包括es6新出的好用的语法函数重载 - - 函数的方法名相同，但是形参不同(类型，个数)JS 是没有办法实现重载的，因为在

原创 服务端渲染SSR

服务端渲染SSR我们常见的网站渲染的方式已经迭代替换了很多总了，在最早以前的远古时期时，所以我们就要了解客户端渲染CSR和服务端渲染SSR传统的Web开发 – (发请求，返回html)由客户端发起一个请求，服务端再将拿到的数据和模板（asp，art-template）等等，直接将数据填充在一个模板里面，再将这个一大个模板返回给前端，浏览器就相当于是打开了一个界面。这个就是最最传统的一个Web开发的流程了这种开发如果我们查看页面的源代码(并不是查看页面的elements) 是能够看清晰的一层层

原创 实习笔记二

实用小插件 – 点击复制clipboard.js移动端的长按事件在PC端转到移动端需要做一个类似抖音的长按效果，按钮周围的宽度会持续的变化，最初我想的想法是通过onmousedown事件和onmousedown事件，这个如果是在PC端可能跟是可以实现这个效果，但是在移动端上这两个事件是完全失效的，很好理解，手机上我们不需要使用也不能使用鼠标，所有这两个事件不会被触发，相对应替换他们的就是ontouchstar和ontouchend事件，表示的就是当我们按下和抬起的时候。Vue中计算属性的妙用，在这

原创 typescript（Day1）数据类型

TypeScript（Day1）数据类型typescript 将会是前端的未来，这点毋庸置疑，就从前端目前三大框架都支持typescript这点来说就很清楚，Vue3更是使用typescript重写了一遍源码。可见typescript的重要性typescript是javascript的超集，也就是说js可以实现的功能，ts是都可以完美的实现，相比之前还比js多了很多东西，如类型系统等等会了JS就相当于会了80%的ts浏览器和node.js都是只认识js代码，他们并不认识ts代码，所以ts代码的运

原创 前后端鉴权(koa-vue)

前后端鉴权源代码在：https://github.com/Jimmylxue还有没有更新了，在做毕设的时候完成了前后端鉴权的方式，内容涉及到了自己的封装的一些小类，来配合路由模块化的思路前后端鉴权的思路上就是，在访问前端除了登录和注册的页面以外，其他的页面都必须要有token令牌才可以进入涉及到的知识点：前端axios路由拦截前端router路由拦截后端koa路由拦截(判断请求地址)前端axios路由拦截：使用axios.interceptors.request.use((

原创 Vue懒加载的使用(后端分页)

Vue懒加载的使用(后端分页)再我们开发的过程中可能涉及到的数据量比较小，所以不怎么会出现需要懒加载的情况，但是这个在工作中就是非常非常重要的一个知识点了。懒加载的功能和分页其实是非常像的，就是一次性不会给太多的数据。懒加载的作用：当我们没使用懒加载或者分页的时候，访问一个接口，接口是一次性的将所有的数据都返回了，如果数据比较多有七八百条，那么就会导致页面加载数据的时间过长，影响用户的体验，使用了懒加载之后：界面的加载速度会有非常明显的提升节省带宽不必要加载无用（用户刷不到的数据） 减轻了

原创 Mysql外键的使用

Mysql外键的使用外键是一个非常非常好用的一个东西，同时也是很多种关系数据库都有的一种功能，简单的来说就是可以将两张表之间建立一个关联，可以做到操作一张表的时候，另外一个表的数据也会同步发生变化。例子：一个学生表里面有学生的所有信息，其中有一个字段是班级id，又有一个班级表，记录着所有的班级信息，按照逻辑来说，如果我们删除了班级表里面的某个班级，学生表里面是这个班级id的信息就应该修改。以上的例子我们如果是使用程序是可以正常的完成的，先删除这个班级，再在学生表里将是这个班级的学生信息的班级

原创 动态日期时间

动态获取时间今天公司接手了一个别人的项目，有一个功能是能够预定两周以后球场的使用权这个小功能是很常见的，很多涉及到预定功能的项目都会使用的到，比如酒店预定等等…今天在公司里面是边查文档，做这个功能，做了差不多有 40 分钟，主要是对时间的处理比较少，所以做的比较慢，现在已经是晚上了，就来简单的再写一遍，顺便总结一下。源码在https://gitee.com/jimmyxuexue/js_scattered_knowledge_points/tree/master/%E5%8A%A8%E6%8

原创 Koa使用socket.io的方法

Koa使用socket.io自己的毕设商城项目中，有一个和商家聊天的功能，之前使用express框架做过一次- 讲到这就不得不说一句，知识真的是会遗忘的，当初做过一遍的，刚刚花了一两个小时又是查文档又是看视频，都没有想起来，最后翻了一下之前写的代码，终于是想起来了~koa在socket.io的眼中好像是不得宠的一个孩子，在他的官网中有大量的关于express相关的配置，但是koa的配置讲的地方比较少，几乎等于没讲（可能是我理解能力不好的）最终我在npm站中找到了一个koa-socket这个包，

原创 实习笔记

实习笔记文本溢出处理 – 文本要溢出的部分用省略号来显示效果前后对比： p{ font-size: 16px; overflow: hidden; // // 溢出用省略号显示 text-overflow:ellipsis; // // 文本不换行 white-space: nowrap; // white-space: wrap; }white-space属性是控制文本在

原创 Vue项目开发中一些常用且好用的操作

VantUIVantUI是在移动端上一款非常好用的一套UI组件库在使用VantUI时需要先安装，使用npm i vant -S,在Vue中项目中，需要再进入一个babel插件，使用npm i babel-plugin-import -D在都安装好了之后，Vue的项目中有一个.babel.config.js文件，再对这个文件做如下配置： plugins: [ [ 'import', { libraryName: 'vant', libra