- 博客(46)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 Git教程
Git简介Git是目前世界上最先进的分布式版本控制系统（没有之一）。集中式vs分布式的优劣集中式版本控制系统最大的毛病就是必须联网才能工作。分布式版本控制系统是指每个人的电脑上都是一个完整的版本库，因为版本库就在你自己的电脑上。每个人都有自己完整的版本库，这样把各自修改的内容互相推送给对方就可以看到对方的修改。这就是我们为什么要学习Git的原因：不需要联网照样可以工作。强大的分制管理让世界...
2018-11-01 17:59:42
166
原创 微信小程序绘制海报
新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入在小程序中引入 Wxml2Canvas 库。在 wxml 文件中创建需要转换成图片的元素绘制海报标题<button @click=“drawMyCanvas”>绘制海报。
2024-09-06 18:47:55
932
原创 vue3实现输入框短信验证码功能
1.按键删除，清空当前input，并跳转prevInput & 获取焦点,按键delete，清空当前input，并跳转nextInput & 获取焦点。按键Home/End键，焦点跳转first/最后一个input输入框。ArrowLeft/ArrowRight键点击后跳转上一个/下一个输入框获取焦点。通过el.clipboardData获取粘贴内容，判断是否为4/6位粘贴内容。2.判断按键为数字，则取第一个数字，然后跳转下一个input输入框获取焦点，如果为最后一个，则失去焦点，交互结束。
2024-03-18 17:57:48
955
1
原创 ios版本小于13.4.1的手机需要前端对其调整图片方向，上传拍照照片总是方向不对
这时候拍出来的照片展示在canvas中是不会被旋转的。如果以其他角度拍照时，就会发生旋转。这类iphone中手机竖着拿然后逆时针旋转90°才是正确的拍照姿势。
2024-03-11 13:42:49
400
原创 ios版本小于13.4.1的手机需要前端对其调整图片方向，上传拍照照片总是方向不对
这时候拍出来的照片展示在canvas中是不会被旋转的。如果以其他角度拍照时，就会发生旋转。这类iphone中手机竖着拿然后逆时针旋转90°才是正确的拍照姿势。
2024-03-08 18:04:13
638
原创 某些微信浏览器（比如小米手机mix2 8.0，Android 6：ZTE 7 max）input标签file属性，无法选中图片或者调用相机
安卓ios 都可拍照可图库，需要多选功能需要使用wx的sdk，需要配置公众号信息。2、multiple=“multiple” 无capture。3、无multiple capture=“camera”4、无multiple 无capture。ios ：可拍照可图库。安卓： 可拍照可图库。iOS ： 只可拍照。
2024-03-08 18:03:40
458
原创 keep-alive 页面切换不触发onActivated和onDeactivated方法周期
即： const tagList = computed(() => store.state.app.tagList .join(‘,’))原因： store.state.app.tagList返回的是一个 Proxy， 代理了数组，并不是数组本身。修改：将 的 tagList数组模式改为 逗号分隔字符串模式 就正常了。
2024-03-08 18:02:34
647
原创 无法使用debugger，debugger在项目中不生效，导致无法有效排查问题
应用debugger调试Vue项目，需要在项目中需要的位置写debugger,项目运行后，打开浏览器按F12，在chrome sources页签中就会直接进入断点，至此就可以可以进行单步、跳步调试。debugger是浏览器提供的调试语句，其主要是通过停止JS的执行，相当于设置断点。在JS代码编写的过程中，我们都会通过浏览器的调试模式（F12）来检查代码逻辑是否正确，大多数我们都是通过设置断点来进行调试。2开启sourcemap。3谷歌浏览器设置解决。
2024-03-08 18:01:50
3173
1
原创 EventBus在多个组件之间进行事件通知的场景下还是比较有用的，通过监听事件和触发事件，可以在订阅者和发布者之间解耦，实现一个常规的eventBus也比较简单
【代码】EventBus在多个组件之间进行事件通知的场景下还是比较有用的，通过监听事件和触发事件，可以在订阅者和发布者之间解耦，实现一个常规的eventBus也比较简单。
2024-03-08 17:59:45
363
原创 WatchEffect执行时机：当副作用函数进入队列时, 会在所有的组件更新后执行
【代码】WatchEffect执行时机：当副作用函数进入队列时, 会在所有的组件更新后执行。
2024-03-08 17:58:40
437
原创 如果reactive绑定的数据没有双向绑定
只能用于对象类型 (array map set weakmap weakset Object这样的集合类型)。不能持有如 string、number 或 boolean 这样的原始类型。// x & y 现在是 ref 形式了!解构reactiveHook.ts。
2024-03-08 17:57:29
689
原创 VUE2升级Vue3总结1
customRef：自定义一个 ref，可以显式地控制依赖追踪和触发响应，接受一个工厂函数，两个参数分别是用于追踪的 track 与用于触发响应的 trigger，并返回一个一个带有 get 和 set 属性的对象【实际上就是手动 track追踪 和 trigger触发响应】Vue.config.productionTip作用是是否产生集成环境的各种提示，设置为ture表示生产环境，不再产生提示，减少体积和提示带来的开销。删除 on，on，on，off 和 $once 实例方法，vue3.x不再支持。
2024-03-08 17:56:09
432
原创 前端下载文件问题之如何获取报错信息
1.下载文件场景ResponseType:"blob"时，需要报错提示，通过new FileReader把返回的数据转成文件，从而读取错误信息；接口会生成并返回文件流。在极端情况下接口数据返回异常，需要抛出错误信息，比如后端拼接错误等情况、空文件情况。难点：responseType设置为Blob后，返回内容为二进制文件流，从而无法获取错误信息。3.byteToFile，返回的文件流数据转化为路径，创建A标签，触发点击下载文件路径。
2024-01-04 17:15:40
920
原创 Jest单元测试Vue项目实践
实际上，jest.spyOn()是jest.fn()的语法糖，它创建了一个被spy的函数具有相同内部代码的mock函数。它模拟了一部分类似 jQuery 的 API，非常直观并且易于使用和学习，提供了一些接口和几个方法来减少测试的样板代码，方便判断、操纵和遍历 Vue Component 的输出，并且减少了测试代码和实现代码之间的耦合。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只需要知道它是否被正确调用即可，甚至会指定该函数的返回值。即toBe是===，toEqual是==
2023-07-03 17:43:07
2421
原创 javascript常用设计模式与设计原则总结
单一职责原则 SRP【定义】单一职责原则的定义是‘引起变化的原因’，如果你有两个原因去修改一个方法，说明这个方法有两个职责，承担的职责越多你需要修改他的可能性就越大，修改代码总是件危险的事情，特别是两个职责耦合在一起的时候一句话概括：一个对象（方法）只做一件事【优点】降低了单个类或者对象的复杂度，按照职责把对象分解成更小的粒度，这有助于代码的复用，也有利于进行单元测试。当一个职责需要变更的时候，不会影响到其他的职责。【缺点】增加编码复杂度，同时增加对象之间联系的难度（要明确的是，并不是所有的职责都应.
2020-08-12 09:38:44
220
原创 less的使用进阶
Less是一门css预处理语言，它展现了css语言，增加了变量、Mixing、函数等特性。Less可以运行在Node或浏览器断。less的优点：1.可以设置变量，支持运算，变量含有作用域属性。2.可以嵌套着写css。结构清晰，便于扩展。3.可以轻松实现多继承、混入，支持带参数的调用类函数。缺点：1.额外的学习成本。2.用less编译出的css文件比直接写的稍微大一点。使用场景// Variables@my-selector: banner;// Usage 变量作为类名.@{my-
2020-07-14 15:10:57
412
原创 RxJS Observable
在介绍 Observable 之前，我们要先了解两个设计模式：Observer Pattern ——（观察者模式）Iterator Pattern ——（迭代器模式）这两个模式是 Observable 的基础，下面我们先来介绍一下 Observer Pattern。Observer Pattern观察者模式定义观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的...
2019-12-06 13:14:36
348
原创 ReactHooks详解
么是 Hook?Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。React 内置了一些像 useState 这样的 Hook。你也可以创建你自己的 Hook 来复用不同组件之间的状态逻辑。我们会先介绍这些内置的 Hook。复杂的组件难以理解我们在刚...
2019-12-06 10:21:01
368
原创 bind的原理深度剖析
bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用。**语法：**function.bind(thisArg[,arg1[,arg2[, …]]])返回一个原函数的拷贝，并拥有指定的this值和初始参数。bind 方法与 call / apply 最大的不同就是前者返回一个绑定上下文的函数，而后两...
2019-11-14 14:58:28
687
原创 JS继承原理剖析
1、原型链继承构造函数、原型和实例之间的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个原型对象的指针。继承的本质就是复制，即重写原型对象，代之以一个新类型的实例。function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = functi...
2019-11-12 16:05:40
174
原创 前端安全攻击与防御策略
跨站点伪造请求 csrf什么事csrf？攻击者盗用合法用户身份，向服务器方发送请求，对于服务器来说是合法的，却又达到了攻击者所期望的目标。完成一次csrf攻击需要完成以下两个步骤：1.登录受信任网站A，并在本地生成cookie2.在不登录网站A的情况下访问危险网站Bcsrf防御策略1.验证HTTP Referer字段HTTP的referer字段保存了http的来源地址，受访网站可以验...
2019-03-14 13:09:14
849
原创 react组件间通信原理
跨级组件之间的通信所谓跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子组件通信。跨级组件通信可以采用下面两种方式：1.使用props一层层往下传2.使用context。我们这里着重讲context的用法使用 context 需要注意以下条件：1.上级组件要声明自己支持context，并提供一个函数来返回相应的context对象2.子组件要声明自己需要使用context，并提...
2019-03-13 17:18:41
282
原创 gennerator的原理应用
Generator函数的理解和使用Generator 函数是 ES6 提供的一种异步编程解决方案。一、异步编程1、所谓“异步”，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。2、异步编程方式：（1）回调函数（2）事件监听（3）发布/订阅者（4）Promise对象3、所谓回调函数，就是把第二段单独写在一个函数里面，等到重新执行这个...
2019-03-06 10:13:39
394
原创 哈希表/散列表原理解析
什么是哈希表？哈希表（Hash table，也叫散列表），是根据关键码值(Key value)而直接进行访问的数据结构。也就是说，它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做散列函数，存放记录的数组叫做散列表。记录的存储位置=f(关键字)这里的对应关系f称为散列函数，又称为哈希（Hash函数），采用散列技术将记录存储在一块连续的存储空间中，这块连续存储空间...
2019-02-28 10:08:54
545
原创 异步,开放封闭原则
什么是单线程，和异步有什么关系只能做一个线程，只能做一件事，原因是避免Dom渲染的冲突浏览器需要渲染Domjs可以修改DOM结构js执行的时候，浏览器Dom渲染会停止两段js也不能同事执行（都修改dom就冲突了）webworker支持多线程，但是不能同时访问Dom解决方案------异步什么是event-loop异步的实现方式就是event-loop同步代码，直接执行；异步函...
2019-02-13 17:59:44
123
原创 webpack的实践应用
安装webpack//在全局安装webpack使用以下命令。$ npm install -g webpackwebpack已经安装到计算机上，现在可以使用webpack命令了。1、在项目中使用webpack使用以下命令在项目根目录下生成package.json文件$ npm init使用sublimetext编辑器打开package.json文件应该是这个样子的。{ "na...
2019-02-12 18:13:06
137
原创 跨域通信--Window.postMessage()
一、跨源通信概述源：协议、端口号(https默认值433)、主机域名(document.domain)作用：向目标窗口派发MessageEvent消息（四个属性）兼容参考MessageEvent四个属性：1.message（类型）2.data（window.postMessage的第一个参数）3.origin（调用postMessage时页面的当前状态）4.source（调用pos...
2019-02-12 16:35:49
2397
原创 webpack配置
webpack的几大模块如果说，一个webpack配置文件，我们到底需要配置的东西有什么？我觉得有这么几个重要的模块：entry（入口）、output（输出）、loaders、以及 plugins（插件）。entry：代表入口。表示webpack从哪里开始解析你的项目依赖关系。output：代表输出。表示webpack最终把你的项目打包到哪个文件中。loaders：代表你用什么东西来解析你...
2019-01-29 18:46:05
162
原创 https,http和ssl的关系
httpsHTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL,HTTPS和HTTP的区别超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息。HTTP协议以明...
2019-01-29 14:03:45
1922
原创 CALL()、APPLY（）、BIND的用法和区别
call、apply、bind的作用是改变函数运行时this的指向。apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。function add(c, d){ ...
2019-01-28 13:32:53
196
原创 HTTP请求和相应格式
HyperText Transfer Tansfer Protocol 超文本传输协议，是一种基于TCP的应用层协议，也是目前为止最为流行的应用层协议之一，可以说HTTP协议是万维网的基石。历经了0.9、HTTP/1.0、HTTP/1.1、HTTP/2几个版本(关于HTTP协议的历史，这里有一片文章介绍的比较详细)，目前流行的还是HTTP1.1这个版本，HTTP2还在推广中，我这里复习的也仅仅是H...
2019-01-14 19:06:10
1149
原创 URI的子集URL和URN
URI：Uniform Resource Identifier，即统一资源标志符，用来唯一的标识一个资源。URL：Uniform Resource Locator，统一资源定位符。即URL可以用来标识一个资源，而且还指明了如何locate这个资源。URN：Uniform Resource Name，统一资源命名。即通过名字来表示资源的。URL肯定是一个URI，但是一个URI并不一定是一个UR...
2019-01-14 10:30:58
367
原创 TCP和Http的区别
TCP连接手机能够使用联网功能是因为手机底层实现了TCP/IP协议，可以使手机终端通过无线网络建立TCP连接。TCP协议可以对上层网络提供接口，使上层网络数据的传输建立在“无差别”的网络之上。建立起一个TCP连接需要经过“三次握手”：第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；第二次握手：服务器收到syn包，必须确认客户的SYN（ack...
2019-01-07 17:11:00
135
原创 我的前端面试总结
1. 简历的准备好的简历是获取更多面试机会的前提，关于如何写一份优质的简历和简历优化等方面的话题我也不是专家，在这里说一下自己的总结。简历中的重要部分1.你目前掌握的技能，每个技能点是了解、熟悉、熟练使用、还是精通。2.项目经历，其中要包括项目描述、你的角色职责、使用技术、业绩收获等。3.如果你有写博客的习惯，放上你的博客地址，是非常不错的加分项。简历中废话不要太多，要言简意赅，亮点技...
2018-12-12 10:25:52
298
原创 JavaScript 的这个难点，毁掉了多少程序员？
this 适合你吗？我看到许多文章在介绍 JavaScript 的 this 时都会假设你学过某种面向对象的编程语言，比如 Java、C++ 或 Python 等。但这篇文章面向的读者是那些不知道 this 是什么的人。我尽量不用任何术语来解释 this 是什么，以及 this 的用法。也许你一直不敢解开 this 的秘密，因为它看起来挺奇怪也挺吓人的。或许你只在 StackOverflow ...
2018-12-12 09:45:56
114
原创 crepto-js加密用法
CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。目前已支持的算法包括：MD5SHA-1SHA-256AESRabbitMARC4HMACHMAC-MD5HMAC-SHA1HMAC-SHA256PBKDF2散列/哈希CryptoJS是一个纯javascript写的加密类库（下载），我们使用它只需要加入相关的引用即可：散列/哈希...
2018-12-04 16:03:16
485
原创 es6笔记
at()ES5对字符串提供charAt方法，但不能识别码点大于0xFFFF的字符。ES6的at方法，可以识别Unicode编号大于0xFFFF的字符，返回正确的字符。'abc'.at(0) // "a"''.at(0) // ""includes(), startsWith(), endsWith()ES5中的indexOf方法，用来检索字符串中指定字符串出现的位置 而ES6又提供了...
2018-12-03 15:13:58
126
原创 Symbol
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。1.Symbol值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的Symbol类型。凡是属性名...
2018-11-30 13:46:22
155
原创 Generator函数
从计算机角度看，生成器是一种类协程或半协程，它提供了一种可以通过特定语句或方法使其执行对象暂停的功能。Generator函数，返回一个部署了Iterator接口的遍历器对象，用来操作内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束...
2018-11-30 09:55:56
197
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人