羽飞工作室
0%

发表于 更新于

前端大部分应用都是事件驱动的，如何自己动手实现一个事件系统呢？事件具有订阅和发布功能，还有频道。有时候还需要设计只执行一次的事件。原理非常简单，把事件回调用一个数组保存起来，触发的时候再按顺序从数组中取出来执行就行了，为了区分不同事件类型，需要用一个对象根据不同键值存放。

阅读全文 »

发表于 更新于 分类于

在用户注册流程中，经常会用到手机验证码，这种验证码通常是6位不重复数字。如何生成一个随机不重复的数字呢？
大致思路如下：
1.先生成一个从0到9的数组
2.把数组随机顺序打散
3.取出需要的6为数字

代码如下：

1
2
3
4
5
function randomCode (n) {
    return [0,1,2,3,4,5,6,7,8,9]
        .sort(()=>Math.random()-0.5)
        .slice(0,n)
}

发表于 更新于 分类于

前端开发中经常会需要区分用户的设备信息，如何区分浏览器，获得唯一的浏览器标识呢？可以从硬件入手，因为浏览器渲染canvas时，渲染算法和参数不同，因此绘制成的图片CRC校验参数也不一样，因此可以根据canvas获得浏览器指纹信息，进而生成唯一标识。

阅读全文 »

发表于 更新于 分类于

对于事件比较密集的应用，需要谨慎处理事件回调，过于频繁的执行会带来性能问题，尤其是在回调中执行大量消耗性能的动作。有时候我们并不需要那么快去响应事件，因为人的感官没有那么灵敏，就像电影一样，一帧一帧的展示，只要能达到24fps就能看起来像连续的画面。这里需要用到节流的技术。它的基本原理就是给一个要执行的动作加锁，一定时间内只执行一次。其重点在于加锁和去锁。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
function throttle (fn, delay) {
    var timer
    return function () {
        var context = this
        var args = arguments
        if(timer) return
        timer = setTimeout(function () {
            timer = undefined
            fn.apply(context, args)
        }, delay)
    }
}

发表于 更新于

前端属于GUI程序开发，用户交互频繁，并且需要频繁渲染，经常会碰到性能问题，比如滚动条，键盘输入补全等。这就需要对输入进行拦截，防止短时间多次触发影响性能的操作（抖动），这个技术被称为防抖。它的基本原理就是给要执行的操作加个延迟，如果被多次触发，只执行最后一次操作。其重点在于清零。

阅读全文 »

发表于 更新于 分类于

在画布上给定起点和终点，怎么画出连接两点的直线呢？Bresenham算法给出了一种简单的方法，该算法非常精简可以只用整数加减法和位移等比较简单的算术运算方式实现。在一些计算资源比较贫乏的硬件上应用广泛。

阅读全文 »

发表于 更新于 分类于 ，

摘要

在计算机图形学中，经常要判断多边形顶点的凹凸性及顶点顺序。利用向量叉积的算法比较简单直观，并且算法可以达到O(n)。参考了一些论文，用js实现了一个demo，并且可以在线演示。

阅读全文 »

发表于 更新于 分类于

三阶贝塞尔曲线的生成跟二阶类似，它是由起点、终点、控制点1、控制点2四个控制点生成。方程式如下：

阅读全文 »

发表于 更新于 分类于

二阶贝塞尔曲线是个抛物线，其方程如下：

它的制作过程如下：

  1. 在P0到P1的线段上取一点Pa,使得t=PaP0:P0P1
  2. 在P1到P2的线段上取一点Pb,使得t=PbP1:P2P1
  3. 连接PaPb，在PaPb上取一点Pt，使得t=PtPa:PbPa
阅读全文 »

发表于 更新于 分类于

一阶贝塞尔曲线是一条直线，它的方程式如下：

t是P0到P1之间的点到原点的距离与P0到P1的距离的比值,通过改变t值，可以移动点的位置。在数学中，线性插值是一种利用线性多项式在已知数据点的离散集合范围内构造新的数据点的曲线拟合方法。

阅读全文 »