- 博客(80)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 ECAMScript 中的Set语义和Define语义
ECAMScript 中的类字段（class field）在stage-2的时候使用的是[[Set]] 语义，而在stage-3改成了 [[Define]] 语义。从Babel转译来看，就是将直接定义在 this上的方法和属性换成使用 Object.defineProperty。其实对于展开语法(Spread syntax) 处理也是这样的，有[[Set]] 语义和 [[Define]] 语义的区别。举个例子Define语义会导致有时候的setter、getter失效。原始代码class Bas
2022-04-27 17:17:00
363
原创 JS沙盒实现
JS沙盒简述沙盒（英语：sandbox，又译为沙箱），计算机术语，在计算机安全领域中是一种安全机制，为运行中的程序提供的隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。沙盒通常严格控制其中的程序所能访问的资源，比如，沙盒可以提供用后即回收的磁盘及内存空间。在沙盒中，网络访问、对真实系统的访问、对输入设备的读取通常被禁止或是严格限制。从这个角度来说，沙盒属于虚拟化的一种。沙盒中的所有改动对操作系统不会造成任何损失。通常，这种技术被计算机技术人员广泛用于测试可能带毒的程
2021-08-10 00:50:58
1574
原创 Laya的2D绘制模式
Laya的2D绘制模式大致如此，每一个Node根据其类型（Text、Sprite）和某些属性（alpha、mask)等得到一个名为renderType的二进制数值，再去RenderSprite.render数组中查找对应的绘制函数单链表，进行调用。关键词为：单链表、二进制。Canvas绘制内容时，需要根据需绘制内容，选择stroke，fill，strokeText，fillText等绘制方法。根据这些绘制方法，组合出绘制文本、绘制图片、绘制自定义图形、混合、遮盖等函数，方便调用。在Laya中不是使用Ca
2020-12-27 18:28:13
729
原创 WebGL绘制如何进行优化？
很久之前写的笔记才贴出来，在某次面试之后，面试官问： 100万个模型绘制 ，很卡，你会怎么优化？我查询的大部分资料都是OpenGL的（太久了，没留下地址），所以我会根据自己的经验，说明下WebGL怎么做。影响性能的因素CPU过多的draw call（就是调用了drawElements或者是drawArrays函数，GPU就会根据渲染状态（例如材质、纹理、着色器等）和所有输入的顶点数据来进行计算，最终输出到屏幕）复杂的脚本或是物理模拟GPU顶点处理过多的顶点过多的逐顶点计算
2020-11-17 11:45:46
1242
原创 Three.js的渲染过程
主要基于WebGLRendere类的render方法开展，需要读者有基本的计算机图形知识，比如计算机图形管线（实时渲染管线）之类的。在Three.js的渲染中，大概可以分为以下几步：清空当前帧缓冲区，更新MVP矩阵；将物体分为透明和不透明两类，按照离摄像机从近到远排序（也可在Object3D单独设置renderOrder）；根据灯光信息，阴影计算，如果有开启平面裁剪就对进行剪裁；开始逐个渲染物体，按以下顺序，背景、不透明物体、透明物体；渲染前后还有两个类似于生命周期的回调函数，scene.on
2020-11-02 20:32:59
3846
1
原创 React样式修改背景失效
背景介绍点击后，将不透明的按钮修改为渐进透明的按钮。代码如下：修改前：let style = this.props.style;style["background"] = "rgba(250,103,37,1)";//...return (<div style={this.style}>立即下载</div>);修改后：let style = this.props.style;let progStr= Math.floor(progress*100)+"%";
2020-10-19 14:46:28
1376
原创 TS结构型设计模式之装饰模式
定义Decorators make it possible to annotate and modify classes and properties at design time.装饰器可以让你在设计时对类和类的属性进行注解和修改通俗来说，就是在不改变原有对象的基础上，通过对其进行包装扩展（添加属性或者方法）使原有对象可以满足用户更复杂的需求。就增加功能来说，装饰模式相对生成子类更为灵活。实现装饰模式有不同的实现方法，第一种，使用继承方式，构建装饰类，传入被装饰类，进行修饰；//被装饰的
2020-08-15 17:52:03
329
原创 TS行为型设计模式之观察者模式
定义Define a one-to-many dependency between objects so that when one object change state,all its dependents are notified and updated automatically.（定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖于它的对象都会得到通知并被自动更新...
2020-08-15 10:21:46
525
原创 浅浅得理解HTTP
本文主要内容基于HTTP1.1。HTTP简介为了了解HTTP（HyperText Transfer Protocol，超文本传输协议），我们需要从TCP/IP入手，HTTP就是它内部的一个子集。TCP/IP（Transmission Control Protocol/Internet Protocol，传输控制协议/网际协议）是指能够在多个不同网络间实现信息传输的协议簇。TCP/IP协议不仅仅指的是TCP 和IP两个协议，而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇， 只是因
2020-07-29 17:20:02
293
原创 异步函数(async/await)的原理
Generator了解一个异步函数的原理，首先要来看下Generator（具体内容去看文档）：function* fibonacci() { try{ var a = yield 1; yield a * 2; }catch(err){ console.log(err.message); }}var it = fibonacci(); it.next(); // {value: 1, done: false}it.next
2020-07-28 17:12:39
729
原创 OpenGL如何将像素点的窗口空间坐标转换为世界坐标？
坐标变换的流程我们探讨的其实就是输入的顶点怎么变换为像素点的坐标（也就是窗口空间坐标），具体矩阵怎么求得感兴趣可以看下这篇文章。从物体空间到世界空间的变换是通过乘以基本变换矩阵（模型矩阵ModelMatrix）来实现的。从世界空间到摄像机空间的变换是通过乘以视图矩阵（ViewMatrix）来实现的、从摄像机空间到剪裁空间的变换是通过乘以投影矩阵（ProjectMatrix）来完成的，根据需求的不同可以选用正交投影或透视投影的相关变换矩阵。乘以投影矩阵后，任何一个点的坐标[x, y, z, w]
2020-07-15 17:55:02
4311
20
原创 计算机图形管线（实时渲染管线）
在计算机图形学中，计算机图形管线（渲染管线 或简称 图形管线）是一个概念模型，它描述了图形系统将 3D场景渲染到2D屏幕所需执行的步骤 。一旦创建了3D模型（例如在视频游戏或任何其他3D计算机动画中），图形管道就是将3D模型转换为计算机显示内容的过程。因为此操作所需的步骤取决于所使用的软件和硬件以及所需的显示特性，所以没有适用于所有情况的通用图形管线。顶点着色器（可编程），将顶点数组的点逐个传入顶点着色器进行处理，比如说旋转、视图透视投影转换等，再输出顶点数据几何着色器（可编程）.
2020-07-06 01:08:05
986
原创 平面----计算机图形学的基础几何知识
平面在数学上的定义是，平面，是指面上任意两点的连线整个落在此面上。在现实生活中你很容易一眼看出什么平面，但是在计算机的程序里，你将如何表示一个平面的呢？又是怎么样求点到平面的距离？判断点在平面的正面还是反面？线与平面的交点又是怎么求出来的呢？这篇文章就简单讨论这么几个问题，本文代码有TypeScript所实现，看起来和其他面向对象语言一样，求点积叉积的方法不具体实现，如果有疑惑可以查看我之前的文章。平面的定义平面，我们可以通过一条法线和一个点来表示，这个点我们为了方便，就取法线的点， 由于
2020-07-05 18:16:05
1281
原创 前端笔试坑位---JS隐式转换
我们在写笔试题的时候，经常碰到涉及隐式转换的题目，例如"1" + 2obj + 1[] == ![] [null] == false=== 和 ===== 叫做严格运算符，对象类型指向地址相同或原始类型（ 数值、字符串、布尔值）值相同；==叫做相等运算符，类型不同会进行转化再比较，undefined、null相等，对象类型还是比较引用。==运算符将原始值和其包装对象视为相等，但===运算符将它们视为不等。所有obj.a==null（相当于obj.a=== null || obj.a ==
2020-06-13 15:33:01
460
原创 ThreeJS(WebGL)如何使用UV坐标贴图，实现UV旋转偏移？
ThreeJS是WebGL的一种前端框架，UV坐标的原理是一样的。前置知识WebGL纹理如果对WebGL有兴趣，可以去看WebGL贴材质这篇文章简单了解下。纹理坐标系统uv其实就是纹理坐标，因为xyz已经被顶点坐标占用了，所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据，把表面的点与平面上的像素对应起来，一般取值在0~1；u：图片在显示器水平的坐标v：垂直方向w：垂直于显示器表面一般情况只是在表面贴图，就涉及不到w，所以常称为uv。ThreeJS纹理贴图使用纹理对象贴图T
2020-06-07 00:33:06
7363
2
原创 100行以内的代码实现一个Promise
Promise实现的基石就是，先了解Promises/A+规范，我按照自己的理解简单描述下。Promise规范术语：解决（fulfill）：指一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决，但在后世的 promise 实现多以 resolve 来指代之。拒绝（reject）：指一个 promise 失败时进行的一系列操作。终值（eventual value）：所谓终值，指的是 promise 被解决时传递给解决回调的值，由于 pr
2020-06-01 21:03:14
455
原创 Angular的动态组件
这是官网动态组件的讲解，我不知道你们是什么感觉，反正我当初作为一个初学者，是没怎么看懂，一个头两个大，也是难怪Angular不如Vue火，实在是容易劝退啊。使用场景我们先明确下动态组件的使用场景，在代码运行时要动态加载组件，换成普通人话，代码需要根据具体情况（比如用户的操作，向后台请求结果）确定在某些地方加载某些组件，这些组件不是静态的（不是固定的）。官网的举例就是，构建动态广告条，广告组件不断会推出新的，再用只支持静态组件结构的模板显然是不现实的。再举一个常见的例子，动态弹出框，弹出的组件是不确定
2020-05-30 16:36:40
2005
原创 点积和叉积在计算机图形学的应用
点积和叉积在计算机图形学中，是最为基础且重要的概念，初学者弄清它的概念的应用，是很重要的。先说明下，以下均采用列向量的表示方法，和线性代数书本上的行向量不同，采用列向量表示，则表达为列向量左乘矩阵，只是定义的不同，其他含义没有什么不同。点积点积在数学中，又称数量积（dot product; scalar product），是指接受在实数R上的两个向量并返回一个实数值标量的二元运算。它是欧几里得空间的标准内积。点积的结果是一个数。a→⋅b→=∣a∣∣b∣cosθ\overrightarrow{a}
2020-05-29 23:05:20
3836
1
原创 数据结构----平衡二叉树的JS实现
在高效的检索方法中，二分检索法具有最高的查找效率，但是它只适合于顺序存储结构，这样对于数据的操作和删除操作带来不便。二叉排序树不仅有二分检索的效率，同时保持数据的动态性。但是当二叉排序树只有左子树或者右子树，二叉排序树就退化成了单链表，具有较低的检索效率。平衡二叉树就可以解决这种问题。平衡二叉树又称为AVL树，它或是一颗空树，或是具有以下性质的二叉树：它的左右子树都是平衡二叉树，且左子树和右子树的高度之差绝对值不超过1。平衡二叉树的调整插入时通过对二叉树的调整可以保持这棵树为平衡二叉树。只有这么
2020-05-16 19:12:22
288
1
原创 某条前端面试题--实现一个封装的ajax器（Promise版）
题目描述实现一个封装ajax器，功能有限制一次同时发送的ajax请求数量m个timeout限制重试n次解题思路强调下，我的想法和代码只是尝试回答面试问题，并不能直接在正式的业务场景里使用，但希望也能给你们带去思考。另外，我的解决方案是基于promise完成的。首先，限制条件1在我的理解中，发送的请求还有m个请求在请求中，那么这时程序发出的请求，要先被存下来，等到有请求结束了，再发送给服务器。这就需要我们思考用什么结构，存储请求，考虑到请求是先进先出的，那么就可以使用队列。其次，2、3这
2020-05-13 15:14:55
637
原创 扒一扒为啥面试官要问我们隐藏元素有几种方法
也许，你们在面试的时候，被问到过，隐藏元素有几种方法？我总结了一下，不保证全面，有下列几种方法：visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在opacity: 0; CSS3 属性，设置 0 可以使一个元素完全透明position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外display: none; 元素会变得不可见，并且不会再占用文档的空间。transform: scale(0); 将一个元素设置为
2020-05-08 18:10:37
224
原创 扒一扒函数防抖和函数节流
在前端的真实场景里，我们可能不会希望频繁触发执行函数，比如说输出框输入时自动填充词，还有其他click、mousemove、mouseover、scroll等等情况的处理。通常为了解决这种问题，我们可以采用的套路，就是防抖和节流了。函数防抖简单来说，就是触发事件后，在没有再次触发事件的一段时间（n秒内）函数只能执行一次。具体流程如下：否是判断n秒内是否有将执行函数将它设为将执行函数放弃之前的...
2020-05-08 00:31:38
250
原创 怎么完成一个无尽的长列表
DOM节点本身并非耗能大户，但是也不是一点都不消耗性能，每一个节点都会增加一些额外的内存、布局、样式和绘制。如果一个站点的DOM节点过多，在低端设备上会发现明显的变慢，如果没有彻底卡死的话。同样需要注意的一点是，在一个较大的DOM中每一次重新布局或重新应用样式（在节点上增加或删除样式所触发的过程）的系统开销都会比较昂贵。所以进行DOM回收意味着我们会保持DOM节点在一个比较低的数量上，进而加快上面...
2020-05-07 00:41:58
1517
原创 浅度和深度拷贝
浅拷贝：只复制指向某个对象的指针，而不是复制对象本身，新旧对象还是共享同一块内存。这不是真正的拷贝，你不是真正的自我深拷贝：另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会影响原对象。突然的自我接下描述三种拷贝方式，嗯。。。拷贝方式一、JSON.parse(JSON.stringify(obj))非常的简单，深度拷贝，就这一行，当然戳手可得的东西总是藏着很...
2020-04-23 18:46:20
202
原创 WebGL（四）初入三维世界
在说完矩阵相关的知识后，就可以进入三维世界了。三维世界有两个很基本的东西：相机：正交相机就是 正交投影矩阵 * 视图矩阵 * 物体顶点透视相机就是 透视投影矩阵 * 视图矩阵 * 物体顶点三维物体：本文就说正方形的绘制，三维物体都是由三角形组成的，两个三角形组成一个面，六个面组成一个正方体，相信大家都知道了。本文相关的代码在链接的ch7文件夹。正方体绘制采用另外一种绘制方式gl...
2020-04-22 13:58:24
207
原创 WebGL（四）三维世界的重要矩阵
三维世界与二维世界最大的区别就是有深度，也就是Z轴。但在计算机上，我们还是把三维世界场景绘制到二维的屏幕上。本节代码在链接的ch07文件夹，矩阵相关的在lib文件夹中的cuon-matrix.js。如何将三维世界上的物体投影到二维屏幕？这里的处理用到三个矩阵转换：模型矩阵：用来移动、旋转、拉伸物体。具体矩阵使用方式看这里。视图矩阵：获取在视点也就是相机位置观察到的场景。投影矩阵：将三...
2020-04-21 18:29:54
879
原创 WebGL（三）学会贴纹理
本节代码在链接的ch05文件夹MultiTexture.js（贴了两张纹理）重点在片元着色器，还有initTextures函数// MultiTexture.js (c) 2012 matsuda and kanda// Vertex shader programvar VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attr...
2020-04-02 16:53:38
880
原创 WebGL（二）基本几何图元绘制
本节代码在链接的ch03文件夹HelloTriangle.js// HelloTriangle.js (c) 2012 matsuda// Vertex shader programvar VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + ' gl_Position = a_Positi...
2020-04-02 15:18:42
834
原创 WebGL（一）从最简单的代码认识WebGL
本节代码在链接的ch02文件夹index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Draw a point (1)</title> </head> <body on...
2020-04-02 13:32:51
538
原创 三维图形投影变换
三维图形在计算机上显示，而计算机屏幕显示是二维的，这就要用到投影变换，将三维图形投影到平面显示。平行投影表示真实大小和形状的物体，视点在无穷远处，一般用于工程制图透视投影表示真实看到的物体，更具有立体感和真实感，视点在有限远处透视投影（perspective projection）是为了获得接近真实三维物体视觉效果而在二维平面上绘图或渲染的一种方法。它是3D渲染的基本概念，也是3D程序设...
2020-04-02 10:34:14
2219
原创 二维图形的变换（矩阵形式）
变化图形就是变化图形的几何关系，即改变顶点的坐标，同时保持图形的原拓扑关系不变（即用结点、弧段和多边形所表示的实体之间的邻接、关联、包含和连通关系不变。如：点与点的邻接关系、点与面的包含关系、线与面的相离关系、面与面的重合关系等）计算机中的二维图形变换满足仿射变换仿射变换（Affine Transformation）1. “平直性”：直线经过变化之后依旧是直线2. “平行性”：平行线...
2020-04-01 18:00:42
6002
4
原创 chrome80后默认禁用第三方cookie，本地无法跨域调试怎么办
具体原因可以看下这篇文章，chrome80后默认禁用第三方cookie，在本地调试时是跨域请求，请求时的cookie就无法带上了，所以很带来很多麻烦。下面说解决方法:回退Chrome版本，这个方法我没有采用，但也是可行的在Chrome中打开新的标签页chrome://flags/搜索cookie，禁用SameSite by default cookies 和 Cookies without...
2020-03-31 15:56:54
1787
原创 为什么需要知道JavaScript的Number类型的精度问题
JavaScript的Number类型在我们平时写脚本的时候随处可见，但是因为前端对精度的要求不高，虽然不常见，但是有时也会碰到0.1+0.2！=0.3的情况，如果你不了解Number，可能就需要浪费很久事件去找bug。什么你没遇见过，不敢兴趣，了解下呗，防患于未然（虽然DUCK不必），面试会问到啊，看嘛，我讲快点(╥╯^╰╥)Number类型在js里，它是个双精度浮点数，用二进制来表示，就是...
2020-03-24 13:49:50
1805
原创 第三方cookie是如何窥视你的？
最近，关于 Cookie，发生了 Chrome80 屏蔽第三方 Cookie 的事件。第三方cookie会被屏蔽，是因为泄露用户隐私，导致被跟踪。举个例子，你在百度如何防止脱发，看CDSN是侧边就会有个脱发广告，曾有一段时间我的CDSN侧边老是出现肾虚治疗的广告位，我也不知道跟踪啥得出来的，明明我是个女孩纸。淘宝，优酷，爱奇艺等等也会出现这样的情况，你在一个网站看了一个东西吧，另一个网站就狂给你推...
2020-03-23 17:20:50
3073
1
原创 es6模块报错Uncaught ReferenceError: Cannot access '.' before initialization
情况描述项目是使用typescript（js的超集）编写代码的默认使用webpack编译采用es6模块处理方案出现了以下错误以下是我写的测试类A.tsimport { B } from "./B";export class A { public static _instance: A; public static getInstance(): A { i...
2019-12-09 09:42:32
39383
原创 angular拦截器的使用（缓存）
什么是拦截器回归今天的主题， 我建议大家主要是去看官方文档的拦截请求和响应，跳到顶部，可以下载官方例子源码的。拦截器就是在发送请求给服务器之前，拦截请求，隐式进行处理。也可以在接受服务器的响应之后，拦截响应，隐式进行处理。简单的应用就像官方说的，记日志，缓存等等，我也用其...
2019-11-30 16:00:07
477
原创 angular启动rxjs报错
ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.node_modules/rxjs/internal/types.d.ts(81,7...
2019-08-16 14:21:51
402
原创 TS创建型设计模式之单例模式
定义Ensure a class has only one instance,and provide a global point of access to it.（确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例）应用（例子）//懒汉式单例又称惰性单例，前端不考虑，如果是后端可能会考虑高并发的情况下出现多个实例class LazySingle { private ...
2019-01-15 00:12:47
3245
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人