- 博客(73)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 从简单的词法分析、语法分析、目标代码生成、语法解释器的过程，粗略讲一下代码的运行过程
如果你的目标是创建一个可用的解释器，可能需要更深入的了解 JavaScript 语言规范和相关的计算机科学概念。为了让人能够看懂机器在做什么，为了让机器明白我们的想要表达的意思，完成我们的指令，所以才出现了让人类更容易懂的编程语言。说C和C++比Java和.NET（C#）性能好，通常是因为C和C++更接近底层硬件，提供更直接的内存控制，并且没有虚拟机的运行时开销。想像一下,这代代码怎么解释：首先ast的结构大概是这样,读取a的时，会把a的初始值存储当前作用域中，读取b的时候，会拿a在当前作域用中取。
2023-12-09 15:35:48
333
原创 dify平台，对多种大模型进行支持
目前各种大模型出来后，大家也意识到API的统一性很重要，通过DIFY我们可以用一致的标准去支持各种模型响应结果写了一个简单的页面：Dify 目前已支持主流的模型供应商，例如 OpenAI 的 GPT 系列、Anthropic 的 Claude 系列等。不同模型的能力表现、参数类型会不一样，你可以根据不同情景的应用需求选择你喜欢的模型供应商。你在 Dify 应用以下模型能力前，应该前往不同的模型厂商官方网站获得他们的 API key 。模型类型在 Dify 中，我们按模型的使用场景将模型分为以下 4 类：系
2024-04-09 19:29:43
499
原创 tailwindcss在manoca在线编辑智能感知
推荐一下库，它实现在monaco-editor网页在线编辑器中对tailwindcss的智能感知提示，在利用tailwindcss实现html效果布局。非常的方便。
2024-04-09 14:59:05
316
1
原创 一个在线的NodeJS环境和终端运行界面
StackBlitz 经典编辑器、Codeflow、官方 SvelteKit 教程和 Cloudflare Wrangler 工作人员等。最常见的用例包括生产级 IDE、编程教程、下一代文档、人工智能应用程序或员工入职平台。，右边放一个iframe预览。这是不是就是一个在线的vscode了.想体验自己去搜索。以前需要云虚拟机来执行用户代码的应用程序，在 WebContainers 中可以完全在客户端运行。根据官方文档可以轻松搭建一个在线可以运行NODE的环境。比如在左边创建一个文件树，中间放一个。
2024-04-02 19:44:50
465
原创 vscode shadertoy插件，非常方便的glsl着色器编写工具
vscode有一件shadertoy的插件，安装后可以新建一个*.glsl文件，写好代码就可以直接运行看效果了。我试了一下非常方便.如果想要学习shader和一些数学在图形方面的应用我觉得这是一个非常好的插件.很著名的shadertoy网站，集合了非常多大神利用数学写出美妙的shader效果。像shadertoy创始人之一的IQ大神它在之方面有很多的建树。下面写了四个简单示例，水波纹、风景（利用2维值躁声和fmb躁声模拟山和水的流动和天空和云朵） 波纹 雷达。
2024-04-02 19:38:39
793
原创 Vue3 简单实现虚拟Table,展示海量单词.利用WebAPI speechSynthesis,朗读英语单词
利用webapi speechSynthesis帮助我们自动郎读英语单词，可以利用这个API，做一些小说朗读或到账提示。
2023-11-06 22:53:06
452
1
原创 react-router-dom v6版本实现Tabs路由缓存切换
之前不太喜欢在项目中去引用MVVM框架，有的太大，有的小但不是很成熟，怕遇特别的业务需求无法解决，干脆自己写了一个。几有几百行代码。可自己去扩展绑定指令，已支持的指令有，事件，属性，样式，值，模板，
2023-10-18 23:42:25
2002
1
原创 光线投射之伪3d
对于屏幕的每个 x（即屏幕的每个垂直条纹），发出一条从玩家位置开始的光线，其方向取决于玩家的观看方向和屏幕的 x 坐标。如果它撞到了墙，计算这个击中点到玩家的距离，并使用这个距离来计算这堵墙必须在屏幕上绘制多高：墙越远，它在屏幕上越小，越近，看起来就越高。方向向量可以这样理解：如果你沿着玩家看的方向画一条线，穿过玩家的位置，那么这条线的每个点都是玩家位置与方向的倍数之和向量。这很糟糕，但幸运的是，有一种更好的方法，只需要很少的计算，就能检测到每面墙：其想法是检查射线将遇到的墙的每一侧。
2023-09-09 23:30:24
682
1
原创 光栅化之扫描填充三角形
重心坐标比较简单，取最大包围合再计算点是否在三角形内就行，再根据重心坐标返回的alpha,beta,gamma三个权重值计算 uv映射和depth深度缓冲值，因为是求的重心坐标，感觉效果比插值的要好一点。插值计算的话，首先需要逐行扫描填充，按y排序从左到右去填充三角形,再根据a,b,c三个顶点坐标信息来求uv插值和z插值，过程稍微麻烦一点，但性能明显好一点，纹理不是采用的就近原则，是用的双线线插值计算,所以也耗了一点性能，加载的模型文件效果还是显示出来了,
2023-08-19 20:56:20
281
原创 实现简单纯Canvas文本输入框，新手适用
最重要的是保证canvas的字体样式要与元素的字体样式一样，这样才能利用textarea的兴标和选中区体系。一、最简单可能是用dom渲染一个input,覆盖在图形上面进行文本编辑，编辑完再把内容更新到图形.这样简单，但是缺点也明显，就是它不是真正绘制在canvas上面，没有层级。下面看一下效果，因为也是花了二三个小时，弄了一个比较简单的,输入选中，光标指定位置生入，性能也是可以，输入响应很快。技术细节有一个地方，我是这样做的。选中区的文本颜色和背景要高亮，如果做文本计算的话，那有点麻烦，而且性能也不好/。
2023-08-16 21:18:05
1504
原创 canvas图形等距、间距测量
首先定义画线（实线、虚线）、画面（矩形块）、值（距离）等渲染数据结构（渲染数据只提供坐标信息和一些基本样式属性，不需要依赖渲染是dom，还是canvas或webgl） 侦测数据，取每个图形的包盒信息，再根据包盒信息抽象成方向（left top right bottom middle center）。这样在计算时，可以不需要通过if来判断了，直接对比相同的方向数值是否在区间内（吸附距离） 吸附（吸附完，选中目标的位置有可能发生变动，需要更新选中目标） 侦测行为：拖动时，按alt时，resize时等
2023-06-28 21:20:47
403
1
原创 HiloJs俄罗斯方块和消方块
无论任何编程语言都有设计模式一说，其实在我们很多人在项目的开发过程中就用到了很多模式。但是不知道这是什么模式或者很多知道或了解一些模式。但是又不知道如何去应用。在什么地方去用。目录设计模式适配器模式场景想象：...
2023-05-22 20:43:59
229
原创 简单的代码实现拖拽拉伸尺寸
目录代码：效果:代码：<div class="box"> <i class="tl"></i> <i class="tr"></i> <i class="bl"></i> <i class="br"></i> </div><scrip...
2022-03-14 16:02:49
642
原创 threejs限制物体在一个球形上面移动
目录效果：代码：约束：只能在球形表面上面移动，不能移开， 棒棒糖的角度要与球面的法向线一样垂直效果：代码：addExample("限制在球形上面移动", function () { let { toRaw, ref, unref, provide, inject, getCurrentInstance, reactive, shallowReactive, computed, watchEffect, watch, on...
2022-02-28 11:37:32
848
原创 通过ImageData实现线性渐变
https://codesandbox.io这个网站可以提供了一个多场景的在线编辑，可以快速的创建更种环境进行编写代码。常见的vue、react、node express parcel nextjs都有，大家如果自己去写一些es6 es7的语法，写自己的库都可以在上面写，写好后自己打个包，就可以了，可以在上面搭很多环境。...
2022-02-28 11:30:02
326
原创 一个简单的对html进行词法分析
将一段html进行扫描，在扫描读取字符流过程中会逐个字的分析，进行词的分类。把每个词添加token数组中，进行身份标识。并且对每个语句进行分析，然后把它抽象化。变成一个抽象化树结构的元素对象。目录HTML代码node对象tokens生成html 高亮完整代码例子举例：HTML代码<div class="wrapper" > <!--注释--> <div..
2021-09-23 21:01:57
441
原创 openlayer 实现对不同地图数据源的展示
例子:有天地图、百度地图、Arcgis,mapbox,geoserver自建瓦片服务、自定义d3图层 var addExample = createModuleExample('vue', { deps: ['css!bootstrapCss'] }) var BaseMap = { mounted() { var container = this.$refs.main; conta
2021-09-21 18:07:46
476
原创 React Antd4一个简单FilterForm和一个广告魔方的封装
一个列表页面都是查询和列表。查询的功能是比较常用的。对于一个项目来说把这块做成公共的组件更好维护，而且通过注册不同的搜索控件，避免大家重复写相同功能的代码.这个组件首先使用 <FilterForm fields={fields} autoBind onQuery={showList} ></FilterForm>...
2021-09-21 16:29:34
461
原创 绘制图形的几种方式,性能优化测试
主要测试 canvas和webgl绘制2d平面圆的效率.随机生成20万个均匀分布的圆，圆的颜色和位置随机每个测试100次，取平均值时长下面每种测试数据都是通过不同手段，最终绘制圆:性能测试-每个图创建一个路径,耗时:376豪秒(每个圆创建一条路径，填充颜色)性能测试-颜色分组绘制,并且只创建一个路径,耗时:160豪秒(一条路径只能填充一种颜色，所以要分组)性能测试-createPattern,耗时:450.27豪秒 (比如复杂的图形绘制太麻烦，可以只绘制一遍，通过个来设置)性.
2021-09-21 16:02:07
899
原创 简单的canvas+gl-matrilx实现3d像素绘制
写个主要想了解2d与3d有哪些不一样，2d矩阵和3d矩阵一些不一样的处理. import {CanvasRenderer,Scene,PerspectiveCamera,Geometry,Cube} from './js/renderer.js'; var renderer=new CanvasRenderer({ container:document.getElementById('test'), width:800,
2021-03-03 19:07:07
572
1
原创 在create-react-app项目中使用宏方法，在编译时解析逻辑
有些代码不适合在运行时计算，在编译时运算会更安全。而且还可以结合nodejs端做更强的代码整合。之前有在webpack通过自定义loader去导出编译后的代码。但那种无法传递结构化的参数。只能通过url形式使用npm i -D @dxyl/babel-macro-util该库基于babel-plugin-macroscreate-react-app脚手架生成的项目自带引用了babel-plugin-macros// 用法import {mul} from 'babel-macro-util/l
2020-11-04 15:21:23
845
原创 浏览器运行时编译es6+react+jsx+antd+router+redux+dva和vue+vue单文件
开发背景，主要有时候开发前端的一些小例子，用到react或其它的一些框架，比如JSX这些或其它的需要解析转换后，才能在浏览器运行。但直接使用nodejs环境有点太麻烦了，那使用systemjs感觉不够灵活,而且大部分cdn打包都是umd格式，所以选择用requirejs来运行想体验效果，直接复制下面一个HTML文件代码和JS文件代码，直接就可以运行了,如果是单独的文件会用到fetch读取源码解析，所以要在服务器运行，因为我配置的都是CDN文件配置步聚：首页在html里面引入requirejs和我
2020-08-07 16:55:24
748
原创 A星寻路算法JS实现版
A星算法，排序是利用了array.sort来取最小代价，其实可以利用二叉树或者优先级链表，在数据添加就处理好位置排列，还有就是代价因子在实际的地图应用中，是需要根据你真实的地形来计算的。var map = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 2, 0, 1, 0, 0, 0, 0, 0], .
2020-07-31 00:13:22
1281
原创 利用tween 实现react 简单transition 效果的代码
效果还可以，使用很简单在线演示地址:https://codesandbox.io/s/cocky-leakey-9by5p?fontsize=14&hidenavigation=1&theme=darkimport React, { useRef, useEffect, useState, useCallback } from "react";import styled...
2019-12-25 17:56:12
800
原创 开发图形编辑器
一般开发这种需求，首先要了解几个概念性的东西，才能更好的熟练使用这些框架。节点 (就是每个图形),有矩形、图形，或者自义定图形,像jsplumb它是通过svg和dom结合渲染端点 （图形上面的锚点）一般情况都固定图形的上下左右连接线 (从起始端点连接到结束端点的线).线有很多种、直线、贝塞尔、折线.另外还有一些其它图形方面可能用到的图形渲染框架.g6、jsplumb、fabric、...
2019-11-29 16:00:01
971
原创 写一个小的粒子渲染器
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signa...
2019-08-19 18:24:20
262
原创 让你快速了解threejs的一些操作的demo代码
里面部分代码来自webgl教程<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script sr...
2019-08-06 10:55:17
3211
原创 让你快速了解Phaserhtml5游戏开发流程的一些操作的demo代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
2019-08-06 10:38:22
726
原创 让你快速了解cavans针对图像处理一些操作的demo代码
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="https://cdn.jsd...
2019-08-06 10:33:12
256
原创 让你快速了解cavans翻转、矩阵、矢量一些操作的demo代码
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s...
2019-08-06 10:31:09
169
原创 熟悉webpack4一些源码
webpac4 阅读webpac4 阅读webapck核心概念WebpackCompiler 编译器CompilationParser源码AST抽象转换ResolverSingleEntryDependencyNormalModuleFactorywebapck核心概念Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。Out...
2019-07-23 12:04:00
608
原创 PhysicsJS 物理引擎一些基本操作
增加图形界面示例操作:一个html页面做多个功能示例展示时，进行切换和单独的操作界面控制.例如上面的控制界面是采用dat.gui库,examples有很N个,每个切换的时候会有自己的操作界面.这里不细说了推荐大家自己去看一下dat.gui.js。 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ph...
2019-07-17 19:10:50
1782
原创 基于gl-martix矩阵库和canvas 2d实现3d效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
2019-07-11 20:03:30
1349
原创 利用d3完成计算机各种扫描画线算法，直线相交
中点画圆,bresenham 直线 ，bresenham 多边形填充，dda算法,直线相交<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
2019-07-11 19:54:13
742
原创 利用d3 API各种几何图形绘制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
2019-07-11 19:45:54
1965
原创 各种多边形算法
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <script src="/scripts/mathematicsAndPhysics/linearAlgebra/matrix/gl-matrix/2.7.1/dist/gl-matrix.js"></s...
2019-07-11 19:41:50
1307
JS 对象与数组的监听实例
2016-06-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人