V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
This topic created in 1095 days ago, the information mentioned may be changed or developed.
前言
花了一年多的业余时间做了个移动 web 组件库 - STDF 。在此特别感谢我的老婆大人，承担了家里的很多杂事，才让我有时间做这个东西。
GitHub： https://github.com/dufu1991/stdf
欢迎到 GitHub 上提 Issue 和 PR ，使它强大，使它更好！可以帮助到更多的人。
我想说一句，使用 Svelte 和 Tailwind 写代码真的是太爽了！
为何写这个组件库
首先最重要的是补充 Svelte 生态。
关于 UI 组件库，PC 端有很多优秀的产品，但是移动端并没有能与 PC 端比肩的产品，这是由于移动端的特殊性导致的。移动端产品大多数是 To C 业务，这就要求对组件库的灵活性有更高的要求。在设计组件 API 的时候，需要有更多的参数支持可供配置，但又不能设计得太过复杂。而在 UI 设计方面，不能有太多的个性化设计，这样才能达到组件的复用性。
市面上也有很多移动端的组件库，但是使用下来还是有很多痛点，比如一些组件库的设计风格太过个性化，导致组件的复用性不高；一些组件库的可配置 API 太少，无法通过简单的 API 配置出符合业务需求的组件；一些组件库的文档太过高深或简陋，使初上手的人很难理解组件的使用方法；一些组件库的文档和 Demo 中英混杂，难以查阅；一些组件库的 Demo 太少或太简陋，高频使用时无法直接复制使用，降低开发效率等。
在体验过 Svelte 和 Tailwind 之后，发现使用它们开发真的是非常舒服，所以就想着能不能把它们结合起来，做一个移动端的 UI 组件库。这样的话，就能够在移动端也享受到 Svelte 和 Tailwind 带来的开发体验了。
适用场景
在移动端有一种业务场景，应用不算复杂，使用 Vue 或者 React 开发其实会显得「大材小用」了，可能整个应用打包之后的 JS 体积也就几十 KB ，但是使用 Vue 或者 React 开发，这两个库的基础大小就超过了几十 KB ，这样就得不偿失了，而且移动端 To C 应用体积过大是非常不可取的。但是使用纯原生 JS 开发，又会显得开发效率低下，这个时候 Svelte 就是一个很好的选择，它的简洁语法，使原生 JS 代码有了响应式能力。
关于开源
除了 IT ，这个世界上应该没有任何一个行业会有这样一群人，他们把自己的时间和精力投入到一个项目中，然后把这个项目毫无保留地免费开源出来，让全世界的人都可以免费使用，而且还会不断地维护和更新这个项目，这就是开源社区的魅力所在。我崇拜这些改变世界的人，我也想成为其中的一员，哪怕只是一粒尘埃。
不要去讨论哪些什么国内开源环境糟糕之类的话题，把自己的想法 code 出来，然后开源出来，可能不完善，但有人用有人提 issue ，它就是有价值的。开源是一种精神，不需要任何理由，只要你想做，就去做。
结束
前段时间，一个阿里的朋友看到我在写这个组件库，不由发出感叹，还在卷组件库呢！是啊，2023 年了竟然还有人在写组件库。但 STDF 还是有一些非常适合的场景，而且它拥有足够灵活的 API 可供配置，有丰富的示例展示。对比大厂的组件库，它很弱小但也有其存在的价值。
面对来势汹汹的 AI ，写代码这种倾向于固定逻辑的工作可能是最先被 AI 取代的，但是我还是会继续写代码，因为我喜欢这种创造的过程，我喜欢这种思考的过程，我喜欢这种不断学习的过程，我喜欢这种完成一个功能的成就感。
创意，是 AI 无法取代的。
昨晚和一群高中同学吃饭，他又提我写书的玩笑，可惜的是，我的文字细胞已经死了。换个角度，如果将这个组件库的站点、文档、示例全部打印出来，牵强一点，也可以算是一本书了吧！
对世界永远保持敬畏与好奇，生命不息，折腾不止！希望自己永远年轻，永远热泪盈眶。
此文由 GitHub Copilot 辅助完成，但是我并不想感谢它。
 |
