这是一个创建于 1433 天前的主题，其中的信息可能已经有所发展或是发生改变。
做路由器的管理界面，生产的模块可以用于存放网页的区域，容量只有 150KB 。
关键还要好看。。
第 1 条附言 · 2020-12-19 20:54:27 +08:00
又上下翻了几个来回，周末有得玩了~~
第 2 条附言 · 2020-12-20 02:10:11 +08:00
都玩不过来了～～又抚摸键盘到凌晨，这几天本来没什么事做，现在有做不完的事了！
我要加油学学学，成为大神不是梦（三和）！！！凌晨安了 💓
第 3 条附言 · 2020-12-21 09:25:24 +08:00
什么时候做web用nginx都要是常识了？不就对着文档搜着教程配置吗？？怎么还搞得那么厉害一样？？
我一直用的iis，不需要nginx，没什么问题吧？？？然而这个模块里是定制的HTTP Server，我也改动不了，也不想去麻烦别人公司的。。
第 4 条附言 · 2020-12-21 09:26:51 +08:00
上面的回复是针对设置gz响应头的
第 5 条附言 · 2020-12-21 12:54:19 +08:00
大家说的我基本都跑了hello, world!有的可以打包很小的，貌似要ts写，奈何自己不会typescript，有点小尴尬～
决定了用pure-css写界面，其他的就原生js吧，后续可能会被一些图表之类的需求搞得很头痛！！！！
第 6 条附言 · 2020-12-21 12:56:52 +08:00
最后在大胆的伸一次手，有没有类似jquery，但是很小的库，因为担心ie11可能不兼容某些js写法，比如document.body.style=''，例子，我一般也不这么写...
第 7 条附言 · 2020-12-21 14:16:35 +08:00
pure-css + zepto
太适合萌新了......
埋头苦干！！！
第 8 条附言 · 2020-12-23 12:16:49 +08:00
昨天写项目时，我终于知道我为什么要用 jquery 了，因为我想起来模块内置的 api 返回的内容是 html 格式，所以要用 jquery 操作 dom ！
 |
1
youla OP 目前在用 vue.min.js + jquery，但是做出来不好看 >_
|
|
2
youla OP 有没有小，还成熟的 PC 端库，能直接一个文件引用的，美化过控件的（按钮、输入框、单选、多选...）。
|
 |
3
opengps 2020-12-19 15:19:41 +08:00
很想知道这类设备自己实现个 web 服务端得多累
|
 |
4
mclxly 2020-12-19 15:19:44 +08:00
省体积：vue 可以取代 jquery
要好看：找美工 |
 |
5
InternetExplorer 2020-12-19 15:20:34 +08:00 via iPhone
引用外部资源
|
|
6
youla OP @opengps 我负责的模块是串口转以太网，我前端用 websocket 发送 16 进制数据会通过串口转发其他模块处理，其他模块与我无关，貌似是 c 写的
@mclxly 美工的图片就放不下了 @InternetExplorer 然后你发现没网络配置不了路由器 |
 |
7
baobao1270 2020-12-19 15:30:28 +08:00  1
JS 自己实现吧，嵌入式就别用框架了
好看的话主要是 CSS，和 JS 关系不大。只有 150KB 的话建议抛弃动画。 |
 |
8
luob 2020-12-19 15:30:44 +08:00 13
|
|
9
youla OP |
 |
11
gowk 2020-12-19 15:35:36 +08:00 via Android
Mithril.js + Bulma
|
 |
12
yinzhili 2020-12-19 15:35:41 +08:00
用 jQuery，然后自己手写 css，应该不会超过 150k
|
|
13
baobao1270 2020-12-19 15:38:44 +08:00
@youla 其实可以抄以下 TP-Link 的老后台界面。把字体改成黑体，配色改成比较现代的风格，再扁平化一下，就好看很多了。
图： https://image2.sina.com.cn/IT/h/2006-09-08/3c1d45d3975101b87db8e2f4397a2ef4.jpg 配色可以去这个网站： https://colorhunt.co/ |
|
14
youla OP |
 |
