- 博客(234)
- 收藏
- 关注
RSS订阅转载 完整实现神经网络: 实战演练
根据万能近似定理、反向传播的理论铺垫，我们终于进入了实战阶段，让我们用 JS 写一个跑在浏览器的神经网络吧！在《实现万能近似函数: 神经网络的架构设计》这一篇文章我们讲过了对 Model Function、Loss Function 的定义，但还没有实现 Optimization 函数。在实现 Optimization 函数之前，我们需要回顾一下神经网络设计的代码，并加上一些关键参数缓存数据以提升...
2024-06-13 20:01:28
34
原创 反向传播: 揭秘神经网络的学习机制
为了对万能近似函数的每个参数求偏导，我们需要使用反向传播作为方法。所谓反向传播，与之相对的就是正向传播。神经网络执行是从前到后的，这是正向传播，而为神经网络的各个节点求导，则需要从最后一个输出节点向前推导，因为顺序是从后往前的，所以成为反向传播。我们先看一个例子。神经网络图我们有如上的神经网络，一共有 1~7 个节点，其中 1 号是输入节点，7 号是输出节点，而 2~6 号就是中间的隐藏层中的所谓...
2024-04-15 10:14:17
904
原创 实现万能近似函数: 神经网络的架构设计
经过万能近似定理的铺垫，我们知道理论上如何实现万能近似函数了，接下来我们常识用 TS 实现它，不用任何库函数，只用最原生的代码编写所有逻辑。再次强调，就像看再多全栈入门到精通也不如自己从零写一套博客系统一样，虽然现在机器学习的 python 库非常多，但自己动手从零开始实现程序对学习新知识来说非常重要。理论与实践要相互结合。首先，我们考虑 API 如何设计。API 设计API 设计是开发任何接口的...
2024-03-18 09:50:09
1271
原创 万能近似定理: 逼近任何函数的理论
我们要找到一个 model function，通过调整它的参数，可以生成任何形状的函数，也就是说这个函数拥有无限的潜力。我们的目标函数可能没有任何规律，如下图所示：那么怎么样找到一个 model function，拥有成长为（通过调参）上图函数的潜力呢？启动函数接下来，假设我们能写出以下函数 - Hard Sigmoid：通过叠加多个不同的 Hard Sigmoid 可以匹配到上图复杂函数：上图叠...
2024-03-04 10:50:45
1080
原创 机器学习简介: 寻找函数的艺术
机器学习想解决什么问题？答案是机器学习的野心很大，希望用机器解决一切人们期望解决的问题，比如文字/语音/图像识别、与人对话、完成科研任务等等，总之希望机器可以具备甚至超越人类智慧。虽然现阶段机器学习还不具备超越人类的智慧，但随着 ChatGPT 的发布，大家都看到，机器已基本具备人类智慧，甚至在某些领域已部分超越了人类智慧。可能在几年前，人们还在质疑当前机器学习方向是否正确，但随着近期取得的巨大突...
2024-02-19 09:58:38
943
原创 个人养老金利与弊
许久没有更新精读了，在停更的这段时间，每天仍有许多朋友关注前端精读，再次谢谢大家的支持。我最近仍在学习新领域知识中，预计 24 年初就可以恢复更新。为什么我会写关于个人养老金的文章？因为我是经历了从极度排斥到最后“真香”的过程。因为老婆（下文用康女士指代）的工作原因，她在极力推广这个政策，虽然故事从她那里开始，但是我觉得投资不能这么轻率，所以仔细分析了开通个人养老金的利弊，顺便把思考写成文章，包含...
2023-12-25 08:55:28
839
原创 精读《算法题 - 二叉树中的最大路径和》
今天我们看一道 leetcode hard 难度题目：二叉树中的最大路径和。题目二叉树中的 路径 被定义为一条节点序列，序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点，且不一定经过根节点。路径和 是路径中各节点值的总和。给你一个二叉树的根节点 root ，返回其 最大路径和 。示例1：输入：root=[1,2,3]输出：6解释：最...
2023-11-06 15:38:58
152
原创 精读《算法题 - 编辑距离》
今天我们看一道 leetcode hard 难度题目：编辑距离。题目给你两个单词 word1 和 word2， 请返回将 word1 转换成 word2 所使用的最少操作数。你可以对一个单词进行如下三种操作：插入一个字符删除一个字符替换一个字符示例1：输入：word1="horse",word2="ros"输出：3解释：horse->rorse(将'h'替换为'r...
2023-10-23 09:55:09
140
原创 精读《VisActor 数据可视化工具》
最近数据可视化领域开源了一套 VisActor 方案，虽然刚开源没多久，但产品矩阵已经颇有特色，我们可以从中学习一下数据可视化领域是如何设计顶层架构的，以及对未来 3-5 年可视化领域的发展规划。目前 VisActor 开源出来的库有如下几个：绘图引擎 VRender图形语法 VGrammar图表库 VChart表格 VTable其中 VChart 与 VTable 就是我们业务上常用的图表与表格...
2023-10-16 09:18:30
224
原创 精读《算法题 - 地下城游戏》
今天我们看一道 leetcode hard 难度题目：地下城游戏。恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里，他必须穿过地下城并通过对抗恶魔来拯救公主。骑士的初始健康点数为一个正整数。如果他的健康点数在某一时刻降至 0 或以下，他会立即死亡。有些房间由恶魔守卫，因此骑士在进入这些房间时...
2023-08-28 09:08:22
735
原创 精读《算法题 - 最小覆盖子串》
今天我们看一道 leetcode hard 难度题目：最小覆盖子串。题目给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串，则返回空字符串 "" 。注意：对于 t 中重复字符，我们寻找的子字符串中该字符数量必须不少于 t 中该字符数量。如果 s 中存在这样的子串，我们保证它是唯一的答案。示例 1：输入：s="ADOBE...
2023-08-14 09:10:11
66
原创 精读《算法题 - 统计可以被 K 整除的下标对数目》
今天我们看一道 leetcode hard 难度题目：统计可以被 K 整除的下标对数目。题目给你一个下标从 0 开始、长度为 n 的整数数组 nums 和一个整数 k ，返回满足下述条件的下标对 (i, j) 的数目：0 <= i < j <= n - 1 且nums[i] * nums[j] 能被 k 整除。示例 1：输入：nums=[1,2,3,4,5],k=2输...
2023-08-07 09:21:03
74
原创 精读《算法题 - 通配符匹配》
今天我们看一道 leetcode hard 难度题目：通配符匹配。题目给你一个输入字符串 (s) 和一个字符模式 (p) ，请你实现一个支持 '?' 和 '*' 匹配规则的通配符匹配：'?' 可以匹配任何单个字符。'*' 可以匹配任意字符序列（包括空字符序列）。判定匹配成功的充要条件是：字符模式必须能够 完全匹配 输入字符串（而不是部分匹配）。示例 1：输入：s="aa",p="a"...
2023-07-31 09:28:59
62
原创 精读《自由布局吸附线的实现》
本篇精读来自笔者代码实践，没有原文出处请谅解。自由布局吸附线的效果如下图所示：那么如何实现吸附线呢？我们先归纳一下吸附线的特征：正在拖动的 box 与其他 box 在水平或垂直位置距离接近时，会显示对齐线。当吸附作用产生时，鼠标在一定范围内移动都不会改变组件位置，这样鼠标对齐就产生了一定的容错性，用户不需要一像素一像素的调整位置。当鼠标拖动的足够远时，吸附作用消失，此时 box 跟手移动。根据这些...
2023-07-10 09:39:10
52
原创 精读《自由 + 磁贴混合布局》
本篇精读来自笔者代码实践，没有原文出处请谅解。早些我们介绍过了 磁贴布局 - 功能分析 与实现，现在我们来做一个更进一步的思考，如何让磁贴布局与自由布局混合实现？让磁贴布局与自由布局混合实现，从效果来看就是让画布同时存在磁贴与自由布局两种布局状态的组件，并且可以随时切换。接下来我们分析实现该方案的技术要点。磁贴与自由布局的差异磁贴布局与自由布局在交互上有很多差异，比如：磁贴布局不能重叠，自由布局可...
2023-06-19 10:40:42
73
原创 可视化搭建 - 场景实战
接下来用实战来说明该可视化搭建框架是否好用，以下几条原则需要始终贯穿在下面每个实战场景中：复杂的业务场景，背后使用的框架 API 是简单的。底层 API 并不为业务场景特殊编写，而是具有很强的抽象性，很容易挖掘出其他业务场景的用法。所有场景都是基于有限的几条基础规则实现，即背后实现的复杂度不随着业务场景复杂度提升而提升。上卷下钻上卷下钻其实是 组件作用于自身的筛选。所以上卷下钻背后的实现原理应该与...
2023-05-29 09:02:41
172
原创 可视化搭建 - 自动批处理与冻结
性能在可视化搭建也是极为重要的，如何尽可能减少业务感知，最大程度的提升性能是关键。其实声明式一定程度上可以说是牺牲了性能换来了可维护性，所以在一个完全声明式的框架下做性能优化还是非常有挑战的。我们采取了两种策略来优化性能，分别是自动批处理与冻结。自动批处理首先，框架内任何状态更新都不会立即触发响应，而是统一收集起来后，一次性触发响应，如下面的例子：constdivMeta:ComponentM...
2023-05-22 09:26:31
281
原创 ComponentLoader 与动态组件
组件通过 <Canvas /> 渲染在画布上，内容完全由组件树 componentTree 驱动，但也有一些情况我们需要把某个组件实例渲染到组件树之外，比如全屏、置顶等场景，甚至有些时候我们要渲染一个不在组件树中的临时组件，却要拥有一系列画布能力。为了让组件渲染更灵活，我们暴露出 <ComponentLoader> API:import{createDesigner}...
2023-05-08 09:25:29
82
原创 精读《利用 GPT 解读 PDF》
ChatPDF 最近比较火，上传 PDF 文件后，即可通过问答的方式让他帮你总结内容，比如让它帮你概括核心观点、询问问题，或者做观点判断。背后用到了几个比较时髦的技术，还好有 ChatGPT for YOUR OWN PDF files with LangChain 解释了背后的原理，我觉得非常精彩，因此记录下来并做一些思考，希望可以帮到大家。技术思路概括由于 GPT 非常强大，只要你把 PDF ...
2023-04-17 09:14:44
1903
2
原创 可视化搭建 - keepAlive 模式
由于 React 的特点，组件改变所在父级后会产生 Remount，而在可视化搭建场景存在两个特点：自由、磁贴、流式布局都可以通过拖拽轻松改变组件父元素。大数据量下组件 Remount 的消耗不容忽视。结合上面两个特点，拖拽过程中或者松手时不可避免会产生卡顿，这就是我们这篇文章要解决的问题。利用 createPortal 解决 Remount 问题createPortal 可以将 React 实例...
2023-03-27 08:42:50
107
原创 可视化搭建 - 组件值校验
组件值校验，即在组件值变化时判断是否满足校验逻辑，若不满足校验逻辑，可以拿到校验错误信息进行错误提示或其他逻辑处理。声明 valueValidator 可开启值校验：import{ComponentMeta}from"designer";constinput:ComponentMeta={componentName:"input",element:Input,...
2023-03-13 08:33:20
86
原创 可视化搭建 - 定义联动协议
虽然底层框架提供了通用的组件值与联动配置，可以建立对组件任意 props 的映射，但这只是一个能力，还不是协议。业务层是可以确定一个协议的，还要让这个协议具有拓展性。我们先从使用者角度设计 API，再看看如何根据已有的组件值与联动能力去实现。设计联动协议首先，不同的业务方会定义不同的联动协议，因此该联动协议需要通过拓展的方式注入：import{createDesigner}from'de...
2023-03-06 09:02:49
99
原创 可视化搭建 - 组件值与联动
组件联动是指几个组件相互关联。也就是当一个组件状态变化时，其他组件可以响应。组件联动是多对多关系的，且目的分为一次性与持续性：多对多关系：即一个组件可以同时被多个组件联动；多个组件可以同时联动一个组件。一次性与持续性：一次性事件可以被覆盖，持续性事件会同时生效，且要考虑叠加关系。一定程度上，持续性事件可以覆盖一次性事件的场景：组件永远响应最后一个过来的事件即可。接下来我们引入 组件值 与 值联动 ...
2023-02-27 10:09:42
160
原创 可视化搭建 - 容器组件设计
可视化搭建会遇到如下三类容器组件：简单容器：以 children 容纳子组件的容器。卡片容器：以 props.header 加上 props.header 等多个插槽容纳子组件的容器。Tab 容器：以 props.tabPanel[x] 等动态数量插槽容纳子组件的容器。画布本身也是一个容器组件，所以可视化搭建离不开容器。另一方面，我们应该允许给组件 props 传入 React 组件实例，但组件树...
2023-02-20 08:54:04
165
原创 可视化搭建内置 API
在设计好画布与组件数据流体系后，理论上主体功能已经完成，但缺乏方便易用的 API，所以还需要内置一些状态与方法。但是内置状态与方法必须寻求业务的最大公约数，极具抽象性，添加需慎重。接下来我们从必须有与建议有的角度，看看一个可视化搭建需要内置哪些 API。状态状态是可变的，引用方式有如下两种。第一种在任意 React 组件内通过 useDesigner 访问，当状态变化时会触发所在组件重渲染：con...
2023-02-13 10:16:46
189
原创 画布与组件元信息数据流
接下来需要解决两个问题：可视化搭建的其他业务元素如何与画布交互。比如拓展属性配置面板、图层列表、拖拽添加组件、定位锚点、主题等等。runtimeProps 如何访问到当前组件实例的 props。这两个问题非常重要，而恰好又可以通过良好的数据流设计一次性解决，接下来让我们分别分析讨论一下。问题一：可视化搭建的其他业务元素如何与画布交互。比如拓展属性配置面板、图层列表、拖拽添加组件、定位锚点、主题等等...
2023-02-06 09:30:46
110
原创 组件注册与画布渲染
接着可视化搭建的理论抽象，我们开始勾勒一个具体的 React 可视化搭建器。精读假如我们将可视化搭建整体定义为 <Designer>，那么 API 可能是这样的：<Designer componentMetas={[]} componentTree={} />componentMetas: 定义组件元信息的数组。componentTree: 定义组件树结构。只要注册了组件元...
2023-01-16 10:32:40
119
原创 精读《如何抽象可视化搭建》
在做任何可视化搭建项目时，第一步都要思考如何抽象。如果不抽象，当搭建项目做到后期可能会出现 API 杂乱，难以维护的问题；做到一半甚至会怀疑为什么需要一个搭建框架，怀疑把框架去掉会不会效率更高；在后期发现不能自然的水平拓展到仪表盘、大屏、表单搭建场景等。所以如果在维护一套可视化搭建系统时，不管这个系统的上层是 BI、大屏、表单填报，还是脑图也好，无论是什么，都要先思考一下这些系统背后的底层是什么，...
2023-01-09 10:11:10
131
原创 精读《磁贴布局 - 性能优化》
经过上一篇 精读《磁贴布局 - 功能实现》 的介绍，这次我们进入性能优化环节。精读磁贴布局性能优化方式有很多，比如通过空间换时间，存储父子关系的索引，方便快速查找到目标组件。但有一个最核心的性能优化点，即碰撞性能优化。试想，最朴素的判断组件碰撞方法是什么？一般会遍历画布所有的组件，根据当前组件位置与目标组件位置的相对位置判断是否产生碰撞，所以仅判断单个组件碰撞时，时间复杂度是 O(n)。但磁贴布局...
2022-12-26 10:18:10
243
原创 精读《磁贴布局 - 功能实现》
经过上一篇 精读《磁贴布局 - 功能分析》 的分析，这次我们进入实现环节。精读实现磁贴布局前，先要实现最基础的组件拖拽流程，然后我们才好在拖拽的基础上增加磁贴效果。基础拖拽能力对布局抽象来说，它关心的就是 可拖拽的组件 与 容器 的 DOM，至于这些 DOM 是如何创建的都可以不用关心，在这个基础上，甚至可以再做一套搭建或者布局框架层，专门实现对 DOM 的管理，但这篇文章还是聚焦在布局的实现层。...
2022-12-12 09:25:34
229
原创 精读《磁贴布局 - 功能分析》
磁贴布局三部曲：功能分析、实现分析、性能优化的第一部 - 功能分析。因为需要做自由布局与磁贴布局混排，以及磁贴布局嵌套，所以要实现一套磁贴分析功能，所以本系列不是简单的介绍使用 react-grid-layout 这个库就行了，而是深入分析磁贴布局的特性，以及重头实现一遍。对磁贴布局不熟悉的话，react-grid-layout 也是个很好的 Demo 体验页，大家可以先体验一下再阅读文章。精读简...
2022-12-05 10:05:45
294
原创 精读《维护好一个复杂项目》
现在许多国内互联网公司的项目都持续了五年左右，美国老牌公司如 IBM 的项目甚至持续维护了十五年，然而这些项目却有着截然不同的维护成本，有的公司项目运作几年后维护成本依然与初创期不大，可以保持较为高效的迭代速度，但有的项目甚至改几个文案都会导致线上事故，研发效率变得越来越慢。根据笔者的经验，尝试总结一些持续维护项目变得难以维护的原因，以及如何设计才能保持良好的可维护性。精读心态如果不真心对待自己的...
2022-11-21 09:39:20
212
原创 精读《我们为何弃用 css-in-js》
emotion 排名第二的维护者 Sam 所在公司弃用了 css-in-js 方案，引起了不小的讨论：Why We're Breaking Up with CSS-in-JS概述 & 精读原文很有有条理，先从 css-in-js 优点说起，再转而谈到缺点，说明了 css-in-js 这个新事物拥有明显的优点与缺点；然后从性能问题作为切入点，说明自己所在的公司为什么不得不抛弃 css-in-...
2022-11-14 09:06:14
313
原创 精读《迭代器 Iterable》
本周精读的文章是 Iterables 与 Iteration protocols，按照为什么需要迭代器、迭代器是如何设计的，我们还能怎么利用迭代器展开来讲。概述为什么需要迭代器因为用 for ... of 循环数组非常方便，但如果仅数组才支持这个语法就太过于麻烦了，比如我们自然会希望 for ... of 可以遍历字符串的每个字符，希望 new Set([1, 2, 3]) 可以快速初始化一个新的...
2022-11-07 09:30:56
171
原创 精读《如何为 TS 类型写单测》
如何为 TS 类型写单测呢？最简单的办法就是试探性访问属性，如果该属性访问不到自然会在异常时出现错误，如：import{myLib}from"code";myLib.update;//正确如上所示，如果 myLib 没有正确的开放 update 属性将会提示错误。但这种单测并不是我们要讲的类型。想一想，如果我们只开放 .update API 给用户，但框架内部可以使用全量的 .up...
2022-10-24 10:21:00
158
原创 精读《Headless 组件用法与原理》
Headless 组件即无 UI 组件，框架仅提供逻辑，UI 交给业务实现。这样带来的好处是业务有极大的 UI 自定义空间，而对框架来说，只考虑逻辑可以让自己更轻松的覆盖更多场景，满足更多开发者不同的诉求。我们以 headlessui-tabs 为例看看它的用法，并读一读 源码。概述headless tabs 最简单的用法如下：import{Tab}from"@headlessui/re...
2022-10-17 09:32:41
404
原创 精读《proposal-extractors》
proposal-extractors 是一个关于解构能力增强的提案，支持在直接解构时执行自定义逻辑。概述const[first,second]=arr;const{name,age}=obj;以上就是解构带来的便利，如果没有解构语法，相同的实现我们需要这么做：constfirst=arr[0];constsecond=arr[1];constname=...
2022-09-26 09:15:32
255
原创 精读《State of CSS 2022》
本周读一读 State of CSS 2022 介绍的 CSS 特性。概述2022 已经支持的特性@layer解决业务代码的 !important 问题。为什么业务代码需要用 !important 解决问题？因为 css 优先级由文件申明顺序有关，而现在大量业务使用动态插入 css 的方案，插入的时机与 js 文件加载与执行时间有关，这就导致了样式优先级不固定。@layer 允许业务定义样式优先级...
2022-09-19 09:13:44
124
原创 精读《依赖注入简介》
精读文章：Dependency Injection in JS/TS – Part 1概述依赖注入是将函数内部实现抽象为参数，使我们更方便控制这些它们。原文按照 “如何解决无法做单测的问题、统一依赖注入的入口、如何自动保证依赖顺序正确、循环依赖怎么解决、自上而下 vs 自下而上编程思维” 的思路，将依赖注入从想法起点，到延伸出来的特性连贯的串了起来。如何解决无法做单测的问题如果一个函数内容实现是随...
2022-09-05 09:20:17
215
原创 精读《pnpm》
pnpm 全称是 “Performant NPM”，即高性能的 npm。它结合软硬链接与新的依赖组织方式，大大提升了包管理的效率，也同时解决了 “幻影依赖” 的问题，让包管理更加规范，减少潜在风险发生的可能性。使用 pnpm 很容易，可以使用 npm 安装：npmipnpm-g之后便可用 pnpm 代替 npm 命令了，比如最重要的安装包步骤，可以使用 pnpm i 代替 npm i，这样就...
2022-08-15 09:11:38
423
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人