1
leoQaQ Apr 28, 2023
首页有个 bug ，滑到底部顶部会一直闪烁
|
 |
2
wingkwanli888 Apr 28, 2023 via iPhone
不错啊，没记错的话 Svelte 社区好像还没有符合中国人使用习惯的移动端开源 UI 库，这应该是第一个
|
 |
3
zyj1022 Apr 28, 2023
顶一个！！
|
 |
4
qiayue PRO 看起来不错。
起步教程那里，需要能够写一篇完全 step by step 的教程给后端看，完全不会也不懂前端工程搭建，看到你的文档也不知道该怎么操作。 |
 |
5
296727 Apr 28, 2023
首页的 fps 只有 4 ，卡的不行
|
 |
6
linauror Apr 28, 2023  2
这个默认蓝色有点刺眼的感觉
|
|
7
296727 Apr 28, 2023
|
 |
8
andrew2558 Apr 28, 2023
提个建议：组件页面，可以将组件的展示突出些(在屏幕中间，占用大部分空间)，而代码可以收缩起来，当用户有需要时再手动展开代码
|
 |
9
jerry12547 Apr 28, 2023
首页那个 3d 动画有点卡
|
 |
10
yangheng4922 Apr 28, 2023
好看 ，动画也很丝滑
|
 |
11
aper Apr 28, 2023
CPU 10700 打开首页 CPU 占用 100%
|
 |
12
xwayway Apr 28, 2023
不错不错
|
 |
13
yikeshuo Apr 28, 2023
赞赞
|
 |
14
17681880207 Apr 28, 2023 2
Open Srouce 对程序员而言，就是精神上的桃花源，美好又神圣~相信每一个 Star 和 Issue 都会给每一个开源作者内心无比的满足。
如果我也可以像作者一样,那我觉得这件事情... |
 |
15
AnroZ Apr 28, 2023
作为外行，看着还以，点赞
|
 |
16
jchencode Apr 28, 2023
牛批，赞赞赞，很棒！支持下！
|
 |
17
Laobai Apr 28, 2023
老哥，牛批！！！
|
 |
18
2I0Mto2kjm0c0B9i Apr 28, 2023
赞
|
 |
19
luoxiang Apr 28, 2023
niubi
|
 |
20
imchenlong Apr 28, 2023
非常不错。
|
 |
21
1044523901 Apr 28, 2023
人手一个 ui 库啊，不错~
|
 |
22
KevinDo2 Apr 28, 2023
你组件库里的开关组件动效好爽好解压啊，我刚刚切换了几十次
|
 |
23
tracerking Apr 28, 2023
不错不错 最近我也在搞基于 svelte 的 ui 组件 没想到已经出来了
|
 |
24
llo Apr 28, 2023
赶紧非常不错
|
 |
25
BeijingBaby Apr 28, 2023
看了一下很赞，下期 dev.com.cn 周报推荐一下
（个人原因停更几期，马上恢复更新） |
 |
26
IamJ Apr 28, 2023
赞。楼主这文档网站是用什么搭的？
|
 |
27
TaoLoading Apr 28, 2023
OP 牛逼。另外官网有点小 bug ，当顶部操作栏与“优势 & 目标”的第二行头部位置重叠时，会有闪烁
|
 |
28
chenpbh Apr 28, 2023
dota
|
 |
30
dufu1991 OP @296727 首页因为有 3D 模型，开始渲染的时候会比较吃 CPU 和 GPU ，确实会掉帧，加载完成后还好。不过一般首页也就第一次打开会看一下，后续都主要是在组件页面。
|
|
32
dufu1991 OP @andrew2558 我开发的个人喜好是，找到 Demo 中符合自己的部分，直接复制代码使用，不用再去查看具体 API 。所以 STDF 的 Demo 写的非常多，多到有点罗嗦的地步。所以我认为代码部分很重要。
|
|
33
dufu1991 OP @tracerking 可以搞桌面端的，那才是大工程。
|
|
34
dufu1991 OP @IamJ 就是 Svelte 和 Tailwind ，只是搭建得很早，当时 Vite 还不成熟，打包使用的还是 Rollup 。Demo 用的就是 Vite 。
|
 |