15
CallMeReznov 2020-12-19 15:40:53 +08:00
手啃.
前阵子在批站 arduino 作者里他这个东西做的就挺好,几乎手写的. https://github.com/bilibilifmk/ESP_weather_Cube/tree/master/%E6%BA%90%E7%A0%81/qxz/data |
|
16
youla OP 谢谢你的配色，抄肯定不会，要有自己的风格，我多学学 css 吧。
|
|
17
youla OP @CallMeReznov 我有点慌啊，我怕下层用户直接发个固件给我刷！！！
|
|
18
youla OP @baobao1270 #16
|
 |
19
lin07hui 2020-12-19 15:45:29 +08:00
都用上 vue，还把 jquery 加上，看来你不了解 vue 。
|
|
20
youla OP @lin07hui 不是我不了解 vue，是你不了解 jquery，我只是为了更方便的操作 dom，设置属性之类的，因为我基本不手写 html，vue 的话，我是为了双向绑定，还可以让 js 看起来好看一点（也不知道该怎么形容）。
|
 |
21
KuroNekoFan 2020-12-19 15:52:52 +08:00
可以选择 vanilla
|
 |
22
ctt 2020-12-19 16:05:12 +08:00 via Android 1
zeptojs 还不错，兼容 jq 语法
|
 |
23
manhere 2020-12-19 16:06:23 +08:00
内容 gzip 之后放入 flash，150K 足够了
|
 |
24
zkl2333 2020-12-19 16:08:29 +08:00 via iPhone
@youla vue 和 jq 确实二选一就够了，没必要而且不建议一起用。同时用的话 jq 操作 dom 会引起 vue 的 vdom 和 dom 的不同步，出现灵异 bug 。前面有朋友推荐 fre，确实很小很厉害。我建议你可以了解一下，虽然我没用过但是作者是很有趣的一个家伙。而且其实用原生 js 也不是不行嘛。
|
 |
26
CamD 2020-12-19 16:10:47 +08:00 via iPhone
svelte 也可以看看
|
 |
27
echowuhao 2020-12-19 16:21:21 +08:00
Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS
Alpine.js is lighter weight than jQuery, coming in at 21.9kB minified — 7.1kB gzipped — compared to jQuery at 87.6kB minified — 30.4kB minified and gzipped. Only 23% the size! https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/#:~:text=js%20provides.-,Size,Only%2023%25%20the%20size! |
 |
29
wangbudong 2020-12-19 16:30:51 +08:00
连 jq 都不用更好
|
 |
30
christin 2020-12-19 16:32:45 +08:00 via iPhone
不太明白为什么要 jq+vue
可以选择手写 css GitHub 上找合适的 css 库 把里面用到的组件代码复制进去 再压缩 按需的话也用不了多少内存 |
 |
32
chihiro2014 2020-12-19 16:41:39 +08:00
svelte 应该就这了
|
 |
33
love 2020-12-19 16:59:29 +08:00
jquery 就算了，而且也不小啊。
可以看一下 preact 它家的一系列东西，追求的就是小而强大 |
 |
35
Nbsaw 2020-12-19 17:03:39 +08:00
|
 |
38
sutra 2020-12-19 17:22:34 +08:00
好看，还要小的话，是不是设计的时候多使用 svg 会好点？
|
|
39
zkl2333 2020-12-19 17:35:24 +08:00 via iPhone
@youla
“我又不是 npm 做开发，除了手动，我想不到更好的方式。” 你不是用了 vue 怎么就没有其他方式了，npm 和操作 dom 也没什么关系。vue 和 react 都可以脱离 npm 和 node 环境单独引入。不过还是建议用上 webpack 之类的打包工具，因为按需加载和 tree shaking 等等一系列工具链带来的福利可以显著缩小项目体积。 |
|
40
youla OP @zkl2333 jquery 操作 dom 直接填充一方面可以减少代码量，也感觉比较好管理吧。不过更重要的还是看代码怎么写，条件允许的情况下我也挺喜欢怀旧的，实际上，我很早就不用 jquery 了。最后我还想说，你就是说再多，我也不会和你上床的。
|
 |
41
lichdkimba 2020-12-19 17:48:33 +08:00
不复杂的话纯原生？？
|
|
42
youla OP @lichdkimba 我要有那水平就不会来提问了！基本都会写，就是审美太差！！
|
|
43
lin07hui 2020-12-19 18:12:20 +08:00
70k 容量放不下 jquery.min.js ，也放不下 vue.min.js 。其它小体积的框架对 ie 的支持都是 ie10+。
|
 |
