前端开发
文章平均质量分 67
炒酱
前端开发
展开
-
async/await 的错误捕获
详细介绍了几种常用的捕获async/await错误的方式,最后以error first的风格抽成一个统一的函数。原创 2020-03-19 08:29:34 · 7361 阅读 · 0 评论 -
划水神器--在浏览器地址栏和标签页title里面玩俄罗斯方块
划水神器–在浏览器地址栏和标签页title里面玩俄罗斯方块效果如图:在线体验1. 原理URL地址栏中玩:使用window.location.hash动态修改页面的hash值标签页中玩:使用document.title动态修改页面的title使用一个定时器,产生方块下落的效果,监听键盘按键事件,修改方块形态、位置2. 依赖的库为了开发方便,可以使用这两个库:tetris-e...原创 2019-11-18 14:53:22 · 683 阅读 · 0 评论 -
使用Vue做一个可自动拼图的拼图小游戏(一)
背景以及最终效果随着几个项目的提测,也闲下来了,恰好玩了一把拼图游戏,于是突发奇想打算自己写一个试试。最终效果如下图:实现的功能有:普通拼图的功能自动拼图本部分是这篇文章的第一部分,主要讲的是实现普通拼图的功能。原理相信拼图的玩法大家一点都不陌生,就是点击一个非空的块,如果它的周围有空的块,被点击的块就会往空块的方向移动。如果最后的排列是[1,2,3,4,5,6,7,8,0]...原创 2019-03-27 16:06:47 · 11368 阅读 · 0 评论 -
Vue组件-爬取页面表格中的数据并保存为csv文件
背景实际开发过程中需要将前端以表格形式展示的数据保存为csv格式的文件,由于数据涉及到的种类比较多,格式化都是放在前端进行的,所以后端以接口下载的形式返回csv文件会比较麻烦,于是想着直接写个组件爬取页面中表格内的数据。开发框架:Vue+Webpack+Element-UI实现分析首先分析一下涉及到的知识点,其实涉及到的知识点也比较简单:获取页面节点信息获取页面数据了解csv...原创 2018-12-17 15:37:43 · 7695 阅读 · 1 评论 -
VUE回到顶部组件,使用requestAnimationFrame
这篇文章是18年就写的了,那时候element-ui还没有回到顶部组件,我就弄了一个,现在官网已经有了。想直接使用的话可以使用官网上的,但是官网的是使用setInterval写的,我就顺便改一下这篇文章,使用requestAnimationFrame弄一个原创 2018-12-14 17:18:43 · 9973 阅读 · 12 评论 -
JavaScript中数组排序sort深入理解(Array.prototype.sort)
疑问最近在看算法书的时候看到C++中的sort方法,书中介绍是使用的快速排序。于是想起来自己天天都在写的JavaScript中的sort排序,它使用的是什么排序算法呢?各个浏览器使用的是同一种排序算法吗?带着问题,打开了ECMA官方规范ECMA 2015ECMA 2016ECMA 2017规范中并没有写明具体使用的排序算法,只是说了JavaScript的sort方法(Array.p...原创 2018-11-28 17:31:52 · 3683 阅读 · 0 评论 -
Promise实现原生JS的Ajax请求(后端使用Node.js)
最近在学习ES6的相关知识,看完了Promise,于是打算用Promise实现一个原生JS的Ajax例子,顺便复习一下Node的相关知识。说搞就搞,先写后端项目目录结构后端使用的是Express框架,具体步骤如下:npm init初始化,这个就一直下一步就行了,需要注意的是项目文件夹名不能为中文。npm install express --save使用 npm 安装 e...原创 2018-11-30 15:04:13 · 622 阅读 · 0 评论 -
判断两个json是不是相等的
JavaScript判断两个json是不是相同的原理暴力的递归遍历对比,遇到不相等就return falsecode:let jsonObjA = { "Name": "MyName", "Company": "MyCompany", "Infos": [{ "Age": "100" }, {原创 2018-11-05 19:10:06 · 3239 阅读 · 0 评论 -
彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现
一、基于鼠标事件的拖拽原理——onmousedown、onmousemove、onmouseuponmousedown该事件会在鼠标按键被按下时触发支持该事件的HTML标签: <a>, <address>, <area>, <b>, <bdo>, &lt原创 2018-11-01 16:27:58 · 43923 阅读 · 4 评论 -
使用Vue做一个可自动拼图的拼图小游戏(二)
背景以及最终效果在上一篇文章中我们已经写完了一个可以正常玩的拼图小游戏,但是这还没有结束,我们还要接着试一下让拼图游戏可以自己完成拼图。最终效果如下图:本部分是这篇文章的第二部分,主要讲的是实现自动拼图的功能实现。原理这里开始就涉及到一些算法的知识了,不过不难。拼图游戏其实就是:N数码问题,而我写的是3*3的,所以就是八数码问题的求解。总结一下,我们需要做的事包括以下几个:判断八...原创 2019-03-28 15:26:55 · 8917 阅读 · 0 评论 -
Vuex详细介绍
1. 什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这是官网的说法,其实很简单:就是一个加强版的data!在单页应用中会有一个data函数,里面就存放了当前页面的一些数据。比如:<template> <div> <p>{{num}}</p> </div></te...原创 2019-05-22 18:39:05 · 156 阅读 · 0 评论 -
浏览器缓存详细介绍
一、整个流程过一遍 我们假设浏览器在请求一张图片:浏览器会检查这张图片的HTTP头部字段,看看这张图片是不是满足强缓存,如果满足的话,浏览器会直接从本地缓存里面将图片取出来,不会向服务器发送请求。如果第一步的强缓存没有满足的话,浏览器会向服务器发送一个请求,服务器会检查该图片的HTTP头部字段,看看是不是满足协商缓存,如果满足的话,服务器会返回一个没有相应体,只有响应...原创 2019-05-29 19:13:41 · 347 阅读 · 0 评论 -
WEB性能(6)--经典最佳实践
经典最佳实践1. 减少DNS查找每一次主机名解析都需要一次网络往返,从而增加请求的延迟时间,同时还会阻塞后续的请求。2. 重用TCP连接尽可能使用持久连接,以消除TCP握手和慢启动延迟。3. 减少HTTP重定向HTTP重定向很费时间,特别是不同域名之间的重定向,更加费时;这里面既有额外的DNS查询、TCP握手,还有其他延迟。最好的重定向次数为零。4. 使用CDN(内容分发服务)把数...原创 2019-10-02 11:00:54 · 256 阅读 · 0 评论 -
WEB性能(7)--XMLHttpRequest
一、XMLHttpRequestXMLHttpRequest(XHR)是浏览器层面的API,可以让开发人员通过JavaScript实现数据传输。XHR是在Internet Explorer 5 中首次亮相的,后来成为AJAX(Asynchronous JavaScript and XML)革命核心技术,我今天几乎所有Web应用必不可少的基本构件。XHR诞生以前,网页要获取客户端和服务器的任何状...原创 2019-10-02 11:03:38 · 327 阅读 · 0 评论 -
Webkit底层原理(1)--Webkit架构和模块
一、Webkit架构Webkit的一个显著的特征就是它支持不同的浏览器,因为不同浏览器的需求不同,所以在Webkit中,一些代码可以共享,但是另一部分是不同的,这些不同的部分称为Webkit移植(Ports)。Webkit的整体结构如图:图中最下面是操作系统,Webkit可以在不同的操作系统上工作。不同浏览器可能会依赖不同的操作系统,同一个浏览器使用的Webkit也可能依赖不同的操作系统,例...原创 2019-10-02 16:21:52 · 1163 阅读 · 1 评论 -
Webkit底层原理(2)--资源加载和网络栈
资源加载和网络栈使用网络栈下载网页和网页中的资源是渲染引擎工作的第一步,也是非常耗时间的一步。一、Webkit资源加载机制1. 资源网页本身就是一种资源,例如图片、视频等。HTML支持的资源主要有以下类型:HTML:HTML元素;JavaScript:JavaScript代码,可以内嵌在HTML文件中,也可以单独以文件形式存在;CSS:层叠样式表,可以内嵌在HTML文件中,也可以...原创 2019-10-03 13:52:52 · 287 阅读 · 0 评论 -
Webkit底层原理(3)--HTML解释器
1. 解释过程HTML解释器的工作就是将从网络或本地磁盘获取的HTML网页和资源从字节流解释成DOM树结构。如下图:图中将这一过程描述得很清晰:首先是字节流,经过解码之后是字符流,然后通过词法分析器会被解释成词语(Tokens),之后经过语法分析器构建成节点,最后这些节点被组成一颗DOM树。2. 词法分析在进行词法分析之前,解释器首先要做的就是检查该网页内容使用的编码格式,以便后面使用合...原创 2019-10-04 14:58:18 · 877 阅读 · 0 评论 -
Webkit底层原理(4)--DOM事件机制和Shadow DOM
一、DOM事件机制1. 事件的工作过程事件在工作过程中使用两个主体,第一个是事件(event),第二个是事件目标(EventTarget)。每个事件都有属性来标记该事件的事件目标。当事件到达事件目标的时候,在这个目标上注册的监听者(EventListeners)都会被触发调用,当然这些监听者的调用顺序是不固定的,所以不能依赖监听者注册的顺序来决定你的代码逻辑。事件处理最重要的部分就是事件捕获...原创 2019-10-05 18:15:43 · 595 阅读 · 0 评论 -
手机H5页面(文字滚动、适配各种屏幕、jQuery ajax包含cookie)
###手机H5页面###文字滚动使用li标签,通过改变margin-top实现向上滚动。代码:js: carousel: function() { var items = $('.roll').find('li'); console.log(items); var $itemOne = items.eq(0); var margin_top = 0; ...原创 2018-09-30 18:27:36 · 1735 阅读 · 0 评论 -
使用js对在网页中打开Excel表格,并进行自动求和操作。
js-ExcelJs is used to operate Excel tables and realize automatic summation.使用js对在网页中打开Excel表格,并进行自动求和操作。####使用的插件:js-xlsx####代码地址:https://github.com/usecodelee/js-Excel####兼容性如图:###操作演示:初始页面:...原创 2018-09-25 22:29:49 · 12191 阅读 · 2 评论 -
sublime VI编辑器 十分钟熟练掌握各种命令
大家都知道,写代码的时候总有许多繁琐的操作,换行、删除一行、复制一行、去到行首、行尾等等。通常情况下是使用鼠标直接点击,这会大大的降低我们的开发效率,因此大家想到vi编辑器,而且sublime刚好可以支持vi兼容模式。下面我就从安装插件到实际应用给大家详细的讲解一下。原创 2017-10-22 15:28:18 · 1179 阅读 · 0 评论 -
常见的html、css以及javascript兼容方案
浏览器兼容性一直是一个前端开发人员不可避免的大问题,这篇文章主要列举了html、css以及javascript中一些常见的兼容性问题以及对应的解决方案。原创 2017-11-04 10:50:40 · 23931 阅读 · 0 评论 -
js实现截图并保存图片(html转canvas、canvas转image)
js实现截图并保存图片在本地(html转canvas、canvas转image)一、html转canvas需要的库html2canvas.js和canvas2image.js话不多说,直接上代码!html&amp;amp;amp;lt;h2&amp;amp;amp;gt;原始HTML&amp;amp;amp;lt;/h2&amp;amp;amp;gt;&amp;amp;amp;lt;div st原创 2018-07-23 15:16:43 · 82424 阅读 · 23 评论 -
ESLint报错解决方案(error: No ESLint configuration found)
ESLint使用的时候报错:error: No ESLint configuration found在项目部署中出现报错error: No ESLint configuration found,编辑器vscode。解决方案:造成这种报错的原因是因为项目中缺少.eslintrc.js文件。添加上就可以了。添加.eslintrc.js文件方法:手动添加,直接手动添加.es...原创 2018-07-18 11:14:34 · 83421 阅读 · 3 评论 -
ESLint配置信息完整版
ESLint配置信息完整版说明:"no-undef": 0,和"no-undef": 'off',一样,表示关闭该功能"no-undef": 1, 表示仅提示"no-undef": 2, 表示报错配置信息(来自网络)“no-alert”: 0,//禁止使用alert confirm prompt“no-array-construc转载 2018-07-18 11:16:01 · 1476 阅读 · 0 评论 -
div拖拽实现延伸
div拖拽原理:鼠标事件mousedownmousemovemouseup 注意事项:被拖动的div的position属性值一定是absolute。onmousedown事件需要在window.onload时加载。如果被拖动的div上有文字会有自带的文字拖动效果,需要将改div上的所有拖动事件绑定在该div上,可以使用setCapture。代码:...原创 2018-07-12 15:00:37 · 13750 阅读 · 0 评论 -
JS自定义右键菜单—复制到粘贴板(jQuery和原生JS实现)
自定义右键菜单——复制到粘贴板需求:鼠标在li标签上点击右键出现菜单,主要是复制等功能屏蔽浏览器默认右键点击事件右键菜单出现在鼠标点击的位置点击屏幕其他位置菜单消失点击之后有回调实现:1、使用jQuery - 右键菜单插件contextMenujquery.contextMenu.js 和 jquery.contextMenu.css, 同时 con...原创 2018-07-13 15:23:07 · 17963 阅读 · 1 评论 -
setTimeout定时器以及部分小知识点
setTimeout定时器难点:按固定格式输出(hh:mm:ss)开始,暂停,开始解决多次点击开始会使定时器速度加快的问题1. 按固定格式输出function formatNumber(num) { return num &lt; 10 ? '0' + num : num;}思路:在每次输出之前格式化一下数据,使用三元运算符,如果小于10就在前面补0...原创 2018-07-26 09:51:18 · 2906 阅读 · 0 评论 -
Object.keys和Object.values
需求,数据格式是这样的,然后使用baidutemplate渲染页面的时候列数未知。数据 var data = {"state":true,"data":{"key":"idd:ast:alldata","data":[{"k0":"2018-05-19&原创 2018-07-30 18:14:15 · 1872 阅读 · 0 评论 -
截取url中的参数(支持截取一个或全部)
截取url中的参数(支持以截取一个或全部)代码:getParamByUrl: function(url, par) { console.log(url); var fileUrl = ''; //文件地址 var listParam = ''; //参数集合 var listParamObj = {}; // var listParamArr =...原创 2018-08-07 09:46:47 · 4843 阅读 · 0 评论 -
统计字符串中字符出现次数(延伸)
统计字符串中字符出现的次数1.简单统计次数returnStrNum: function(str, who) { var strNum = {}; for (var i = 0, l = str.length; i &lt; l; i++) { strNum[str[i]] = (strNum[str[i]] + 1) || 1; } re...原创 2018-08-07 09:47:55 · 901 阅读 · 0 评论 -
特定场景下的数据格式化(根据后台控制格式化的方式)
特定场景下的数据格式化使用biadutemplate边加载边渲染在加载数据之后需要先格式化再渲染,格式化四种数据:日期:需要格式化为yy-mm-dd、yy/mm/dd等金额:整数部分从左到右每隔三位数加一个逗号,保留几位小数整数:从左到右每隔三位数加一个逗号其他:按返回格式输出html:&lt;script id="bdt_list" type="text/h...原创 2018-08-07 14:17:25 · 3395 阅读 · 0 评论 -
表格按列方向上渲染数据
表格按列方向渲染数据需求:如图按两列渲染数据: 如果是一条数据和一个对应的值就不会出现问题。但是如果某一个数据的值有多个,并且需要显示在不同的行的话就会有问题。问题是:会循环出多个td在一行中。解决方案1&lt;tr&gt; &lt;td&gt;m2&lt;/td&gt; &lt;td&gt; &lt;d原创 2018-08-07 14:18:30 · 4211 阅读 · 0 评论 -
Datepicker日期选择器插件
Datepicker日期选择器插件这个插件还是比较简单的,而且样式也比较漂亮,可以自定义选择年月日、年月日时分、年月、时间段选择等等。效果预览:这个插件是基于jQuery和bootstrap的。因此我们需要引入的文件有:bootstrap.min.css或bootstrap.cssbootstrap-datepicker.min.css或bootstrap-date...原创 2018-08-07 14:23:45 · 9396 阅读 · 0 评论 -
知识点:回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式
回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式一、回到顶部方法: 1. 锚点 2. scrollTop 3. scrollTo 4. scrollBy 5. scrollIntoView减速效果: $('#back-to-top').click(function() { var tar...原创 2018-08-03 12:49:27 · 4536 阅读 · 0 评论 -
知识点:匹配字符串中的子串,并让子串红色显示、格式化输出json、元素点击之后hover失效、word-wrap:break-word和word-break:break-all
匹配字符串中的子串,并让子串红色显示、格式化输出json、元素点击之后hover失效、word-wrap:break-word和word-break:break-all五、匹配特定的字符串,让其突出显示 var subStr = "abc"; var reg = new RegExp("(" + subStr + ")", "g");原创 2018-08-03 12:53:05 · 3234 阅读 · 0 评论 -
git中忽略指定文件
git忽略指定文件使用git bash生成.gitignore语句:touch .gitignore在.gitignore中指定需要忽略的文件夹或者文件文件夹(/文件夹名/)文件(文件名)原创 2018-09-25 20:03:05 · 534 阅读 · 0 评论 -
Sprite 从PS切图到具体实现完整过程
CSS雪碧图(sprite)是一种网页图片非常高效的处理方式,它是将页面中包含的零星图片利用PS制作到一张大图中,再结合background-position属性进行定位的的方式实现。原创 2017-10-20 22:17:17 · 12777 阅读 · 0 评论