36
assclb Apr 28, 2023
已 star
|
 |
38
azui999 Apr 28, 2023
看的晕了,
|
 |
39
WGinit Apr 28, 2023
点赞👍，看到了前端老哥的情怀
|
 |
40
intmax2147483647 Apr 28, 2023
一个人做的吗
|
 |
41
akring Apr 28, 2023
网站没做宽屏适配的吗，34 寸带鱼屏看起来有点诡异
|
 |
42
buxudashi Apr 28, 2023
但是一旦使用，就得又定制。 这一弄组件库就得改，改起来的成本 也不小。
|
 |
43
beginor Apr 28, 2023
赞！
开源传万世，因有我参与！ |
 |
44
dreamramon Apr 28, 2023
最好有个教程能让后端的同学直接开工。。。
|
 |
45
earthmessenger Apr 28, 2023
组件文档标题旁的句子挺有趣的
|
 |
46
yamedie Apr 28, 2023
终于看到一个 Material Design 风格以外的“完成度足够高的 Svelte 组件库”，收藏了，感谢楼主的付出！
----- 但还是想杠一下关于开源的那段话，愿意开源的职业应该有很多种吧，学者、作家、教师、医生…… 另外 IT 也有相当一部分人达不到有作品可以开源的水平（他们只会 CURD 或者调包），还有很大一部分人闭源赚钱…… （我的意思是没必要太刻意的把 IT 升格 XD ） ----- 草草看了一下，关于组件库提点小建议： 1 、很多尺寸的定义写在 script 里，比如在 TabBar 的 labels 里定义 size: 20 ，这个怎么适配不同分辨率的移动设备？比如我用 iPad Mini 屏幕宽度有 768px ，看这个 TabBar 时，图标大小仍然是很小的 20px ，四个图标之间有巨大的空档。我不知道 postCSS 的 px2rem 插件方不方便跟这个组件库集成起来……（怎么实现 px 自动转换成 rem 或 vw 单位，以适配多种屏幕尺寸？） 2 、Loading 组件竟然有十几种之多，type="1_1"这种命名方式有点不严谨，以后扩展只能是 1_18 或 2_1 这样了吗，能不能尽量把它们语义化 3 、Picker 不支持点击选区外的选项来让它被选中，我只能拨动来选中某一项，这类交互还得多参考一下 Vant 之类的组件库 |
 |
47
ashong Apr 28, 2023
demo slider 不工作
|
 |
48
Imindzzz PRO 可能还是因为移动端定制化要求比较高，导致没啥组件库
|
|
49
dufu1991 OP |
 |
50
ohwind Apr 28, 2023
很棒！希望不会有人端起碗吃饭放下碗骂娘
|
 |
51
nnegier Apr 28, 2023 via Android
很丝滑哇
|
|
52
dufu1991 OP @TaoLoading 已修正
|
|
54
dufu1991 OP @dreamramon 正在计划中
|
 |
56
wananzz Apr 29, 2023
看了下，是挺不错的，蹲个 Figma 文件…
|
 |
57
oyjt Apr 29, 2023
很不错的组件库，每个组件都包含了多种丰富的使用样式，很强大也很实用。支持作者，已 Start
|
 |
58
jigi330 Apr 29, 2023
666
|
|
59
QKgf555H87Fp0cth Apr 29, 2023
国内开源还是比较差点。大家压力都大，又比较少赞助，贡献的人也少。
有的是，为了 KPI 。用过他们的，半成品...，标签的 CSS 没法传参数进去，只能放弃，像 MUI 就很完善。 有的是，工作刚好需要用到，所以开源，后面不需要用到了，就年久失修。 有的是，官方自己都不更新，比如又拍云。 有的是，提交 Issue ，说暂不支持。 有的是，申请两次 QQ 群，两三天都还没审核。 有的是，提交了 Issue ，都没合并也没拒绝。 有翻译过一点点，比如 MediaWiki 、PHP 、Laravel 、MUI 等，也 GitHub 赞助某人，也自己写点自己用的库，不过还是力量薄弱，跟玩似的。还是得靠你们。 |
 |