44
weixiangzhe 2020-12-19 18:33:26 +08:00 via Android
资源全走 cdn，图片放 oss 可以放好多 html doge
|
 |
47
px920906 2020-12-19 19:44:01 +08:00
有兼容 IE10 及以下的要求吗，没有的话不负责任（因为没用过）再提供个选择，10kb，比 8 楼的 pure 大点，但也更好看，组件也多些，只有 css，一些逻辑需要自己实现。https://github.com/picturepan2/spectre
“更方便的操作 dom，设置属性之类的”，vue 也可以做到吧，而且以我的认知，vue 这类 MV*框架目的就是避免手动操作 dom 啊。想问问楼主是什么样的需求非 jquery 不可 |
|
49
lin07hui 2020-12-19 19:54:07 +08:00
|
 |
50
daysv 2020-12-19 20:13:43 +08:00
直接纯原生就好了
|
 |
51
agdhole 2020-12-19 20:24:02 +08:00
看了一圈很好奇楼主什么操作 dom 场景会比 mvvm 更方便的
|
|
52
px920906 2020-12-19 20:26:55 +08:00
@youla 用 vue 可以提前写在模板里，用 v-if 控制是否在 dom 上，属性用 v-bind 加，为什么一定要这个过程，用户又看不到。而且 vue 一部分逻辑和 html 写在一起还好，写 jquery 和原生 js 反而会需要更多的 html 、js 之间来回看吧
|
|
53
youla OP @px920906 我说的是我不想写 html，因为不喜欢翻来翻去，我的 html 代码通常只有<body><script>...</script></body>
|
 |
54
imjamespond 2020-12-19 20:32:47 +08:00 via Android
没人说起 svelte 么？
|
|
56
lin07hui 2020-12-19 20:47:11 +08:00
@imjamespond 上面有 2 个。但 LZ 不在 node 环境开发。用 svelte 应该体积是最小的
|
|
57
youla OP @px920906 是一步一步创建节点、追加，而不是$("整个页面")，创建节点的时候，也可以把 dom 赋值到 data()，然后 this.xx 调用，不用 jquery 时是<div ref="xx"> this.$ref.xx ，感觉其实都差不多的，我平时也不会用 jquery 的，确实很久没玩了，怀个旧。
|
 |
59
40EaE5uJO3Xt1VVa 2020-12-19 21:35:02 +08:00
@weixiangzhe 是放在路由器里的，离线环境就用不了 cdn 了
|
 |
60
Cbdy 2020-12-19 21:59:54 +08:00
Vanilla JS
|
 |
61
namelosw 2020-12-19 22:08:20 +08:00
Preact
Hyperapp |
 |
62
jzmws 2020-12-19 22:17:41 +08:00
jq +css 自己实现
|
 |
63
dcalsky 2020-12-19 22:19:19 +08:00
你说的功能用 gatsby 可以做到 react 150kb 以下
|
 |
64
Kasumi20 2020-12-19 22:29:16 +08:00
|
 |
