自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(103)
  • 资源 (3)

原创 实用库

资源预加载库 preload.js页面滚动动画 wow.js

2020-09-18 16:15:46

原创 前端异常处理

捕获异常js同步异常js异步异常资源加载异常Promise异常try…catch…√√window.onerror√√window.addEventListener(‘error’)√window.addEventListener(‘unhandledrejection’)√try catch捕获当前调用栈中的错误,因此无法捕获异步异常(抛出错误时try catch调用栈已经执行完毕退出。同时捕获后,异常不会向上继续抛出 ...

2020-08-11 18:33:25 31

原创 通过二进制获取图片格式以及宽高

通过把文件的二进制数据转为16进制字符转再进行相应的判断获取图片格式以及宽高等二进制转字符串通过readAsBinaryString转换blob对象为二进制字符串通过charCodeAt转换二进制字符串为Unicode码将Unicode码转换为16进制async blobToString(blob){ return new Promise(resolve=>{ const reader = new FileReader() reader.o.

2020-07-14 18:45:38 202 1

原创 深入理解浏览器垃圾回收机制(V8)

文章目录栈堆堆的垃圾回收优化效率栈定义栈用来在函数执行时存储保存执行上下文环境,我们一般也称调用栈,如基本类型的变量,引用类型的引用地址等都保存在栈中。执行到当前函数时进行入栈,执行完毕进行出栈。回收方式有一个记录当前执行状态的指针(称为 ESP)指向活动栈,函数执行完毕,esp下移到后一节点,销毁当前函数执行上下文。新的函数执行上下文入栈直接覆盖掉销毁的空间即可 .function test() { const a = { name: 'a' }; function showNam

2020-06-18 17:47:53 68

原创 一文搞定babel转换

babel转换流程code转换为AST => 遍历AST树、进行修改 => 还原为codebabel结构@babel/core AST转换的核心@babel/cli 打包工具@babel/plugin* Babel 插件机制,Babel基础功能不满足的时候,手动添加些@babel/preset-env 预设插件集,减少配置各类插件@babel/polyfill 把浏览器某些不支持API,兼容性代码全部导入到项目,不管你是不是用到,缺点是代码体积特别大@b

2020-06-10 18:40:17 50

原创 webpack热更新思维图

2020-05-20 18:16:06 37

原创 Vue组件文档自动化生成库

一个可以提供自动化文档的生成,并提供组件预览,这个库叫做 Vue Styleguidist使用参考 使用Vue Styleguidist编写组件文档

2020-05-20 12:22:12 465

原创 记一次web性能优化实战

效果展示优化前优化后可以看到优化前有明显的延迟,详细信息才出现。优化后详细信息基本秒现。问题分析出现数据显示有明显的延时的情况,我们分析大方向可能有接口缓慢网络问题前端问题渲染问题:渲染节点过多、重排、重绘等js阻塞页面渲染原因定位1、查看network最大值784ms,因此可以排除接口和网络问题2、使用performance记录一次过程可以看到js耗费将近14s。此处可能由于performance记录需插入很多记录钩子所以比正常范围时间耗费要放大很

2020-05-12 17:26:25 80

原创 Vue实例化过程

参考:Vue原理解析

2020-03-23 17:14:22 189

原创 css层叠上下文和层叠水平

页面中当元素发生层叠时如何显示。为何有的元素明明写在后面却被前者覆盖住了?为何z-index设置很大了,还是不显示?这些涉及到css中的层叠上下文,层叠水平等层叠上下文类似块级格式化上下文,是一个封闭的空间,用来限制内部元素的层叠水平在当前范围活动的。在同一个层叠上下文中,(元素、层叠上下文)的层叠水平按一定的规则排序、显示。创建方式: 根层叠上下文 天生就具有的 z-index...

2020-03-20 09:59:34 57

原创 强类型转换

字符串与数字的隐式强类型转换ES5规范11.6.1节,如果某操作数是字符串或者能够通过以下步骤转换为字符串的话,+将进行拼接操作。如果其中一个操作数为对象(包括数组),则先调用ToPrimitive抽象操作,该操作在调用[[DefaultValue]],以数字作为上下文。ToPrimitive先调用valueOf(),再Tostring转换为字符串String()直接调用Tost...

2020-03-11 18:16:21 89

原创 面向切面编程

面向切面编程也称AOP,主要作用是将与核心业务逻辑无关的功能抽离出来,以动态织入的方式掺入业务逻辑模块中。如日志记录功能等。可以保持业务逻辑的纯净,高内聚性;便于复用日志模块等装饰器模式给对象动态添加职责(即用即付)的方式为装饰器模式实现一个插件式的表单验证:校验+提交一般实现:function formSubmit(obj){ const {tel,name} = obj if...

2020-01-10 18:20:50 48

原创 vue中编写通过方法调用的组件

通过函数调用的组件,常见的toast提示框,loading等创建文件目录结构|---loading |---Loading.vue |---index.js编写index.js思路创建组件构造器实例化组件挂载到一个新建的div上新增至body页面上通过实例对组件进行代理操作import Vue from 'vue'import LoadingComp...

2020-01-10 10:03:16 219

原创 使用vue-cli3搭建typescript移动端

安装vuecli3npm install -g @vue/cli# ORyarn global add @vue/cli创建项目vue create project-typescript手动选择特性选择babel、ts、router、vuex、css预编译器这里我们使用基于类的组件选择sass编译器eslint规则独立的配置文件配置在App.vue中新增路...

2020-01-08 16:44:28 86

原创 前端单元测试

文章目录测试类型unit测试E2E 测试单元测试原因vue项目中进行单元测试安装环境编写测试用例结论测试类型unit测试主要对组件进行测试。数据的有效性测试关注组件本身。vue 单元测试的范围仅限于数据流动是否正确,逻辑渲染是否正确(v-if v-show v-for),style 和 class 是否正确,我们并不需要关系这个组件在浏览器渲染中的位置,也不需要关系对其它组件会造成...

2019-10-16 18:09:01 147

原创 js运行流程

js引擎处理js的过程同传统编译语言的代码编译大致相同文章目录流程预编译阶段声明提升let、const阻止提升的原因LHS与RHS查找类型流程步骤传统编译语言JS引擎1词法/语法分析词/语法分析2解析生成AST解析生成AST3代码生成预编译4执行执行预编译阶段js代码是运行时编译(编译发生在代码执行前几微秒),即预编译完立即...

2019-08-29 10:11:44 373

原创 vue项目设置eslint规则校验

安装npm install --save-dev eslint eslint-plugin-vue配置"extends": ["plugin:vue/recommended"]解析器vscode安装eslint插件配置vscode自动fix设置保存时格式化"eslint.autoFixOnSave": true,扩展检查.vue文件关闭编辑器自动保存格式化,避免冲突...

2019-08-13 14:47:24 12412

原创 weex、ReactNative

weexWeex .we 文件 --------------前端(we源码)↓ (转换) -------------------前端(构建过程)JS Bundle -----------------前端(JS Bundle代码)↓ (部署) -------------------服务器在服务器上的JS bundle -------服务器↓ (编译) ------------------...

2019-08-13 11:17:27 177

原创 SSR

前后端分离后单页面应用盛行,出现了服务端渲染的说法,其能更好的SEO什么是服务器端渲染 (SSR)服务器将组件和获取到的数据解析生成html字符串,发送给客户端。过程同之前的php、java等的全栈开发,使用模板引擎,获取数据后解析为html字符串后,发到客户端展现。服务器渲染的 Vue.js 应用程序,可以同时在服务器和客户端上运行。为什么使用服务器端渲染 (SSR)更好的 ...

2019-08-09 10:54:08 2252

原创 浏览器运行流程

参考文献:1、图解浏览器的基本工作原理2、前端文摘:深入解析浏览器的幕后工作原理

2019-08-07 11:12:22 55

原创 css选择器权重

css权重分为5级第一级:内联样式<div style=""></div> 权重 1000第二级:id选择器 #开头 权重0100第三级:class选择器 权重0010第四级:标签选择器、伪类权重0001第五级:通用选择器(*),子选择器(>)和相邻同胞选择器(+)无权重0000示例<p class="p1">这是内容</p>...

2019-07-19 16:07:28 78

原创 vue-cli3 使用postcss-plugin-px2rem

postcss-plugin-px2rem是可以将px自动转化为rem的postcss插件安装 npm i postcss-plugin-px2rem --save -devpackage.json中添加配置(组件中px转rem才生效)在package.json、package.json、package.json中设置很重要"postcss-plugin-px2rem": { "r...

2019-07-17 18:08:37 2449

原创 Vue相关开源项目库集合

git地址:https://github.com/opendigg/awesome-github-vue/blob/master/README.md

2019-07-17 17:55:22 35

原创 著名的img底部3像素问题

img标签在HTML5和HTML4.0.1的严格模式渲染的时候,下面会有几像素的空白。原因img标签默认为inlineinline元素一般为文字,小写字母g、y底部会多出一段,距离和字体大小有关解决方法设为块级元素img { display: block;}字体设为0.img-content{font-size:0}改变基线img { vert...

2019-06-21 11:56:24 566

原创 js与或赋值原理

或赋值a=b||cb默认值c默认值a取值truetruebtruefalsebfalsetruecfalsefalsec从左往右只要有一个正确后面则不执行 执行到哪则返回哪与赋值a=b&&cb默认值c默认值a取值truetruectruefalsecfal...

2019-06-21 10:28:34 286

原创 git 忽略配置文件

这里写自定义目录标题git的三种忽略文件方法方式对比assume-unchangedskip-worktreegit的三种忽略文件方法方式对比方法使用方式适用范围.gitignore根目录创建.gitignore文件全部忽略assume-unchangedgit update-index --assume-unchanged开发人员不会更改文件ski...

2019-06-12 11:09:13 760

原创 commonjs、AMD、CMD

webpack运行在node.js上,所以模块化规范也同node.js 使用的是commonjs规范commonjs规范内容一个文件就是一个模块,模块间作用域互不影响模块的定义 module.exports模块的引用 require(‘标识符’)模块标识符服务端commonjs规范为同步加载,适用于服务端,在浏览器中js加载会阻塞页面渲染,因此同步不适用浏览器端产生了amd(...

2019-05-21 18:28:52 43

原创 vue 视图、计算属性、watch数据实现绑定原理

通过数据劫持set发布消息,通过watcher进行订阅消息,从而触发update代码1export class Observer { ... constructor (value: any) { this.value = value this.dep = new Dep() this.vmCount = 0 ... }代码2Object.d...

2019-04-24 19:06:36 163

原创 HTML5 Web存储-localStorage、sessionStorage

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速.这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用。存储方式键/值对通常以字符串存储localStorage.setItem('test',{name:123})localStor...

2019-04-19 18:29:34 72

原创 栈(堆栈)、队列与数组、链表的关系与区分

数据结构:是指相互之间存在一种或多种特定关系的数据元素的集合。数据存储结构:它是计算机的一个概念,简单讲,就是描述数据在计算机中存储方式的学科;常用的数据存储 方式就两种:顺序存储,非顺序存储!数据结构之栈、队列栈也可以称为堆栈是一种先进后出的数据结构 js中的实现Array.push()、Array.pop()队列是一种先进先出的数据结构 js中的实现Array.push()、...

2019-04-01 21:48:03 880

原创 网络协议之TCP与UDP

TCP三次握手TCP四次挥手参数详解TCP 三次 四次握手详解SYN:请求建立连接ACK:确认接收到请求FIN:请求关闭连接seq:数据被拆成多个包 当前发送包的序列号ack:下一个待接收包的序列号总结三次握手原因防止网络原因造成建立多次连接;两次握手,服务端不知道SYN是否是有效的,三次握手,客户端会回复第二次握手SYN是否有效,如一直没等到第三次握手,则认为无效...

2019-03-31 00:09:16 184

原创 debounce函数去抖实现

限制函数调用频率,快速点击时,限制其一定时间内只触发一次事件,如ajax提交,连续点击提交按钮,会发送多次请求,使用去抖可以避免多次重复请求简介debounce(fun, delay, immediate)当调用函数n秒后,才会执行该动作,若在这n秒内又调用该函数则将取消前一次并重新计算执行时间原理参数func - 函数delay - 延时immediate - 立即执行...

2019-03-27 15:38:39 498

原创 Javascript函数参数传递

js中所有函数参数传递都是值传递堆内存和栈内存栈内存为自动分配的内存空间,它由系统自动释放;堆内存则是动态分配的内存,大小不定也不会自动释放。js数据类型值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(es6新增)。引用数据类型:对象(Object)、数组(Array)、函数...

2019-03-08 10:18:06 358

原创 canvas旋转图片

最终想要的结果1、移动画布中心点ctx.translate(x,y);//设置画布上的(0,0)位置,也就是旋转的中心点此时旋转画布,会以(x,y)为中心点3、所以我们需要将图片中心点也转移到(x,y)ctx.drawImage(img,-img.width/2,-img.height/2);//把图片绘制在旋转的中心点,4、旋转角度ctx.rotate(90*Math....

2018-12-08 00:30:50 2273

原创 百度OCR识别手写签名识别率不高解决

文章目录手写接口使用识别率相关示例相关资源手写接口使用1、按操作手册申请服务拿到key2、获取token3、function getWord(img){ var data = { "image": img } console.log(data) axios.post('h...

2018-12-03 17:17:41 3788

原创 CSS规范化oocss、BEM、SMAcss

oocss尽可能的抽离出共用的css,一个类中写多个样式变为一个类对应一个样式 .block{ float:left; color:red; } // 变为 .float-left{ float:left; } .warning{ color:red; }BEM(Block,Element,Modifier)Block(块) Element(元素) Modifie...

2018-11-28 17:44:37 121

原创 原生js现实canvas手写板

文章目录效果源码实现html部分js部分使用方法注意事项:轨迹偏移微信中手写时会造成下滑显示页面来源效果源码实现html部分 <section class="write-content"> <img src="../i

2018-11-24 12:47:16 1759

原创 LICEcap-动态截屏工具

官方下载地址https://www.cockos.com/licecap/使用方法右下角直接record开始录屏

2018-11-20 17:33:46 298

原创 原生js实现字幕滚动

使用css和原生js实现的字幕滚动效果,无缝衔接效果原理容器设置固定宽度,超出部分隐藏,滚动部分绝对定位并通过定时器改变位置实现html部分<div class="scroll"> <span>这里是要现实的滚动内容......</span> </div>css部分.scroll { width: 400...

2018-11-20 17:05:19 1798

原创 前端兼容性检测

链接地址https://caniuse.com/

2018-11-20 14:59:20 576

商品荐购系统

商品荐购系统的功能主要包括 1.用户或会员操作功能: (1)用户注册、用户登录等; (2)商品搜索、比较、排名、推荐等; 2.管理员操作功能: (1)推荐商品采纳、会员积分、会员升级; (2)商品类别维护、类似商品信息统一等; (3)商品搜索、比较、排名;

2014-07-04

webpack一键使用原配置项打包

shell脚本 git管理源码时,开发配置项和发版配置项不一致时,开发时设置开发配置项不被跟踪,发版时使用原配置项发版,不用手动去一个个修改

2019-06-14

MarkMan破解版

高效的设计稿标注、测量工具。 马克鳗使用起来也是非常简单,双击添加测量,单击改变横纵方向等等功能,基本都是一键完成。 马克鳗是,可以跨平台使用,减少了在不同平台使用产生的一系列问题。

2018-11-20

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除