Annnnty-优快云博客

原创 JavaScript实现kmp算法与思路浅析

写在最前本次分享一下通过实现kmp算法的动画效果来试图展示kmp的基本思路。欢迎关注我的博客，不定期更新中——前置概念字符串匹配字符串匹配是计算机科学中最古老、研究最广泛的问题之一。一个字符串是一个定义在有限字母表∑上的字符序列。例如，ATCTAGAGA是字母表∑ = {A,C,G,T}上的一个字符串。字符串匹配问题就是在一个大的字符串T中搜索某个字符串P的所有出...

2018-03-07 10:59:27 1865

原创由一个“bug”到鲜为人知的jQuery.cssHooks

写在最前本次分享一下在一次jQuery赋值样式失效的结果中来分析背后原因的过程。在翻jQuery源码的过程中，感觉真是还不能说自己只是会用jQuery，我好像连会用都达不到（逃欢迎关注我的博客，不定期更新中——一个很简单的赋值问题$('#' + id).css({"left": "200"})我只是单纯的想控制一个left值，大家都懂，但是竟然失败了，打印出的元素属...

2018-03-07 10:57:18 411

写在最前本次分享一下在作者上一次“失利”即拿到毕业证第二天突然“收到”阿里社招面试通知失败之后，通过分析自己的定位与实际情况，做出的未来一到两年的规划。以及本次社招的面试经历（但这部分不是重点，每个人的面试经历都是不一样的。千人千面嘛）PS:当然了计划赶不上变化，半年后一次内推的机会“稀里糊涂”得就通过了。。欢迎关注我的博客，不定期更新中——基于个人定位与实际情况的发展方向上一次面试挂了后，我便对自

2018-02-06 17:58:36 12726 2

原创 canvas进阶——实现静态图像的变形并合成动态效果

写在最前在之前的这篇bezierMaker.js——N阶贝塞尔曲线生成器的文章中我们提到了对于高阶贝塞尔公式的绘制与生成。不过更多的童鞋看到后可能会不知道其使用场景是什么。故作者本次分享一下基于bezierMaker.js实现的将静态图片按照自定义曲线轨迹扭曲图片并合称为动态效果。欢迎关注我的博客，不定期更新中——效果预览之前的描述可能不是很清楚我们直接看下效果图：首先加载一张图：然后通过bez

2018-01-22 12:33:19 4376

原创贝塞尔公式推导与物体跟随复杂曲线的轨迹运动

写在最前在之前的这篇文章中我们提到了对于贝塞尔公式的运用。本次分享一下如何推导贝塞尔公式以及附一个简单的��即小球跟随曲线轨迹运动。欢迎关注我的博客，不定期更新中——效果预览demo地址对于如何绘制连续的贝塞尔曲线可以参照这篇文章：基于canvas使用贝塞尔曲线平滑拟合折线段在本例中生成的曲线由以上文章中的源码提供。贝塞尔曲线公式推导上面这张图是贝塞尔曲线的完整公式，看起来一脸懵逼=。=，因为这是N

2018-01-10 10:03:59 3716

原创 canvas实现高阶贝塞尔曲线

写在最前由于原生的Canvas最高只支持到三阶贝塞尔曲线，那么我想添加多个控制点怎么办呢？（即便大部分复杂曲线都可以用3阶贝塞尔来模拟）与此同时，关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控制点设置为多少可以形成我们想要的曲线。本着解决以上两个痛点同时社区内好像并没有N阶的解决方案（js版）故这次作者非常认真的开源了bezierMaker.js！bezierMaker.js理论上支持N阶贝塞

2017-12-29 00:35:44 8146 3

原创基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果

写在最前本次分享一个用canvas粒子渲染文字的“完整”版实现，功能包括：随机粒子缓动动画，粒子汇聚、发散，并拼出你想要的文字。本文继续上面一节基于canvas使用粒子拼出你想要的文字的基础效果，完善了在文字拼接过程中的粒子效果。欢迎关注我的博客，不定期更新中——上节回顾自上次的分享基于canvas使用粒子拼出你想要的文字，我们实现了一个可配置的用粒子拼出想要的文字效果，不过这个效果是静态的，就像这

2017-12-18 19:48:13 2534

原创基于canvas使用粒子拼出你想要的文字