65
cyberpoint 2020-12-19 23:33:03 +08:00
我写过单片机的界面，用的 svelte，用法类似 vue 和 react 的结合。请求仅仅是自己对 websocket 和 fetch 做最简单的封装。UI 部分自己写的，如果你想用 UI 组件库，可以找找原生 web component 写的组件库。我最后打包在 100kb 左右，在 chrome 系浏览器没有任何问题。
|
|
66
cyberpoint 2020-12-19 23:38:38 +08:00
@cyberpoint 我精简下语言：svelte + web component
|
|
67
cyberpoint 2020-12-19 23:43:18 +08:00
@cyberpoint svelte 类似于 vue，web components 类似于 Element ui 。
ps：web components 实现的组件库比如：[xy-ui]( https://github.com/XboxYan/xy-ui) |
 |
68
DOLLOR 2020-12-20 00:18:51 +08:00
这种极端情况下就用 vanilla 吧，我连 jQuery 都不屑的。
|
 |
69
no1xsyzy 2020-12-20 00:42:18 +08:00
vanilla 挺好的
jquery 可以用打包器，只引需要的模块。 Vue 和 JQuery 功能重合度太高。 至于 Svelte，它是个编译器，但其实强行套用 ECMA 新语法有点蠢，export 直觉上应当是从内向外的数据流，但 svelte 下是从外向内的…… |
 |
70
mamahaha 2020-12-20 01:08:48 +08:00
Vanilla JS 是框架党嘲风原生党的，但是原生党表示这个词挺好的。
|
 |
71
oxromantic 2020-12-20 03:02:10 +08:00 via iPhone
路由器只放 api，控制台走外部可破；另外都路由器了这个 150k 指的是文件系统压缩后的限制吧？
|
 |
72
kongkx 2020-12-20 06:47:17 +08:00 via Android
vanilla，自己实现一堆 dom 操作以及模板渲染方法，自个儿维护，哈哈
|
 |
73
mingl0280 2020-12-20 08:00:09 +08:00
js 资源你可以调外部的，甚至可以强制 deflate 头然后存 gz 文件，有啥不好弄的……
|
 |
74
ianva 2020-12-20 08:49:58 +08:00
web-components 多好用的，用什么 jQuery 呢
google 的 it-element https://lit-element.polymer-project.org/ ionic 的 https://stenciljs.com/ 写法类似 angular, react 但整个库的代码相当少 |
 |
75
fengxianqi 2020-12-20 10:42:47 +08:00 via Android
看了一圈，用 jq 就可以不写 html ？？？
|
 |
76
QiaTia 2020-12-20 10:48:40 +08:00
直接 webpack + babel + Less 手写 JS, + Css 有何不可能, 为啥要用框架呢?
|
 |
77
AmrtaShiva 2020-12-20 13:46:55 +08:00 via iPhone
@luob 牛逼了
|
 |
78
galikeoy 2020-12-20 14:03:46 +08:00
```是一步一步创建节点....确实很久没玩了，怀个旧。```
技术更新太快，如果不会可以问下或者搜下正确开发姿势，不过 你喜欢最好，能跑就行 |
|
79
youla OP @fengxianqi 就算不用 jq 也可以不手写 html，let div=document.createElement("div");div.setAttribute("id","app")，我只是喜欢 jq $("<div id='app'>")顺带还可以直接写属性。
@galikeoy 我不会有你说的这么没追求的想法，还有我这不就是来问了么？技术更新快怎么了，我能跟上，我一般用 vue-cli （ babel stylus less ）有问题吗？我生产都是用 vue3 了。还有不到 150kb，我确实还没找到“正确”的开发姿势，这和环境受限有关，不理解面向对象的话，创建 dom 方式去写一堆没必要的垃圾是很正常的，但请相信我，我和他们不一样。 |
|
81
youla OP @oxromantic 我们的路由器不同，网页端是有独立的模块，这么模块上的存储芯片就只有这么大。
|
 |
82
SilentDepth 2020-12-20 14:47:49 +08:00 1
如果对动态界面需求不大，Alpine.js 不错，gzip 后 8.3 KB，用起来很简单，基本就是真·HTML，没 JS 多少事儿。
如果有较高的动态界面需求，或者想尽可能实现点酷炫的交互，可以考虑 Mithril.js ，gzip 后 9.8 KB，连带 Ajax 、Promise 、router 都包了，拎包入住。 不过需要注意的是，上述两个框架（的最新版）都只官方支持到 IE11 。所以如果你对浏览器兼容有要求，建议考虑其他方案。（ Mithril 1 可以支持到 IE9，但注意文档版本。） 不建议 jQuery 。不是说 jQuery 不好，而是在有现代前端框架可用的情况下，看不到使用 jQuery 的必要性。 Vue 2 也可以考虑，gzip 后 22.9 KB，但你实际开发的时候很可能需要再加上 9.6 KB 的 Vue Router 。加起来 30 多 KB 的体积……好像也还可以哈？ 如果你希望界面足够好看，真正占体积的是资源素材和 CSS 。如果你有手写样式的能力，不建议使用现成的样式框架（体积不好控制），建议 Tailwind CSS （启用 purge 功能）一把梭。以我对（民用级）路由器管理后台的了解，150 KB 不是个难以实现的目标。 |
|
83
SilentDepth 2020-12-20 14:58:32 +08:00
如果你决定使用 Tailwind CSS，同时只对基础控件（文本框、选择框、复选框啥的）的样式有现成方案需求，可以参考 `@tailwindcss/forms`，一个 Tailwind CSS 对表单元素的官方插件。直接用也行，足够美观了。
关于审美，其实基于 Tailwind CSS 默认配置把握几个原则，做出来的东西都不会太差： - 使用留白 - 使用统一尺寸 - 使用较少的颜色 - 在保证对比度的前提下使用多个明暗度（ blue-500 、blue-300 之类的） |
|
84
youla OP @SilentDepth 我都蒙了，我是写傻了，就封装一个 websocket 方法，直接 html 调用多省事，vue jquery 完全不需要，不过提的需求很恐怖阿，大概还包含一个图形化路由器的状态界面，之前用 jquery 是想着自己应该能比较方便的做一些饼干状图。
|
|
85
SilentDepth 2020-12-20 15:11:27 +08:00
@youla #84 emmm，突然对你的实际需求感到迷惑了。你要做的不是整个后台界面，而是其中的一部分？而这一部分有单独的 150 KB 空间？那就无所谓了，怎么顺手怎么来就行了。150 KB 的话，老实说 D3 都放得下😂️
|
 |
86
vone 2020-12-20 15:14:44 +08:00 1
建议不要和楼主争论具体的技术问题，可以看以前他的回复记录。
|
 |
87
Pi7bo1 2020-12-20 17:12:46 +08:00
回复人都看傻
|
|
88
youla OP @SilentDepth 一个单页的路由器管理界面阿。
|
|
90
youla OP @SilentDepth 我再补充一下，一个路由器的界面全是我写，本身也就只有一个页面，大概效果类似华硕图形化 bios 界面那个样子（这是需求）
|
|
91
youla OP @vone 不过我还想回复一下，用 windows 打开 cmd，del 不能删目录，rd 不能直接删除文件，我看看还有没有杠精
|
|
92
SilentDepth 2020-12-20 18:17:10 +08:00
@youla #88 你说的单页是指 SPA ？那「封装一个 websocket 方法」是指什么……不过总之，目标是 SPA 的话考虑 Vue 没毛病啊，手撸 HTML/JS 是图啥。简单图表的话，div + CSS transition 就够用，状态驱动靠框架；想要更复杂一点的就手写 SVG，状态驱动还是靠框架。
|
|
93
youla OP @SilentDepth 没那么复杂，本身功能不多，现在就一个 html 页面，左侧菜单，display 控制内容显示那些。
就是现在写出来太大了 =================== | m : my router exit | e : ————————— | n : | u : 点击菜单变化内容 | -- : =================== |
|
94
youla OP @SilentDepth websocket 是通信的协议，大概就是模块内置了一个 websocket 服务端会处理前端发送的 HEX 数据，然后通过串口转发给其他模块完成任务，嵌入式我也不是很懂...
|
|
95
SilentDepth 2020-12-20 18:45:15 +08:00
我整理一下我的理解：你的工作是开发一个涉及路由导航和图表的前端页面，这个页面的核心业务是通过 WebSocket 与其他后端系统模块进行通讯，而你现在遇到的问题是不知道选择什么技术栈能更好地完成你的工作。
这样的话，看需求设计包含的工作量了。如果没几个子视图，视图内容也比较简单，手撸 HTML/JS 我觉得也行。甚至 jQuery 都不用：`const $ = document.querySelectorAll`。如果子视图数量多，或者涉及不少数据逻辑，上框架会省事些，至少便于你实现组件化，少点思维负担。 虽然我嚼着一个路由器后台的子视图也不少了。 |
 |
96
hronro 2020-12-20 18:48:56 +08:00
给个建议，150 KB 直接存 GZIP 之后的压缩文件，现在应该没有浏览器不支持 GZIP 了吧？
这个方法实行起来最简单，还可以配合楼上给出的各种建议一起食用，并且效果大概率超过任何一个楼上们给出的框架上优化的建议。 |
 |
97
johnkiller 2020-12-20 19:08:02 +08:00
外部引用一个 js，该 js 加载创建所有网页元素。
那么路由器上就只用存放一个<script src="xxx.js"> </script> |
|
98
SilentDepth 2020-12-20 19:14:25 +08:00
@johnkiller #97 如果路由器没有 WAN 呢
|
|
99
youla OP @SilentDepth 肯定没有路由的功能，不必纠结这些，我这只是一个用来开发的模块。
|
|
100
youla OP @SilentDepth 我发现我貌似没看懂你的意思，
|
Select Language