前端的小玩意
文章平均质量分 67
qq20004604
前阿里巴巴,高级前端开发
展开
-
摸鱼神器!开发效率提升 1000% 的 Vue 低代码表单组件
目录:一、简介二、本组件和 Element UI 的表单组件进行对比三、架构设计四、详细功能描述4.1 wti-form 全局功能4.2 wti-form 表单元素功能4.3 如何一个 JSON 配置生成 3 个表单五、高度支持自动化测试5.1 天生支持自动化测试5.2 通过简单的配置文件,自动完成自动化测试5.3 更牛逼的自动化测试支持六、未来将添加的功能6.1 可视化生成表单6.2 打通产品经理与前端这条线6.3 纵向拓展:自动生成后端代码6.4 横向拓展原创 2021-09-27 11:30:47 · 2764 阅读 · 2 评论 -
webpack获取图片的真实路径
HTML标签里的图片url我们经常遇见的一种情况是:需要通过foo.js动态添加一个DOM,这个DOM里含有一个有图片路径的东西(比如是img标签);假如foo.js在abc文件夹下,图片bar.png也在abc文件夹下;那么我们想当然的在img的src属性里,写了<img src="./bar.png"/>;然后报错说:http://xx.xx.xx.xx/bar.png not foun原创 2017-10-17 20:38:06 · 2750 阅读 · 0 评论 -
前端的小玩意(16)——利用setter和getter实现数据校验
利用setter和getter实现数据校验写前端和后端的时候,往往要进行数据校验。例如:后端在处理数据之前,需要校验前端传过来的数据和后端要求的数据是否相符,以及是否存在超限问题(大于最大值或者小于最小值,或者字符串长度过长过短)。在常规做法中,我们需要写多个函数,然后一个一个的校验过去,十分麻烦。如果某个属性要在多个地方验证,并且验证条件是统一的,那么有两种写法:比较笨是把一个写好的复制到另外一原创 2017-08-31 00:30:41 · 871 阅读 · 0 评论 -
websocket入门(2)——使用socket.io实现网络对战版五子棋
socket.io基本介绍见我的博客 websocket入门(1)——初识socket.io示例源码见我的github: https://github.com/qq20004604/Backgammon-websocket详细交互逻辑请见下一篇博客:五子棋网络对战版说明1、安装与运行请完整的down下除了node_modules文件夹以外的所有文件,然后在控制台运行 npm install来进行安原创 2017-06-28 11:07:53 · 4134 阅读 · 0 评论 -
websocket入门(3)——网络对战版五子棋交互逻辑
版本号:20170617(可能有点过时)环境服务器端使用Nodejs6.9.4 + Express4.x + Socket.IO 2.02客户端使用socket.io.js名词和变量游戏大厅1. 建立连接后就认为在游戏大厅中;2. 断开连接(比如关闭浏览器或者其他),认为离开游戏大厅;3. 即使在【游戏房间】中,也依然认定其在游戏大厅;4. 通过服务器端onlineUsers(Map结构原创 2017-06-28 11:24:19 · 2491 阅读 · 0 评论 -
websocket入门(1)——初识socket.io
socket.io简述1、基本介绍socket.io是基于websocket技术,实现实时通信功能的技术。简单来说,通过websocket技术,客户端可以和服务器端进行双向实时通信,从而可以实现很多高级特性。这里附一个阮一峰的关于WebSocket 教程,以供深入理解。而socket.io是以websocket技术为主,为了兼容性还带多个降级支持办法,包括:Flash SocketAJAX long原创 2017-06-28 11:04:23 · 2156 阅读 · 0 评论 -
ECMAScript 6(9)——数字的扩展(1)Number对象的扩展和探讨
目录请查看上方0、一句话总结1、二进制数字开头0b,八进制数字开头0o2、更靠谱的类型判断有效数字,NaN,以及整数(es6新增);3、增加了一个极小的常量,用于判断浮点数计算,结果的误差小于这个常量则基本可以认为相等;4、增加了安全范围的最大整数和最小整数常量,以及对他们的判断;5、新增方法全部不会进行隐式转换;6、探讨了一下最大数值和最小数值为何出现;1、二进制与八进制1.1、二进制原原创 2017-04-28 05:52:53 · 1528 阅读 · 0 评论 -
前端的小玩意(16)——在IE7的场景下,获取字符串的第n个字符
字符串var abc = "abc";如果你想获取第一个字符,那么我们一般人的反应是abc[0];但假如你像我一样遇见了IE7,那么对不起,这样是不可以的。原创 2017-03-27 21:58:13 · 1013 阅读 · 0 评论 -
像jQuery那样封装一个ajax
ajax的手写、封装和自定义设置原创 2017-03-07 00:30:33 · 1438 阅读 · 0 评论 -
带你快速玩转canvas(6)导出为base64字符串和画笔的保存
8. 将canvas转为图片可用的base64字符串解释:1. 简单来说,就是将canvas标签的画布内容,转为base64字符串;2. base64字符串作为img标签的src,是可以直接显示为图片的;canvas.toDataURL(type, encoderOptions)1. 返回一个base64字符串;2. type可选,表示图片的转换目标类型,类型是字符串,默认是"image/pn原创 2016-12-20 09:38:10 · 1996 阅读 · 0 评论 -
带你快速玩转canvas(5)画布某时刻某部分画面的存储和恢复
7. 画布的读取和写入解释:1. 简单来说,就是通过一个API保存当前画布某部分区域的图案;2. 然后可以通过另外一个API来恢复保存时的图案,可以恢复到某个指定位置;3. 保存时,返回一个变量,这个变量是一个对象: 他有width和height属性表示画布宽高; 还有data属性,用于保存画布各个像素的状态; data属性是一个数组,其保存原理是通过每个像素的rgba属性来保原创 2016-12-19 09:13:37 · 1701 阅读 · 0 评论 -
带你快速玩转canvas(1)上手和染色
DEMO地址使用canvas绘图绘图前提先有一个canvas的html标签:<canvas></canvas> 标签通常请客下,只有height和width两个宽高属性, 例如:<canvas width='200' height='200'></canvas> 表示这个画布是宽高是200px,他所在的范围,就是画图的范围(超出部分无法绘图)前获取的canvas标签所在的DOM,和正常获取原创 2016-12-05 01:25:17 · 783 阅读 · 0 评论 -
就算萌新也能看得懂的gulp教程(1):①读文件②修改③写到新文件
gulp:先读、再改、最后写入的新手教程,足以解决基本需求原创 2017-10-31 00:02:18 · 3980 阅读 · 0 评论 -
markdown语法教学(for萌新版)
1、标题语法:<h3>标题</h3>说明:可以从h1~h6,越大的文字越大。2、引用 这里是引用文字语法:> 这里是引用文字说明:左边是大于号3、正文正文,第一行, 然后换行失败,他们连写到一起了。然后换行,但是两行有间隔;再换行,但是两行没有间隔。语法:正文,第一行,然后换行失败,他们连写到一起了。然后换行,但是两行有间隔;<br>再换行,但是两行没有间隔。说明:换行分三种原创 2017-11-17 16:25:18 · 472 阅读 · 0 评论 -
性能信息收集(分析、代码、DEMO三合一)
知识储备浏览器加载:浏览器~加载,解析,渲染获取各种时间:Performance APIDEMO 页面http://www.jianwangsan.cn/job/#/performancegithub代码performance-timing浏览器加载过程这里指网页,而不是任何资源。时间线参考下图:【redirect】:什么时候会触发重定向呢?很简单,原创 2018-01-15 00:45:04 · 301 阅读 · 0 评论 -
性能测试新法宝:performance.now()
1、老方法 console.time在之前,如果我们要测试性能,通常是用console.time(str)console.timeEnd(str)可以参照你所不知道的Chrome调试技巧(上):2、获取时间段优点在于:精度比较高(单位小于毫秒),连续两行 console.time('1') 和 ··console.timeEnd(‘1’)··,他也能计算出时间差异;例如我随便试了一次,返回值是原创 2017-12-16 20:08:20 · 878 阅读 · 0 评论 -
你所不知道的Chrome调试技巧(下)
7、格式化代码我们在使用webpack打包的时候,一般会将代码压缩混淆。好处是可以减少代码体积,但坏处是如果打包后报错(比如在测试环境),通过点击console的堆栈跳到代码处,会发现一堆代码无换行杂糅一起,基本无法调试。解决办法chrome浏览器已经提供了,以阿里巴巴的矢量图标库为例。首先打开控制台,进入以下页面(进入方法已经用箭头标注)。 会发现中间区域的代码明显是压缩混淆之后的。格式化代码很原创 2017-11-24 17:25:30 · 3608 阅读 · 0 评论 -
就算萌新也能看得懂的gulp教程(2):利用gulp-concat文件合并,统计一下你写了多少行代码
有没有对自己写了多少行代码很感兴趣?但是自己加来加去是不是感觉很累很麻烦?gulp的插件gulp-concat可以实现文件合并,从而帮你轻松统计写了多少行代码。首先,安装gulp-concat:npm install --save gulp-concat安装好了后,在gulpfile.js中写入以下代码:var gulp = require('gulp');// 合并代码到一个文件(暴力合并,可以原创 2017-11-16 23:29:46 · 1090 阅读 · 0 评论 -
用vue写一个商城的上货组件(简单易懂版,50行js实现效果)
(内含源码和示例)1、先列需求一切开发都是基于需求做的,所以需求先行,根据需求设计功能。需求如下:上货商品有多个属性类别;(例如:颜色、尺寸、型号)每个类别有多个子属性;(例如:白色、绿色、金色)每个商品必然具备每个类别的其中一个子属性;除此之外还有额外属性,如【库存】、【描述】、【价格】等,每个都有;要求属性类别可以无限添加;要求每个属性类别下面的子属性可以无限添加;最后输出所有组合,以及他们每个组合原创 2017-11-14 21:48:15 · 2656 阅读 · 0 评论 -
你所不知道的Chrome调试技巧(上)
0、前注英文原文本文基于译文,在原有基础上进行增强,根据我个人了解,额外加了很多内容。默认是基于chrome来进行调试的,如果是其他浏览器,不一定能支持(特别是IE)1、显示堆栈调用 console.trace(flags)个人感觉这个用的也比较少。原因在于如果需要捕捉堆栈,一般是出错的时候,但出错的时候抛错会自动显示堆栈。使用场景:在你发现有一个函数fn1被执行,但不能确定是谁调用了fn1;原创 2017-11-21 00:14:42 · 4169 阅读 · 0 评论 -
利用html和css做【雷达】效果
1、实现原理外层套一个div,用于作为参考定位。中间层作为雷达旋转的容器,因为雷达效果是以屏幕中间(这里设置为外层div的中间),进行360度旋转,因此旋转的是这个div。内层用于实现雷达的样式,需要渐变,但是单纯的渐变和雷达效果有区别,因此还需要旋转,并且被父级div遮罩住部分,才能实现出雷达所表现的样式。2、实现代码<!doctype html><html lang="en"><head>原创 2017-11-15 17:15:19 · 3460 阅读 · 0 评论 -
获取当前经纬度坐标
封装好的代码如下:function getPosition () { return new Promise((resolve, reject) => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { let latitude原创 2017-11-15 15:56:46 · 11390 阅读 · 1 评论 -
移动端1px解决方案
理论知识:1、以iphone6为例,375px宽。也就是说,假如你写一个div的css的width为375px,他就会撑满屏幕;2、DPR:以iphone6为例,DPR为2。也即是说,他实际是在用4个像素(2x2)在显示你在css中写的1px像素点;3、也就是说,iphone6虽然是375px宽,但是他实际x轴的像素点是750(375px * 2DPR);4、那么假如你需要显示1px宽的线条,只需要原创 2017-11-13 17:41:07 · 1491 阅读 · 0 评论 -
带你快速玩转canvas(3)贴个图片,写点字
5. 将图片绘制到画布之上解释:1. 简单来说,就是将一张图的某个区域,画到画布上的某个区域;2. 和ctx.fillStyle = pattern不同的是,pattern是将图片作为背景,该背景位置是固定的,画图只是显示那背景某个区域;3. 而本方法画图是取图的全部/一部分(比如400x400的,取他(x:200,y:250,width:50,height:100)区域的图;4. 然后放在画原创 2016-12-15 18:38:05 · 1087 阅读 · 0 评论 -
带你快速玩转canvas(8)非常用API的说明集
10. API简单说明解释:1. 写这个的目的只是熟悉API的功能,因此不会去像上面那样写DEMO和一一验证;2. 只写API和API的功能,具体请参照MDN;3. 或许存在兼容性问题,用的时候请注意;4. 不保证完全正确,有些只是根据经验推测;https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D“原创 2016-12-21 17:26:27 · 826 阅读 · 0 评论 -
从零开始学_JavaScript_系列(27)——myblog的优化【1】样式表分离、localStorage
myblog的建立参照:http://blog.csdn.net/qq20004604/article/details/52019904本来打算今天写的轮播图,不过突然看到localStorage,一时兴起先搞这个了。下次再写轮播图吧【1】全局样式和独立样式的分离我将样式表分割为全局表和独立表; l 在全局的样式里,是一些通用的样式,他们的特点是复用率高,例如设原创 2016-08-10 00:12:15 · 1904 阅读 · 1 评论 -
前端的小玩意(9.4)——做一个仿360工具箱的web页面(自动生成所有图标,对图标添加响应逻辑)
前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)http://blog.csdn.net/qq20004604/article/details/52216203前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)http://blog.csdn.net/qq20004604/article/de原创 2016-08-19 01:17:13 · 3600 阅读 · 0 评论 -
前端的小玩意(9.3)——做一个仿360工具箱的web页面(我的工具里的模板和样式)
前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)http://blog.csdn.net/qq20004604/article/details/52216203前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)http://blog.csdn.net/qq20004604/article/details/52原创 2016-08-17 23:39:19 · 1564 阅读 · 1 评论 -
前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)
上一篇链接:http://blog.csdn.net/qq20004604/article/details/52216203DEMO:http://jianwangsan.cn/toolbox(二)全部工具里面的按钮和样式我将他拆成五部分: 第一部分是上面的大按钮那一排;第二部分是小按钮;第三部分是一条颜色很淡的线,他原创 2016-08-17 00:03:30 · 4313 阅读 · 1 评论 -
前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)
需求:①写一个web版的360工具箱,示意图如下:(见原文)效果网址:http://jianwangsan.cn/toolbox原创 2016-08-16 00:41:12 · 2994 阅读 · 0 评论 -
前端的小玩意(4)自定义checkbox或者radio的外观
原理:通过隐藏原有的(调透明度和绝对定位),然后用一个新的图标来覆盖上去CSS代码: .radio { /*这个描述的是输入框的基本样式,透明,绝对定位,浮动在最下*/ opacity: 0; position: absolute; /* z-index: -1; overflow: auto; 我原创 2016-06-21 09:59:33 · 958 阅读 · 0 评论 -
前端的小玩意(3)禁止元素被选中
(28)禁止元素被选中在css的样式表里,添加这样属性(可兼容所有浏览器){ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}关于IE10的:h转载 2016-06-21 09:55:18 · 565 阅读 · 0 评论 -
前端的小玩意(5)——用dojo写的二级下拉菜单自动添加功能
先上DEMO,虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑( ̄Д  ̄)┍这两个优化后会好很多,毕竟美观不是我的特长嘛DEMO链接:http://download.csdn.net/detail/qq20004604/9568685(83)二级下拉菜单①过程描述:【1】数据来源:一个数组,具体格式为:var dataArr = [{原创 2016-07-06 14:20:58 · 1293 阅读 · 0 评论 -
前端的小玩意(2)jQuery的选择器大全
(34)选择器①普通选择方法,略 ②选择其中的c,要求是b里的c 方法:$(".a .b .c")关键之处是.a、.b、.c之间要有空格。③下面转一个帖子: $("#myELement") //选择id值等于myElement的元素,id值不能重复在文档中只能有转载 2016-06-17 14:50:52 · 630 阅读 · 0 评论 -
前端的小玩意(1)input 只允许输入整数 + 用逗号进行三位分割
(34)将输入框数字,每3位用逗号分隔输入框的值为this.valueJS代码:var val = this.value.toString();var length = val.length;for (var i = 1; i < length / 3; i++) { var temp = val.slice(0, -4 * i + 1); val = val.re原创 2016-06-17 14:35:05 · 7843 阅读 · 0 评论 -
前端web资源word格式汇总
更新日期2016/8/6网易云课堂之HTML、CSS(原创带心得) http://download.csdn.net/detail/qq20004604/9594279网易云课堂之DOM编程艺术(原创带心得) http://download.csdn.net/detail/qq20004604/9594285原创 2016-08-06 18:50:15 · 1336 阅读 · 0 评论 -
前端的小玩意(9.5)——做一个仿360工具箱的web页面(完结篇,可以跑起来的工具箱)
前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)http://blog.csdn.net/qq20004604/article/details/52216203前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)http://blog.csdn.net/qq20004604/article/deta原创 2016-08-23 14:39:55 · 2149 阅读 · 0 评论 -
前端的小玩意(8)——旋转的盒子(纯CSS动画效果)+可自由拖动(js)
效果是一个旋转的盒子,他会展开六个面,展开结束后,会旋转,鼠标移动上去会变色;demo网址:http://jianwangsan.cn/boxDemo原创 2016-08-13 22:08:01 · 2430 阅读 · 0 评论 -
带你快速玩转canvas(7)保存画笔状态和恢复画笔状态
9. 保存画笔状态和恢复画笔状态解释:1. 简单来说,就是保存当前ctx设置的各种属性,在需要时,可以恢复到保存时的属性;2. 保存api是无返回值的,这说明不能保存多种不同的状态;3. 只能恢复一次,如果恢复后还需要保存,则需要再次调用保存的api;ctx.save()1. 保存的api,无返回值;2. 保存状态只能恢复一次;3. 也可以说是保存ctx的上下文环境;4. 根据MDN的说原创 2016-12-21 17:22:52 · 2704 阅读 · 0 评论 -
带你快速玩转canvas(4)实战——写个折线图
需求:1. 自适应父Dom的宽高,但设置canvas元素的最小宽高,小于最小宽高则设置父Dom带滚动条。2. 窗口大小变化时,重新绘制折线图,以适应新的大小,保证折线图一直以最好效果展现;3. x轴的坐标尺度为时间,单位是月份,数据类型是数组,数组元素是字符串,格式类似"2016/12"这种,为了方便,假设x轴固定有12个刻度,初始刻度为x=0的位置;4. y轴尺度为数字,要求跟随数据的最大原创 2016-12-15 20:30:23 · 2324 阅读 · 0 评论