随笔分类 - JavaScript
摘要:下面这张图一定多看几遍,看不懂的话,请对照下面我的理解,一条条深入分析。 自己对上图的理解: f1,f2是构造函数Foo的实例(这里还可以考察new的过程) f1,f2的原型f1._proto和他们的构造函数Foo的原型对象Foo.prototype指向同一内存地址 构造函数Foo的原型对象Foo.
阅读全文
摘要:效果结尾处可验收。 画线准备 准备一个canvas <canvas id="canvasId" width="1000" height="800"></canvas> 使用pointer事件监听,落笔,拖拽,收笔。 document.onpointerdown = function (e) { if
阅读全文
摘要:如果使用setInterval函数每100ms执行一段代码,中间有一次任务执行时间为1000ms,那么这次任务后会连续执行10次代码吗(即setInterval的任务会堆积吗) 为了测试这个问题,写了下面的代码,测试结果见控制台输出。 <script> startInterval(); //测试se
阅读全文
摘要:项目中一直有一个问题困扰着我,我们的画布可以缩放平移旋转,支持拖拽生成图形,生成手写笔迹,如果用户选择的线条粗细为5像素,那么即使画布缩放过绘制出的线条粗细也应该是视觉上的5px,所以再绘制时赋值给context.lineWidth的值需要一个计算过程(利用canvas当前缩放值来计算出一个值)。
阅读全文
摘要:运行webpack-dev-server的时候,可以正常启动服务,但是Terminal控制台报错,如下: ERROR in ./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:8085 6:16-37 Module not
阅读全文
摘要:今天要说一个很隐晦的东西,一般可能很难碰到,碰到了可能很难解决。就是当我们自己用mousestart,mousemove,mouseup做自定义拖拽效果的时候,如果这个时候配上click就会引发一个拖拽穿透的bug。 mouseup模拟drag与click事件冲突(二维码) 点击上面的链接,用鼠标拖
阅读全文
摘要:我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——(1)平滑曲线。 透明度实现荧光笔 现在我们需要加另外一种画笔效果,带透明度的荧光笔。那可能会觉得绘制画笔的时候加上透明度就可以了。我们来在原来代码上设置 ctx.globalAlpha属性为0.3,或者将strokeStyle设置为rg
阅读全文
摘要:功能需求 项目需求:需要实现一个可以自由书写的小画板 简单实现 对于熟悉canvas的同学来说,这个需求很简单,大致逻辑如下: 1)监听事件pointerdown,pointermove,pointerup 2)标记是否拖拽画线模式变量 isDrawing,在down事件时置为true,up的时候置
阅读全文
摘要:一、概述 FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件。 二、使用 1.FormData对象的操作方法,全部在原型中,自己本身没任何的属性及方法。 1 let for
阅读全文
摘要:computed(计算属性) 计算属性该属性里面的方法必须要有return返回值,这个返回值就是(value值)。 有几个关键点 1) 计算后属性不需要在data中重复定义 2) 计算后属性必须渲染后,绑定的方法才会生效这里指就是定义后的变量名在上面html中显示 3) 计算后属性绑定的方法中的任意
阅读全文
摘要:本文给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下。 location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可
阅读全文
摘要:JavaScript fetch接口 fetch,说白了,就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案? 这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。 fet
阅读全文
摘要:针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必考的问题。 之所以还写一篇这样的文章,是因为近期都在搞新技术,想“回归”下基础,也希望尽量总结的更详尽些。 那么你是否还需要阅读本篇文章呢?可以试着回答下面这个问题: 我们在访问百度首页
阅读全文
摘要:疑惑描述: 查看了淘宝网的首页源文件,看到这样的一个特殊的 <script src="http://a.tbcdn.cn/??s/kissy/1.1.6/kissy-min.js,p/global/1.0/global-min.js,p/et/et.js?t=2011092320110301.js"
阅读全文
摘要:一、Object.assign()对象的拷贝 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 Object.assign(target, ...sources) 【target:目标对象】,【souce:源对象(可多个)】 举个栗子:
阅读全文
摘要:延展操作符(Spread operator) 延展操作符 = ...可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开,还可以在构造对象时,将对象表达式按key-value的方式展开。 1 函数调用 2 function(...iterableObj) 3 4 数组构造或者字符串
阅读全文
摘要:解构赋值 解构赋值可以方便快速的从数组或者对象中提取赋值给定义的变量。 获取数组中的值 从数组中获取值并赋值到变量中,变量的顺序与数组中对象顺序对应。 1 var foo = [1,2,3,4,5] 2 3 var [one,twe,three] = foo 4 console.log(one)//
阅读全文
摘要:1. Service Worker的身份 Service的意思是服务,Worker的意思是工人,那么Service Worker的意思就是服务员。这个员工是2014年6月HTML5新招的实习生,目前在试用中。在此之前,已经有一位老员工,它叫Web Worker。那么问题来了,Boss是谁?Boss就
阅读全文
摘要:0xFFFFFF或者#FFFFFF 表示白色,和RGB(255, 255, 255)一样。 0x表示16进制. 颜色有3个部分,红绿蓝。通常每个存储一个单字节。因此可以位于0,255。或者位于0,FF之间。颜色是#RGB, 因此可以为0x0 到0xFFFFFF. 随机数乘以0xFFFFF意味着可以生
阅读全文
摘要:使用dom breakpoint能快速找到修改了某一个dom element的JavaScript code位于何处。在Chrome development tool里,选中想要inspect的dom element,右键选择Break on->Attributes modifications: 之
阅读全文