60
Aloento Apr 29, 2023
非常不错；能看出来 OP 不是专业做设计的（
|
 |
61
luodan Apr 29, 2023
不错！已收藏。发现一个 bug, 日期选择框，Range selection, 选完以后，开始结束日期都向前移动了一天。
|
 |
62
chaoschick Apr 29, 2023
没有 table 呢
|
 |
63
iTakeo Apr 29, 2023 via iPhone
轮播图有点 bug ，动画没结束再左右滑动，图片会跳动
|
|
64
iTakeo Apr 29, 2023 via iPhone
时间 picker ，先选择日期。再选择月份，结果日期默认归 1 了，这点不合理；而且选中 2 月，再选择年份也归 1 了。虽然是为了判断闰月这种，但是我觉得交互逻辑可以再优化一下。
|
 |
65
TomPig0216 Apr 29, 2023
@17681880207 泰酷辣！
|
 |
67
MXMIS Apr 29, 2023
不错，但是我从演示站首页往下滑第一次会有卡顿
|
 |
68
turan12 Apr 29, 2023 via iPhone
楼主牛逼。我准备尝试一下，到时候做好了告诉 op
|
 |
69
yushiro Apr 29, 2023 via iPhone
默认的颜色饱和度太高了，特别是那个蓝色，看的刺眼。
|
 |
70
Dream4U Apr 29, 2023
牛逼。
整体很棒，就是默认配色确实有点刺眼睛。 借题请教一下 OP ，移动端示例里面 Safari 禁用缩放是用的什么代码？ |
 |
72
chihiro2014 Apr 29, 2023
站点感觉很卡顿？
|
 |
73
sechi Apr 29, 2023 via Android
第一次接触 svelte 的组件库，还不错！支持 op
|
 |
74
Azad01 Apr 29, 2023
太赞了！对前端工作者很友好
|
|
75
dufu1991 OP @intmax2147483647 是啊，业余时间太少了，周期有点长。
|
 |
76
FightPig Apr 29, 2023
不错，上次发现一个 sevlte 的 ui ，BeerUi 也不错，没想到又有新的出了
|
|
77
dufu1991 OP @chihiro2014 首页有 3D 模型，渲染的时候可能比较吃性能。但是多数时候应该是在组件页面。
|
 |
79
Mindzy Apr 29, 2023
更好奇首页的 3D 模型怎么做的，来个教程
|
 |
80
majunbo Apr 29, 2023
github 上的 demo 二维码扫码出来的地址：
1 、步骤条 太慢了； 2 、实例主页无法向下滚动（原因不知道是点击哪个组件后导致的，测试了几次没有发现规律）； 3 、日历示例选择的时候有时选不中，也可能是慢； 安卓手机，微信 8.0.35 扫码后的结果，其他没仔细看，希望楼主有时间再测试一下。 |
 |
81
zhw2590582 Apr 29, 2023
这个白底蓝色太刺眼了啊
|
 |