写在最前本次分享一下使用canvas实现粒子效果拼出你想要的文字。欢迎关注我的博客，不定期更新中——起因不久之前看到大搜车团队出品的easy mock产品的界面中有一个使用粒子拼出“mock so easy”的效果，感觉非常有意思，就像下面这样：当然了，这个easy mock的界面中还有粒子汇聚、散开、以及缓动等效果，这些在之后的文章中会不定时的更新实现思路。我当时看到这个效果的时候是一段单

2017-12-13 14:36:08 5216

原创基于canvas使用贝塞尔曲线平滑拟合折线段

写在最前本次分享一下在canvas中将绘制出来的折线段的棱角“磨平”，也就是通过贝塞尔曲线穿过各个描点来代替原有的折线图。欢迎关注我的博客，不定期更新中——为什么要平滑拟合折线段先来看下Echarts下折线图的渲染效果：一开始我没注意到其实这个折线段是曲线穿过去的，只认为是单纯的描点绘图，所以起初我实现的“简(丑)易(陋)”版本是这样的：不要关注样式，重点就是实现之后才发现看起来人家Ec

2017-12-10 17:57:23 8215 3

原创用canvas实现视频播放与弹幕功能

写在最前本次分享一下使用canvas来进行视频播放并且添加弹幕功能。欢迎关注我的博客，不定期更新中——效果图示例源码见：源码地址可以看到上方为一段视频，下面是用canvas来重新绘制的视频，并且支持动态的添加弹幕。canvas载入视频canvas中的drawImage方法绘制图片所需要的数据源不单单是某张图片，同样可以是使用视频的某一帧来进行绘制。就像这样：var video = documen

2017-12-07 14:09:13 7096

原创 Node.js EventEmitter类源码浅析

写在最前本次尝试浅析Node.js中的EventEmitter模块的事件机制，分析在Node.js中实现发布订阅模式的一些细节。完整Node.js源码点这里。欢迎关注我的博客，不定期更新中——EventEmitter 大多数 Node.js 核心 API 都采用惯用的异步事件驱动架构，其中某些类型的对象（触发器）会周期性地触发命名事件来调用函数对象（监听器）。例如，net.Server 对象会在

2017-11-20 10:25:01 385

原创初探Node.js Stream中Readable类的内部实现

写在最前本次试图浅析探索Nodejs的Stream模块中对于Readable类的一部分实现（可写流也差不多）。其中会以可读流两种模式中的paused mode即暂停模式的表现形式来解读源码上的实现，为什么不分析flowing mode自然是因为这个模式是我们常用的其原理相比暂停模式下相对简单（其实是因为笔者总是喜欢关注一些边边角角的东西，不按套路出牌=。=），同时核心方法都是一样的，一通百通嘛，有兴

2017-11-13 00:31:41 2215

原创初识JavaScript依赖注入

写在最前本次分享一下我学习到的有关依赖注入的梳理与总结。试图生动形象得解释出来其内部的思想与实现流程。欢迎关注我的博客，不定期更新中——什么是依赖注入第一次听到这个说法是在angular的时候，我们都知道angular内部大量使用了依赖注入。虽然我到现在也没玩过：），不过这并不影响我们来探究一下它。首先试图形象的说明一下（个人观点、有问题欢迎指正）：有那么一群人，这群人的职业是程序员。他们除了工作不

2017-11-02 23:59:35 316

原创对于浮动的定义我遗漏了什么

写在最前本次记录一段突然令我困惑的css代码。主要是由于css一直掌握的不好同时突然出现了一种很常见的浮动情况但是并不能用已有的认知来解释，故从规范中寻找答案。欢迎关注我的博客，不定期更新中——MDN对于浮动的解释 The float CSS property specifies that an element should be placed along the left or right s

2017-10-21 23:34:15 317

原创基于Vue、Nodejs、Socket.io的聊天应用

一直想实现一个聊天应用demo，尝试一下Socket.IO这个框架，同时看到网上的教程很多关于使用node开发聊天应用的demo都是聊天室形式的，也就是群聊，很少有实现私聊的。所以想自己实现一次。

2017-10-19 13:30:42 3829 1

原创基于node实现文件路径替换

写在最前本次分享一个简易路径替换工具。功能很简单，重点在于掌握：递归遍历文件夹目录正则替换目标内容解压上传文件，返回更新后的压缩文件源码地址：https://github.com/Aaaaaaaty/Blog/tree/master/fsPathSys效果预览在线预览结果对比图：wechatimg24PS:后端支持匹配js、css、img、background-i

