林克日记

我做的前端友好的股票行情 SDK，被阮一峰的科技爱好者周刊收录了
我做的前端友好的股票行情 SDK，被阮一峰的科技爱好者周刊收录了
发表于|实践
某天打开 GitHub 通知，看到一个用户提的 issue 标题写着： 建议投稿到「阮一峰的科技爱好者周刊」 我笑了笑，没太当回事 —— 一个刚开源不久的小工具，能被周刊收录的概率并不大。 但几周之后，我真的在 issue-397 里看到了自己的项目。那一刻，比拿到 star 还开心 —— 因为这意味着，一个原本只是为了「让前端不再绕道 Python 拿股票数据」而写的小工具，被更多需要它的人看到了。 随之而来的变化也很真实： 📦 版本一路迭代到 v1.10.0 ⭐ GitHub 收获 940+ stars 🐛 收到并解决了 10+ 个 issues —— 从 “希望支持板块概念”、”希望支持基金行情”，到 “希望搜索接口返回股票/ETF 类型”，每一条都让 SDK 变得更扎实 这篇文章想做的事很简单：把 stock-sdk 当前的全景能力，完整地讲一遍。如果你是前端工程师、量化爱好者、做行情看板的独立开发者，或者正在用 AI 工具搭金融小应用，希望它能帮你少走点弯路。 它解决了什么问题？如果你是前端开发者，大概率遇到过这些场景： 想做个行情看板 &...
给 stock-sdk 接了个 AI 大脑：MCP + Skills 玩法全解
给 stock-sdk 接了个 AI 大脑：MCP + Skills 玩法全解
发表于|实践
当 AI 助手变成你的”私人盯盘员”：一行配置，让 Cursor / Claude 拥有实时股票行情、技术分析和全市场选股能力。 基于 stock-sdk 构建的 MCP Server + 4 个 AI Skills，不用写一行代码就能让 AI 帮你看盘、分析、筛股。 这件事是怎么开始的用过 Cursor 或者 Claude 的人应该都有感受： AI 越来越聪明了，有些工具也开始能联网查信息了。但说到”查一下茅台今天的 MACD 什么情况”、”帮我拉一下最近 60 天的日 K 线”这种专业的金融数据查询，大部分 AI 工具还是力不从心——要么没有对应的数据源，要么返回的结果太粗糙，缺少技术指标、盘口数据这些细节。 更别说”帮我筛一下今天科创板涨幅前 10 的股票”这种需要全市场扫描的需求了。 但如果我把 stock-sdk 的能力通过 MCP 协议”喂”给它呢？ 这就是 stock-sdk-mcp 干的事。 MCP 是什么？30 秒讲清楚MCP 全称 Model Context Protocol，Anthropic 搞的一个开放协议。你可以把它理解成”AI 的 US...
kline-charts-react：我写了个 React K 线图组件
kline-charts-react：我写了个 React K 线图组件
发表于|实践
前端开发者想画个 K 线图有多难？ 市面上的组件大致分三类：专业级的要授权费还体积巨大；简陋级的 UI 像 2012 年的审美；祖传代码级的上次更新是三年前。所以干脆自己撸一个：传个股票代码就能渲染，支持 15 种技术指标，数据源可插拔。 起因事情是这样的。 前段时间接了个需求，要在页面里嵌一个股票 K 线图。我心想，这还不简单？npm 上搜一搜，装一个不就完了。 然后我就去搜了。 搜完之后我沉默了。 市面上的 K 线图组件，大致分三类： 专业级的 —— TradingView 那种，功能确实强，但商用要授权费，而且体积大到能撑爆你的 bundle 简陋级的 —— 功能勉强能用，但 UI 像是 2012 年的审美，鼠标交互约等于没有 祖传代码级的 —— 上一次更新是三年前，issues 里面全是 “Is this project still maintained?” 我就想，行吧，自己撸一个。 kline-charts-react在线演示：kline-charts-react Demo 直接看效果，最简使用就这么几行： 123456import { KLine...
我用 stock-sdk 做了一个纯前端的 A 股看板
我用 stock-sdk 做了一个纯前端的 A 股看板
发表于|实践
先交代一下背景：我平时看盘有个“坏习惯”——开一堆 APP/网页，然后在它们之间疯狂切换，最后得到的不是信息，而是焦虑。 所以干脆自己写一个：打开一个页面，把常用的行情、板块、分时、K 线、资金面、筛选工具都塞进去。 这个项目就是 stock-dashboard：React + TypeScript + Vite 的前端看板。数据源全部来自 stock-sdk，没有后端、没有 Python 定时脚本，就是纯前端直接拉数据。 体验地址我直接放这： stock-dashboard （如果你也想摸鱼，记得开小窗）。 先说最关键的：数据层怎么接的？项目里我把 stock-sdk 的调用统一收口到了 src/services/sdk.ts。 这里做了三件很“工程化但不装”的事： SDK 单例 + 重试new StockSDK({ timeout, retry })，网络抖一下、接口偶发超时这种事就交给 SDK 自己兜底（最多重试 3 次，指数退避那套）。 内存缓存（TTL）行业/概念列表这种 10 秒内不会突然“宇宙大爆炸”的数据，缓存一...
我写了个“能少写点代码”的汇率 SDK：Exchange Rate SDK
我写了个“能少写点代码”的汇率 SDK：Exchange Rate SDK
发表于|实践
如果你做过电商、出海、旅行、订阅制产品，或者任何“用户可能会拿着不同货币来烦你”的业务，你大概率经历过这种对话： 产品/老板：这个页面加个汇率换算吧，很简单的。你：行啊。（内心：又来了） 因为“很简单”的背后通常是： 选个汇率接口（最好不要 key，不要注册，不要配额，不要收费……懂的都懂） 处理超时、网络抖动、429/5xx（不然线上会让你看到人间真实） 缓存（不然你会被同事/自己/用户一起打爆） 货币列表（最好还能搜中文，不然“人民币”三个字能让你写一整套映射） 最后再把这些东西重复粘贴到下一个项目里，继续假装这叫“沉淀” 于是我写了 exchange-rate-sdk：一个轻量级、跨平台（浏览器 + Node.js）的汇率查询 SDK。它的目标就一个：把这些“每个项目都要做一遍、又不想做一遍”的活儿，打包成一个你能直接用的工具。 如果你只想先试试水，直接去 Playground：https://chengzuopeng.github.io/exchange-rate-sdk/ 顺手把链接也放这儿（方便你收藏/转发&#...
从单文件到可扩展：我给 stock-sdk 做的一次架构升级
从单文件到可扩展：我给 stock-sdk 做的一次架构升级
发表于|实践
这篇文章不是一份“正式的技术方案文档”，而是站在工具作者的视角，记录我在给 stock-sdk 做一次比较大的架构升级时，真实的思考过程、取舍以及落地方案。 如果你也维护过一个“越写越大的 SDK / 工具库”，大概率会在下面的某些场景里看到自己的影子。 背景：当一个 SDK 开始“失控”在很长一段时间里，stock-sdk 的代码结构其实非常简单： 一个 sdk.ts 一些工具函数 一份类型定义 这样写在早期非常爽： 新功能直接往里加 一个文件就能看到所有逻辑 调试也很直观 但问题在于，它会一直长。 当 sdk.ts 的体量来到一千多行之后，一些信号开始变得明显： 找一个方法要不停地滚动 改一个功能，总担心影响到旁边完全不相关的逻辑 测试文件也跟着一起膨胀 心理上开始抗拒“再往这里加东西” 这不是某一行代码的问题，而是结构已经不再适合继续演进。 我给这次重构定下的几个底线在真正动手之前，我先给自己划了几条“红线”，否则很容易越改越乱： 对外 API 必须完全兼容（这是 SDK，不是业务项目） 可以慢慢迁，但不能一次性推翻重来 结构要能撑得住未来继...
stock-sdk：为前端设计的股票行情 SDK
stock-sdk：为前端设计的股票行情 SDK
发表于|实践
做过金融相关的前端（哪怕只是行情看板 Demo），大概率都会遇到一些工程层面的麻烦： 股票行情工具大多集中在 Python 生态，前端难以直接使用 为了拉数据，不得不自建一层后端中转 接口格式混乱、字段不友好，还要处理 GBK 编码 全市场批量拉取时，并发、限频、容错一堆细节要自己兜 stock-sdk 做的事很朴素：把这些公开数据源的“工程脏活”封装起来，提供一个 零依赖、TypeScript 友好、浏览器与 Node.js 都能用 的行情 SDK，让前端可以像调用普通 API 一样获取行情、K 线和分时数据。 前阵子有个朋友问我：抓股票行情数据是不是必须学 Python？ 我说不一定啊，JavaScript 也能搞。 他不信，说你随便找个能用的 JS 股票数据库试试？ 我还真试了。然后发现……他说得对，真没几个能用的。 被迫营业事情是这样的。 我本来只是想给自己做个小工具，每天早上打开浏览器就能看到自选股涨跌的那种。功能很简单，就是个看板页面，技术上也没什么难度。 难的是数据从哪来。 找了一圈才发现，股票数据这块，Python 生态是真的强。AkShare、Tusha...
React 源码深潜（五）：Memoization 双子星与 Suspense 的悬停魔法
React 源码深潜（五）：Memoization 双子星与 Suspense 的悬停魔法
发表于|学习
在前四篇中，我们走完了 React 核心架构的”主线任务”：Fiber、渲染流程、Hooks、并发模式。从这一篇开始，我们进入”支线副本”——那些你日常开发中高频使用，但底层原理很少有人说清楚的 API。 本篇覆盖两个主题：Memoization 双子星（useMemo / useCallback） 和 Suspense 机制。它们一个关于”跳过不必要的计算”，一个关于”等待异步数据”，但底层都深深扎根在 Fiber 链表和工作循环中。 第一部分：性能优化的双子星——useMemo 与 useCallbackuseMemo 和 useCallback 在社区里经常被过度使用，也经常被误解。要搞清楚什么时候该用、什么时候不该用，最好的方式就是看看它们在源码里到底做了什么——你会发现，它们的实现朴素得令人意外。 1. 底层存储结构在第三篇中我们讲过，所有 Hooks 的数据都挂在 Fiber 节点的 memoizedState 链表上。useMemo 和 useCallback 也不例外，它们存的只是一个简单的二元组： 12345// 每个 useMemo / use...
React 源码深潜（四）：并发模式与 useTransition 的"时间魔法"
React 源码深潜（四）：并发模式与 useTransition 的"时间魔法"
发表于|学习
在前三篇中，我们构建了 Fiber 架构（骨架）、梳理了渲染流程（经络）、解析了 Hooks 原理（记忆）。现在，我们要解决最后一个、也是最直接影响用户体验的问题： 如何让应用在繁重的计算下依然保持丝滑的响应？ 这就是 React 18 并发模式要回答的核心命题。 1. 经典难题：输入框卡顿之谜想象一个常见的场景：搜索框。 用户在输入框打字，下方需要根据输入内容渲染一个包含几千条数据的列表。 这里有两个性质完全不同的任务： 输入回显（High Priority）：用户敲键盘，屏幕需要立即显示字符，延迟超过 100ms 就会产生明显的”卡顿感” 列表渲染（Low Priority）：下方的搜索结果需要大量 DOM 操作，可能要跑几百毫秒 在 React 18 之前（或不加优化）： React 会把这两个更新当成一回事，放在同一个渲染任务里处理。一旦开始渲染列表，主线程就被占满。用户敲键盘，但屏幕上字出不来——因为浏览器正忙着画那几千条列表。 graph TD A["用户按下 'a'"] --> B["s...
React 源码深潜（三）：Hooks 的幻术——闭包快照与链表存储
React 源码深潜（三）：Hooks 的幻术——闭包快照与链表存储
发表于|学习
在 React 16.8 之前，只有 Class 组件才能保存状态。Hooks 的出现让函数组件拥有了”记忆”，但如果你停下来想一想，会发现一个反直觉的事实：函数执行完毕后，所有局部变量都会被销毁——React 到底把状态藏在了哪里？ 本篇从这个问题出发，完整拆解 Hooks 的两大核心原理。 1. 直击灵魂的拷问：状态去哪了？先看这段最简单的代码： 1234567function Counter() { const [count, setCount] = useState(0); console.log('Render:', count); return <button onClick={() => setCount(count + 1)}>{count}</button>;} 当我们点击按钮： setCount(1) 触发 React 更新 Counter 函数重新执行 再次运行到 const [count, setCount] = useState(...
avatar
Link
文章
58
标签
6
分类
3
Follow Me
最新文章
我做的前端友好的股票行情 SDK，被阮一峰的科技爱好者周刊收录了
我做的前端友好的股票行情 SDK，被阮一峰的科技爱好者周刊收录了
给 stock-sdk 接了个 AI 大脑：MCP + Skills 玩法全解
给 stock-sdk 接了个 AI 大脑：MCP + Skills 玩法全解
kline-charts-react：我写了个 React K 线图组件
kline-charts-react：我写了个 React K 线图组件
我用 stock-sdk 做了一个纯前端的 A 股看板
我用 stock-sdk 做了一个纯前端的 A 股看板
我写了个“能少写点代码”的汇率 SDK：Exchange Rate SDK
我写了个“能少写点代码”的汇率 SDK：Exchange Rate SDK
分类
标签
浏览器 HTML 工程化 JavaScript 工具 React
归档
网站信息
文章数目 :
58
本站总字数 :
112.2k
本站访客数 :
本站总浏览量 :
最后更新时间 :
`],{type:"text/html;charset=utf-8"});let e=URL.createObjectURL(r);window.open(e,"_blank","noopener"),setTimeout(()=>URL.revokeObjectURL(e),3e4)}},o=r=>{let e=r.querySelector(".mermaid-open-btn");e||((e=document.createElement("button")).type="button",e.className="mermaid-open-btn",r.appendChild(e)),e.innerHTML='',e.__mermaidViewerBound||(e.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation();var t,e=r.__mermaidOriginalSvg||r.querySelector("svg");e&&(t=r.__mermaidInitViewBox,n({source:e,initViewBox:t}))}),e.__mermaidViewerBound=!0)},u=(e,t,r,i)=>{var n=e[2]*t;return[r-(r-e[0])*t,i-(i-e[1])*t,n,e[3]*t]},d=d=>{let m=d.querySelector("svg");if(m){var e=l(m);if(d.__mermaidInitViewBox=e,d.__mermaidCurViewBox=e.slice(),r(m,e),!d.__mermaidGestureBound){d.__mermaidGestureBound=!0;let n=(e,t)=>{var r=m.getBoundingClientRect(),i=d.__mermaidCurViewBox||l(m);return{x:i[0]+(e-r.left)*(i[2]/r.width),y:i[1]+i[3]/r.height*(t-r.top),rect:r,vb:i}},a={pointers:new Map,startVb:null,startDist:0,startCenter:null},t=e=>{var t=d.__mermaidInitViewBox||e,r=.1*t[2],i=10*t[2],n=.1*t[3],t=10*t[3];return e[2]=s(e[2],r,i),e[3]=s(e[3],n,t),e},o=e=>{e=t(e),d.__mermaidCurViewBox=e,r(m,e)};e=e=>{a.pointers.delete(e.pointerId),0===a.pointers.size?(a.startVb=null,a.startDist=0,a.startCenter=null,d.__mermaidLastSinglePointer=null):1===a.pointers.size&&(d.__mermaidLastSinglePointer=[...a.pointers.values()][0])};m.addEventListener("pointerdown",e=>{var t,r;"mouse"===e.pointerType&&0!==e.button||(m.setPointerCapture(e.pointerId),a.pointers.set(e.pointerId,{x:e.clientX,y:e.clientY}),1===a.pointers.size?a.startVb=(d.__mermaidCurViewBox||l(m)).slice():2===a.pointers.size&&(t=(e=[...a.pointers.values()])[0].x-e[1].x,r=e[0].y-e[1].y,a.startDist=Math.hypot(t,r),a.startVb=(d.__mermaidCurViewBox||l(m)).slice(),a.startCenter={x:(e[0].x+e[1].x)/2,y:(e[0].y+e[1].y)/2}))}),m.addEventListener("pointermove",e=>{var t,r,i;a.pointers.has(e.pointerId)&&(a.pointers.set(e.pointerId,{x:e.clientX,y:e.clientY}),1===a.pointers.size&&a.startVb?(r=[...a.pointers.values()][0],e.clientX,e=d.__mermaidLastSinglePointer||r,i=r.x-e.x,e=r.y-e.y,r=(d.__mermaidLastSinglePointer=r,n(r.x,r.y)).rect,t=i*((i=(d.__mermaidCurViewBox||l(m)).slice())[2]/r.width),e=e*(i[3]/r.height),o([i[0]-t,i[1]-e,i[2],i[3]])):2===a.pointers.size&&a.startVb&&0{e.preventDefault();var t=0{var e=d.__mermaidInitViewBox;e&&(d.__mermaidCurViewBox=e.slice(),r(m,e))})}}};var e=()=>{var e;0!==(e=document.querySelectorAll("pre > code.mermaid")).length&&e.forEach(e=>{var t=document.createElement("pre"),r=(t.className="mermaid-src",t.hidden=!0,t.textContent=e.textContent,document.createElement("div"));r.className="mermaid-wrap",r.appendChild(t),e.parentNode.replaceWith(r)});let t=document.querySelectorAll("#article-container .mermaid-wrap");0!==t.length&&(e=()=>(e=>{window.loadMermaid=!0;let a="dark"===document.documentElement.getAttribute("data-theme")?"dark":"default";e.forEach((t,e)=>{let r=t.firstElementChild;var i=t.querySelector("svg"),i=(i&&i.remove(),t.__mermaidGestureBound=!1,r.dataset.config?JSON.parse(r.dataset.config):{}),i=(i.theme||(i.theme=a),`%%{init: ${JSON.stringify(i)}}%% `),i=i+r.textContent,e=mermaid.render("mermaid-"+e,i);let n=e=>{r.insertAdjacentHTML("afterend",e),d(t),t.__mermaidOriginalSvg=e,o(t)};"string"==typeof e?n(e):e.then(({svg:e})=>n(e))})})(t),btf.addGlobalFn("themeChange",e,"mermaid"),window.loadMermaid?e():btf.getScript("https://cdn.jsdelivr.net/npm/mermaid@11.12.2/dist/mermaid.min.js").then(e))};btf.addGlobalFn("encrypt",e,"mermaid"),window.pjax?e():document.addEventListener("DOMContentLoaded",e)})()