博主 | 「A4纸」前端开发博客

A Simple Introduction to Ray Algorithms

Ray

What is Ray? Ray is known as casting a ray line from a point (Ray Origin) in space to a point or to a certain direction (Ray Direction) in space. Literally, a ray is a line segment that starts at a point and extends in a direction. We can use two values to define a ray: the origin and the direction. What ever dimension space the ray is in, we can use the origin and direction to define a ray. Ok, so how to define a ray origin and direction? Commonly, we can use vectors to define the origin and direction. When it comes to vectors, Wow! 继续阅读“A Simple Introduction to Ray Algorithms”

How To Optimize The Page Loading Time In Your Create-react-app Project?

Recently, I have been working on optimizing the page loading time of a complex low-code application. Previously, I have done some similar optimization work in other projects, but they are not react projects. As it’s based on Webpack, in order to reduce the page loading time, I have to try to optimize the webpack bundle size or the chunk size of the application, 继续阅读“How To Optimize The Page Loading Time In Your Create-react-app Project?”

Something About Computer Graphics

忽然就想用英语来写写技术系列之二 – 浅谈计算机图形学。接着上一篇我之前写的《Web 图形学从入门到 “放弃” 指南》的文章，我再来畅谈一下计算机图形学的皮毛。

In last few years, I have been learning computer graphics from 2d Canvas, 2D Svg, Webgl, Three.js, Webgpu and Glsl
shader programs.

As the saying goes, “There are three romantic areas in programming: 1. Operating System 2. Compiler 3. Computer
Graphics”. 继续阅读“Something About Computer Graphics”

Something About Design Pattern In Javascript

忽然，就想用英语来写写技术相关的东西哈：），水平有限，不过还得硬写（模仿老外也行），不写口语铁定退化。

The article is divided into several sections:
1.The Factory Design Pattern in Javascript
2.Editor’s Commands
3.Protect Your Class’s Properties or Methods
4.How To Use Super in Javascript / Typescript
5.In a Class, How To Add a Clone Method without using “New” keyword
6.How To Use static in Javascript / Typescript
继续阅读“Something About Design Pattern In Javascript”

再次遇见 React 找回初恋的感觉

背景

脱离了 Vue，最近几个月一直接在使用新版 React 来搞低代码平台，那真是找到了初恋的感觉。由于代码平台的超高复杂度及 React 其完备的生态，使用 React 的技术栈应该算是最佳选择。上一次使用 React 已经是 4 年前的事了（转到我四年前写的一个 Repo《https://github.com/nelsonkuang/ant-admin》），那其实只是我当前的无心插柳之作，居然吸到了不少粉。话说回来，新版的 React 变化确实有点大，但感觉有种万变不离其中的感觉继续阅读“再次遇见 React 找回初恋的感觉”

一次对复杂的古董问卷系统项目的前端优化之旅

背景

年前接盘了一个项目的优化任务，这是一套类似“问卷网 / 问卷星”之类的，集问卷拖拉创建、预览、发布、数据收集、数据可视化报表等非常齐全的复杂的古董问卷系统，由于产物是出生于 jQuery 一招先，jQuery 称王称霸的年代。实现的逻辑当然是 Dom 操作为王的思路。加之、先前的开发作者是偏后端的全栈开发，继续阅读“一次对复杂的古董问卷系统项目的前端优化之旅”

Vue 中使用 json 定义生成表单（支持 ElementUi / iview / Ant Design Vue）

背景

之前已经在项目中实现过类似的功能，就是要通过后端接口返回的 json 动态输出相应的表单。但之前的实现方式是通过条件判断来根据 json 定义的类型输出相应的组件组成表单。本次遇到类似的需求，实现方式想通过 Vue 中的 component :is 的方式继续阅读“Vue 中使用 json 定义生成表单（支持 ElementUi / iview / Ant Design Vue）”

TensorFlow.js 入门并动手编写娱乐版的双色球在线预测

背景

一年前就知道了 TensorFlow js 版的存在，一直没有去玩一下。最近一次偶然的机会，要协助同事处理过一个 TensorFlow.js 相关的 Demo 小程序，要使用 TensorFlow.js 结合小程序的照相机 API 功能，实现微信小程序扫描识别物体功能。该 Demo 主要是由 TensorFlow.js 官方项目 – https://github.com/tensorflow/tfjs-wechat/tree/master/demo/mobilenet 改造而来继续阅读“TensorFlow.js 入门并动手编写娱乐版的双色球在线预测”

给 vue-easytable 表格增加树节点功能

背景

同事在使用一个 vue 表格组件 vue-easytable 时遇到了点麻烦，现在项目中出现了一个需求就是要给表格增加树节点功能，让表格中的行可以展开与收缩，我们知道使用 element UI / ant-design-vue 中的表格是自带树节点功能的。但是老项目如果要更换组件的话已经是不大可能，于是需要帮忙加上树结构功能继续阅读“给 vue-easytable 表格增加树节点功能”

小程序中使用 canvas 制作 5 维雷达图（结合小学六年级三角函数知识）

背景

微信小程序项目中需要制作一个 5 维雷达图（如图一），许多人第一时间可能想到的就是去找插件解决问题，其实小程序的数据可视化的插件还真有，但就为了这一个小图非得去把整个笨重的图形库引进来，这就直接拖慢了小程序的加载速度。使用小程序里的 canvas，结合小学六年级三角函数几何知识，其实我们完全可以很快 DIY 一个 5 维雷达图出来继续阅读“小程序中使用 canvas 制作 5 维雷达图（结合小学六年级三角函数知识）”