2017-10-19 11:54:17 1450

原创 JavaScript中奇特的~运算符

本次分享一下并不是很常用的按位非运算符~的原理以及一点点用法。

2017-10-19 11:54:14 286

原创基于casperjs、resemble.js实现一个像素对比服务

写在最前本次分享一个提供设计稿与前端页面进行像素对比的node服务，旨在为测试或者前端人员自己完成一个辅助性测试。相信我，在像素级别的对比下，网页对设计稿的还原程度一下子就会凸显出来。。如果哪位童鞋用这个功能测了某位前端小哥哥的页面发现了问题，请不要说是我提供的这个工具=。=效果预览前置知识本次用到了以下两个库作为辅助工具：casperjs：基于PhantomJS的编写。其

2017-10-19 11:54:12 1629

原创图解JavaScript的参数传递

写在最前本次尝试通过流程图的形式并结合两个例子来重新理解一下JavaScript中的参数传递。欢迎关注我的博客，不定期更新中——参数到底如何传递？借用红宝书的一句话：ECMAScript中所有函数的参数都是按值传递的这个值如果是简单类型，那么就是其本身。如果是引用类型也就是对象传递的就是指向这个对象的地址。故我们可以认为参数传递全部都是值传递，那么具体怎么理解呢？看下例子：第一个

2017-10-19 11:54:09 326

原创 V8中一个微妙的内存泄露方式