82
qbhy Apr 29, 2023
牛逼，已点赞。
顺手发一下我写的 Golang 框架 github.com/goal-web/goal ，目前正在写文档 |
|
83
dufu1991 OP @majunbo 1 、步骤条同一个页面的 Demo 数据，加载渲染可能会有点慢，对比其他页面也就大概 1S 左右的区别，正常页面不会在同一个页面同时加载如此多的 Step 。
2 、在有弹出层的页面（如 Dialog ）弹出内容，不要关闭，此时利用系统返回上一页就会出现，原因是在使用到 Popup 组件的时候，为了防止滚动穿透，在有弹出内容的时候，默认阻止了 body 滚动，弹出内容关闭时又恢复。如果不关闭弹出层使用系统级返回上一级，此时 body 是禁止滚动的。 3 、我在 iOS 的微信浏览器内未发现，MIUI 的 Android 内未发现，麻烦发一下具体手机型号和系统版本。微信魔改的 X5 内核与主流的 web 标准相差越来越远，性能方面也是堪忧，只能发现问题针对性地修改。 |
|
85
dufu1991 OP @ashong 你是在桌面端吗？有没有注意到一行字「 Slider 区域绑定了 Touch 事件，请直接在移动设备或通过开发者工具模拟移动设备预览。」
|
|
87
dufu1991 OP @chaoschick 移动设备上可是区域这么小，table 好像没有一个好的展示方式和适用场景，其他移动端组件库好像也没怎么看到 table 组件。
|
|
88
dufu1991 OP @iTakeo 确实是考虑到闰月的情况，比如先选择 0331 ，再选择 2 月，日就会恢复到 1 。出于两点考虑，技术层面，不用单独对每一个年每一个月份单独处理，逻辑处理上会简单很多；更重要的是从交互层面考虑，大多数情况，重新选择月份时日是不会改变的，这就会给用户一个心理预期，但是当先选择 0331 ，再选择 2 月，如果判断是否是闰月之后，自动显示 28 或 29 ，粗心的用户会根据心理预期而忽略了日的变动，索性让其区别更加明显，「强迫」其重新选择。这是我的考虑。
|
|
90
dufu1991 OP @Socrazy 应该有很多方式，我用的是
```javascript document.addEventListener('gesturestart', function (event) { event.preventDefault(); }); ``` |
|
91
dufu1991 OP @dufu1991 有很多 Loading 效果很接近，语义化出来命名可能会很长，这样使用起来反而不方便，现在这种情况只要在 Demo 里面看到需要的，直接写个编号会更方便。而且后续还会增加，可能会达到数十种甚至上百种，语义化在命名和使用上反而显得累赘。或者您有什么更好地建议？
|
|
92
dufu1991 OP @yamedie 有很多 Loading 效果很接近，语义化出来命名可能会很长，这样使用起来反而不方便，现在这种情况只要在 Demo 里面看到需要的，直接写个编号会更方便。而且后续还会增加，可能会达到数十种甚至上百种，语义化在命名和使用上反而显得累赘。或者您有什么更好的建议？
|
|
93
iTakeo Apr 30, 2023 via iPhone
@dufu1991 时间 picker 我也写过，我的处理方法是尽量减少用户的负担，假如用户选择了 3 月份的 30 ，后面又选择了 2 月，就默认跳到 28 ，不归 1 ，如果用户又切回了 3 月，再默认回到 30
|
 |
96
yuedanwork May 4, 2023 1
感谢 op 的组件库，看到该项目的当天就已在我的 Chrome 插件项目用上了
一直都在找一个比较好用的轻量的基于 tw 的 svelte 组件库（因为本身也不是大项目 只需要少数的组件即可），op 这个库解决了我的需求。在此感谢 op 项目地址： https://github.com/yuedanlabs/icp-query-extension Chrome 插件地址： https://chrome.google.com/webstore/detail/icp-query-extension/plmfnmaihcmijdanpbondfejclejejfa 同时插件昨天更新了部分功能，也欢迎感兴趣的小伙伴体验 使用下来对组件库也有一些需要完善的地方，未来有时间我也会考虑根据自己的需要贡献一点代码，希望 op 的项目在 svelte 的生态中走的更远 |
|
97
dufu1991 OP @yuedanwork 确实需要实际项目来验证使用是否方便。
|
|
98
dufu1991 OP @dreamramon 最近新增了个脚手架，可以尝试一下。
|
 |
100
ads1029 Aug 30, 2023
太强了！ 总觉得国内对 svelte 和 tailwind 的态度不咸不淡，真心感激 op 的付出，希望能有更多人加入这个社区吧
|
Select Language