写在最前本次的分享一段代码来重新认识在V8的垃圾回收机制。欢迎关注我的博客，不定期更新中——一段来自meteor工程师提出的导致内存泄漏的代码var theThing = null var replaceThing = function () { var originalThing = theThing var unused = function () { if (or

2017-10-19 11:54:06 866

原创从hello world看JavaScript隐藏的黑魔法

写在最前事情的起因是这段看起来不像代码的代码：有兴趣的同学可以自己先尝试下！([]+[][(![]((!![]+[])[+!![]((!![]+[])[+!![]((!![]+[])[+!![]((!![]+[])[+!![]((!![]+[])[+!![]((!![]+[])[+!![]((!![]+[])[+!![]((!![]+[])[+!![]((

2017-10-19 11:54:03 689

原创给文档添加一组掘金的「小盾牌」

写在最前由于昨天掘金上线了自己的小盾牌，感觉非常酷有木有！相关文章在这里。就是下面这个：）嗯上面那个是这篇文章现在的喜欢数嘻嘻~然而这个是分享到掘金的文章才可以生成这样一个盾牌，可是我的文章在专栏里我也想要一个放到github的博客里怎么破！所以我决定自己写一个工具好了。我希望它可以实现：自动获取个人掘金主页的喜欢数、阅读数将盾牌图标数据更新到自己本地博客的md中通过git推

2017-10-19 11:54:01 416

原创从[] == ![] 看隐式强制转换机制

写在最前本次分享一下通过ES5规范来总结如何准确的计算“==”的执行结果。由于规范是枯燥无味的，所以作者试图总结了其中的规律，并希望可以让读完这篇文章的读者不再去“死记硬背”==的结果是什么，而是通过几次简单的计算便心有成竹的得出结论！欢迎关注我的博客，不定期更新中——JavaScript小众系列开始更新啦——何时完结不确定，写多少看我会多少！这是已经更新的地址：小众系列之终极类型转换

2017-10-19 11:53:58 289

原创从HTML5与PromiseA+规范来看事件循环

写在最前本次分享一下从HTML5与PromiseA+规范来迅速理解一波事件循环中的microtask 与macrotask。欢迎关注我的博客，不定期更新中——JavaScript小众系列开始更新啦——何时完结不确定，写多少看我会多少！这是已经更新的地址：小众系列之终极类型转换：从hello world看JavaScript隐藏的黑魔法制小众系列之隐式类型转换：从[] == ![]看

2017-10-19 11:53:55 756

原创基于canvas实现波浪式绘制图片

写在最前本次的分享是一个基于canvas的更新图片特效实现。其中主要涉及canvas中getImageData()、putImageData()、toDataURL()方法的使用。效果请看下面。欢迎关注我的博客，不定期更新中——PS:请在本地服务器中打开页面，因谷歌浏览器中会有跨域问题，如需node静态服务器可以参照这个地址

2017-10-19 11:53:53 4848

原创基于jQuery的一个“射日”小游戏

写在最前本次的分享是一个基于jQuery实现的一个移动端射箭类小游戏。主要实现了目标物、障碍物的随机渲染，以及中箭效果的判定等。欢迎关注我的博客，不定期更新中——效果预览game.gif点我查看源码仓库。主要结构规划...//基础属性defaultOption = {}//绘制整体画面function drawGame(defaultOption){}//障碍物、目

2017-10-19 11:53:50 403

原创从零实现一个自定义html5播放器

写在最前本次的分享是一个基于HTML5标签实现的一个自定义视频播放器。其中实现了播放暂停、进度拖拽、音量控制及全屏等功能。欢迎关注我的博客，不定期更新中——效果预览点我查看源码仓库。核心思路我相信一定会有些没有接触过制作自定义播放器的童鞋对于标签的认识会停留在此。其中controls属性经过设定，会在界面中显示一个浏览器自带的控制条。如果对于UI没有要求的需求，其内

2017-10-19 11:53:47 5222

原创基于node的微小服务——细说缓存与304

写在最前在平时的前端开发中我们经常会遇到这种操作。明明我代码更新了，咋刷出来还是以前的呢？是不是缓存了？快清下缓存看看！你看页面是304，怪不得没更新！等等很多情况。作者起初也不是很了解，因为这个不由前端来控制，都是后端的操作。故这次使用node也来写一个控制缓存的服务来真正搞明白这里的道道。欢迎关注我的博客，不定期更新中——浏览器缓存机制在说这个服务如何写之前我们先要明白浏览器缓存到底是个

2017-10-19 11:53:44 1062

原创从Console中看看jQuery的原型链

写在最前这不是一篇分析源码的文章——因为作者也没有怎么看源码。本文主要分析jQuery中到底是如何进行构造原型链的。思路是通过逆推来抛出问题再用正推的方式来分析解决问题。欢迎关注作者博客，不定期更新中——jQuery是什么首先你知道jQuery有两种使用方法吧？一种是jQuery('#xxx')；一种是new jQuery('#xxx')；这两种方式都会返回一个实例。其原型链应该有一大堆

2017-10-19 11:53:41 918

原创基于 node 的微小爬虫——扒了一下知乎

写在最前近期读到了alsotang的node教程，对一些基础知识又有了些新认识，故重新梳理了一下，分享出来。这里是教程地址。本次使用了superagent、cheerio来爬取知乎的发现页文章列表，通过async来控制并发数来动态获取延时加载的文章。源码地址，以及作者的blog欢迎关注，不定期更新中——实现步骤搭建http服务通过superagent获取页面html使用cheerio

2017-10-19 11:53:39 1612

原创 Javascript之bind

写在最前最近开始重新学习一波js，框架用久了有些时候觉得这样子应该可以实现发现就真的实现了，但是为什么这么写好像又说不太清楚，之前读了LucasHC以及冴羽的两篇关于bind的文章感觉自己好像基础知识都还给体育老师了哈哈哈，所以危机感爆棚，赶紧重头复习一遍。本次主要围绕bind是什么；做了什么；自己怎么实现一个bind，这三个部分。其中会包含一些细节代码的探究，往下看就知道。所以bind是什么

2017-10-19 11:53:36 622

原创基于react的影院购票应用

写在最前这次使用react&redux，来模拟了一个购票app，需要关注的是本次全部数据均为mock实现，不涉及后台。同时其中不会涉及react与redux的语法，只关注到一些模拟原生效果的实现理念。没有接触过react的童鞋们可以关注下阮一峰老师的react入门教程，至于redux，redux中文文档上面也有着详细的说明。不过作者对redux也很感兴趣，打算学习一波源码后(如果整个明白了)，可

2017-10-19 11:53:33 859

原创基于 canvas 实现的一个截图小 demo

写在最前记得以前在人人上看到一个分享，讲解基于js的截图方案，详细的不记得了，只记得还挺有意思的貌似用了canvas？所以这次打算自己写一个分享给大家作者的思路。这只是一个很简陋的小demo如有bug请提issues。按照惯例po代码地址；以及作者博客的github仓库，不定期更新中——[捂脸]求star效果图整体思路设置开始/结束快捷键开始后将DOM绘制成canvas来覆盖原始

2017-10-19 11:53:30 4071

一只