V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
youla
V2EX  ›  程序员

不超过 150KB 的网页项目,除了 jquery 没别的办法了吗?

  •  2
     
  •   youla · 2020-12-19 15:14:59 +08:00 · 13150 次点击
    这是一个创建于 1196 天前的主题,其中的信息可能已经有所发展或是发生改变。

    做路由器的管理界面,生产的模块可以用于存放网页的区域,容量只有 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 !
    134 条回复    2020-12-23 14:07:30 +08:00
    1  2  
    youla
        1
    youla  
    OP
       2020-12-19 15:15:56 +08:00
    目前在用 vue.min.js + jquery,但是做出来不好看 >_
    youla
        2
    youla  
    OP
       2020-12-19 15:18:04 +08:00
    有没有小,还成熟的 PC 端库,能直接一个文件引用的,美化过控件的(按钮、输入框、单选、多选...)。
    opengps
        3
    opengps  
       2020-12-19 15:19:41 +08:00
    很想知道这类设备自己实现个 web 服务端得多累
    mclxly
        4
    mclxly  
       2020-12-19 15:19:44 +08:00
    省体积:vue 可以取代 jquery
    要好看:找美工
    InternetExplorer
        5
    InternetExplorer  
       2020-12-19 15:20:34 +08:00 via iPhone
    引用外部资源
    youla
        6
    youla  
    OP
       2020-12-19 15:25:22 +08:00
    @opengps 我负责的模块是串口转以太网,我前端用 websocket 发送 16 进制数据会通过串口转发其他模块处理,其他模块与我无关,貌似是 c 写的

    @mclxly 美工的图片就放不下了

    @InternetExplorer 然后你发现没网络配置不了路由器
    baobao1270
        7
    baobao1270  
       2020-12-19 15:30:28 +08:00   ❤️ 1
    JS 自己实现吧,嵌入式就别用框架了
    好看的话主要是 CSS,和 JS 关系不大。只有 150KB 的话建议抛弃动画。
    luob
        8
    luob  
       2020-12-19 15:30:44 +08:00   ❤️ 13
    https://github.com/yisar/fre,1KB 的 react

    https://github.com/pure-css/pure ,gzip 之后 3.7KB 的 css 框架。
    youla
        9
    youla  
    OP
       2020-12-19 15:33:39 +08:00
    @baobao1270 主要是自己没审美,哎,UI 也没有

    @luob 我的天,厉害了~~谢谢
    youla
        10
    youla  
    OP
       2020-12-19 15:34:56 +08:00
    @luob 今天下午有得玩了...
    gowk
        11
    gowk  
       2020-12-19 15:35:36 +08:00 via Android
    Mithril.js + Bulma
    yinzhili
        12
    yinzhili  
       2020-12-19 15:35:41 +08:00
    用 jQuery,然后自己手写 css,应该不会超过 150k
    baobao1270
        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/
    youla
        14
    youla  
    OP
       2020-12-19 15:39:50 +08:00
    @gowk 孤陋寡闻不知道这么多黑科技!!!
    @yinzhili 主要是我其实真正能用到的只有不到 70k,很头疼,缩水坑用户坑开发
    CallMeReznov
        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
    youla
        16
    youla  
    OP
       2020-12-19 15:42:46 +08:00
    谢谢你的配色,抄肯定不会,要有自己的风格,我多学学 css 吧。
    youla
        17
    youla  
    OP
       2020-12-19 15:43:52 +08:00
    @CallMeReznov 我有点慌啊,我怕下层用户直接发个固件给我刷!!!
    youla
        18
    youla  
    OP
       2020-12-19 15:44:12 +08:00
    lin07hui
        19
    lin07hui  
       2020-12-19 15:45:29 +08:00
    都用上 vue,还把 jquery 加上,看来你不了解 vue 。
    youla
        20
    youla  
    OP
       2020-12-19 15:49:13 +08:00
    @lin07hui 不是我不了解 vue,是你不了解 jquery,我只是为了更方便的操作 dom,设置属性之类的,因为我基本不手写 html,vue 的话,我是为了双向绑定,还可以让 js 看起来好看一点(也不知道该怎么形容)。
    KuroNekoFan
        21
    KuroNekoFan  
       2020-12-19 15:52:52 +08:00
    可以选择 vanilla
    ctt
        22
    ctt  
       2020-12-19 16:05:12 +08:00 via Android   ❤️ 1
    zeptojs 还不错,兼容 jq 语法
    manhere
        23
    manhere  
       2020-12-19 16:06:23 +08:00
    内容 gzip 之后放入 flash,150K 足够了
    zkl2333
        24
    zkl2333  
       2020-12-19 16:08:29 +08:00 via iPhone
    @youla vue 和 jq 确实二选一就够了,没必要而且不建议一起用。同时用的话 jq 操作 dom 会引起 vue 的 vdom 和 dom 的不同步,出现灵异 bug 。前面有朋友推荐 fre,确实很小很厉害。我建议你可以了解一下,虽然我没用过但是作者是很有趣的一个家伙。而且其实用原生 js 也不是不行嘛。
    sagaxu
        25
    sagaxu  
       2020-12-19 16:09:49 +08:00 via Android   ❤️ 4
    @youla 还要手动操作 dom,看来是真的不熟悉 vue
    CamD
        26
    CamD  
       2020-12-19 16:10:47 +08:00 via iPhone
    svelte 也可以看看
    echowuhao
        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!
    lin07hui
        28
    lin07hui  
       2020-12-19 16:28:46 +08:00
    @youla 我 2008 年开始使用 jquery , 因为 ie8 的原因 2017 年还在用 jquery 。。。
    wangbudong
        29
    wangbudong  
       2020-12-19 16:30:51 +08:00
    连 jq 都不用更好
    christin
        30
    christin  
       2020-12-19 16:32:45 +08:00 via iPhone
    不太明白为什么要 jq+vue
    可以选择手写 css GitHub 上找合适的 css 库 把里面用到的组件代码复制进去 再压缩 按需的话也用不了多少内存
    christin
        31
    christin  
       2020-12-19 16:33:13 +08:00 via iPhone
    @lin07hui 大佬 nb
    chihiro2014
        32
    chihiro2014  
       2020-12-19 16:41:39 +08:00
    svelte 应该就这了
    love
        33
    love  
       2020-12-19 16:59:29 +08:00
    jquery 就算了,而且也不小啊。
    可以看一下 preact 它家的一系列东西,追求的就是小而强大
    youla
        34
    youla  
    OP
       2020-12-19 17:03:34 +08:00
    @sagaxu 我又不是 npm 做开发,除了手动,我想不到更好的方式。
    Nbsaw
        35
    Nbsaw  
       2020-12-19 17:03:39 +08:00
    youla
        36
    youla  
    OP
       2020-12-19 17:04:32 +08:00
    @sagaxu 往往你以为的最佳方式,可能对我并不适用。
    youla
        37
    youla  
    OP
       2020-12-19 17:07:14 +08:00   ❤️ 1
    @Nbsaw 我越来越有信心了~~十分感谢大家,今天的收获好多
    sutra
        38
    sutra  
       2020-12-19 17:22:34 +08:00
    好看,还要小的话,是不是设计的时候多使用 svg 会好点?
    zkl2333
        39
    zkl2333  
       2020-12-19 17:35:24 +08:00 via iPhone
    @youla
    “我又不是 npm 做开发,除了手动,我想不到更好的方式。”

    你不是用了 vue 怎么就没有其他方式了,npm 和操作 dom 也没什么关系。vue 和 react 都可以脱离 npm 和 node 环境单独引入。不过还是建议用上 webpack 之类的打包工具,因为按需加载和 tree shaking 等等一系列工具链带来的福利可以显著缩小项目体积。
    youla
        40
    youla  
    OP
       2020-12-19 17:42:43 +08:00
    @zkl2333 jquery 操作 dom 直接填充一方面可以减少代码量,也感觉比较好管理吧。不过更重要的还是看代码怎么写,条件允许的情况下我也挺喜欢怀旧的,实际上,我很早就不用 jquery 了。最后我还想说,你就是说再多,我也不会和你上床的。
    lichdkimba
        41
    lichdkimba  
       2020-12-19 17:48:33 +08:00
    不复杂的话纯原生??
    youla
        42
    youla  
    OP
       2020-12-19 17:51:35 +08:00
    @lichdkimba 我要有那水平就不会来提问了!基本都会写,就是审美太差!!
    lin07hui
        43
    lin07hui  
       2020-12-19 18:12:20 +08:00
    70k 容量放不下 jquery.min.js ,也放不下 vue.min.js 。其它小体积的框架对 ie 的支持都是 ie10+。
    weixiangzhe
        44
    weixiangzhe  
       2020-12-19 18:33:26 +08:00 via Android
    资源全走 cdn,图片放 oss 可以放好多 html doge
    youla
        45
    youla  
    OP
       2020-12-19 18:47:05 +08:00 via Android
    @lin07hui 我突然想想也是,我都忘了,我现在测试环境,我都是用 cdn 。🤔
    heyjei
        46
    heyjei  
       2020-12-19 19:02:49 +08:00 via Android
    @youla 你确定你的设备可以访问网络嘛
    px920906
        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 不可
    youla
        48
    youla  
    OP
       2020-12-19 19:49:53 +08:00
    @px920906 我说的是创建 dom 放上去设置属性的过程,因为我不想翻来翻去看 html 看 js,ie11 吧。
    lin07hui
        49
    lin07hui  
       2020-12-19 19:54:07 +08:00
    daysv
        50
    daysv  
       2020-12-19 20:13:43 +08:00
    直接纯原生就好了
    agdhole
        51
    agdhole  
       2020-12-19 20:24:02 +08:00
    看了一圈很好奇楼主什么操作 dom 场景会比 mvvm 更方便的
    px920906
        52
    px920906  
       2020-12-19 20:26:55 +08:00
    @youla 用 vue 可以提前写在模板里,用 v-if 控制是否在 dom 上,属性用 v-bind 加,为什么一定要这个过程,用户又看不到。而且 vue 一部分逻辑和 html 写在一起还好,写 jquery 和原生 js 反而会需要更多的 html 、js 之间来回看吧
    youla
        53
    youla  
    OP
       2020-12-19 20:29:26 +08:00
    @px920906 我说的是我不想写 html,因为不喜欢翻来翻去,我的 html 代码通常只有<body><script>...</script></body>
    imjamespond
        54
    imjamespond  
       2020-12-19 20:32:47 +08:00 via Android
    没人说起 svelte 么?
    px920906
        55
    px920906  
       2020-12-19 20:37:24 +08:00
    @youla 那 vue 的模板部分怎么办,难道你是用 jquery 填充字符串进去,再初始化 vue 实例的么。。
    lin07hui
        56
    lin07hui  
       2020-12-19 20:47:11 +08:00
    @imjamespond 上面有 2 个。但 LZ 不在 node 环境开发。用 svelte 应该体积是最小的
    youla
        57
    youla  
    OP
       2020-12-19 20:49:47 +08:00
    @px920906 是一步一步创建节点、追加,而不是$("整个页面"),创建节点的时候,也可以把 dom 赋值到 data(),然后 this.xx 调用,不用 jquery 时是<div ref="xx"> this.$ref.xx ,感觉其实都差不多的,我平时也不会用 jquery 的,确实很久没玩了,怀个旧。
    youla
        58
    youla  
    OP
       2020-12-19 20:51:29 +08:00
    @lin07hui node 也行啊,我只是之前打包 vue 太大了,才用这种古老模式开发..
    yanzhiling2001
        59
    yanzhiling2001  
       2020-12-19 21:35:02 +08:00
    @weixiangzhe 是放在路由器里的,离线环境就用不了 cdn 了
    Cbdy
        60
    Cbdy  
       2020-12-19 21:59:54 +08:00
    Vanilla JS
    namelosw
        61
    namelosw  
       2020-12-19 22:08:20 +08:00
    Preact

    Hyperapp
    jzmws
        62
    jzmws  
       2020-12-19 22:17:41 +08:00
    jq +css 自己实现
    dcalsky
        63
    dcalsky  
       2020-12-19 22:19:19 +08:00
    你说的功能用 gatsby 可以做到 react 150kb 以下
    Kasumi20
        64
    Kasumi20  
       2020-12-19 22:29:16 +08:00
    cyberpoint
        65
    cyberpoint  
       2020-12-19 23:33:03 +08:00
    我写过单片机的界面,用的 svelte,用法类似 vue 和 react 的结合。请求仅仅是自己对 websocket 和 fetch 做最简单的封装。UI 部分自己写的,如果你想用 UI 组件库,可以找找原生 web component 写的组件库。我最后打包在 100kb 左右,在 chrome 系浏览器没有任何问题。
    cyberpoint
        66
    cyberpoint  
       2020-12-19 23:38:38 +08:00
    @cyberpoint 我精简下语言:svelte + web component
    cyberpoint
        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)
    DOLLOR
        68
    DOLLOR  
       2020-12-20 00:18:51 +08:00
    这种极端情况下就用 vanilla 吧,我连 jQuery 都不屑的。
    no1xsyzy
        69
    no1xsyzy  
       2020-12-20 00:42:18 +08:00
    vanilla 挺好的
    jquery 可以用打包器,只引需要的模块。
    Vue 和 JQuery 功能重合度太高。

    至于 Svelte,它是个编译器,但其实强行套用 ECMA 新语法有点蠢,export 直觉上应当是从内向外的数据流,但 svelte 下是从外向内的……
    mamahaha
        70
    mamahaha  
       2020-12-20 01:08:48 +08:00
    Vanilla JS 是框架党嘲风原生党的,但是原生党表示这个词挺好的。
    oxromantic
        71
    oxromantic  
       2020-12-20 03:02:10 +08:00 via iPhone
    路由器只放 api,控制台走外部可破;另外都路由器了这个 150k 指的是文件系统压缩后的限制吧?
    kongkx
        72
    kongkx  
       2020-12-20 06:47:17 +08:00 via Android
    vanilla,自己实现一堆 dom 操作以及模板渲染方法,自个儿维护,哈哈
    mingl0280
        73
    mingl0280  
       2020-12-20 08:00:09 +08:00
    js 资源你可以调外部的,甚至可以强制 deflate 头然后存 gz 文件,有啥不好弄的……
    ianva
        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 但整个库的代码相当少
    fengxianqi
        75
    fengxianqi  
       2020-12-20 10:42:47 +08:00 via Android
    看了一圈,用 jq 就可以不写 html ???
    QiaTia
        76
    QiaTia  
       2020-12-20 10:48:40 +08:00
    直接 webpack + babel + Less 手写 JS, + Css 有何不可能, 为啥要用框架呢?
    AmrtaShiva
        77
    AmrtaShiva  
       2020-12-20 13:46:55 +08:00 via iPhone
    @luob 牛逼了
    galikeoy
        78
    galikeoy  
       2020-12-20 14:03:46 +08:00
    ```是一步一步创建节点....确实很久没玩了,怀个旧。```
    技术更新太快,如果不会可以问下或者搜下正确开发姿势,不过 你喜欢最好,能跑就行
    youla
        79
    youla  
    OP
       2020-12-20 14:33:56 +08:00
    @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 方式去写一堆没必要的垃圾是很正常的,但请相信我,我和他们不一样。
    youla
        80
    youla  
    OP
       2020-12-20 14:35:13 +08:00
    @mingl0280 你以为路由器里面是个 apache 吗??
    youla
        81
    youla  
    OP
       2020-12-20 14:38:39 +08:00
    @oxromantic 我们的路由器不同,网页端是有独立的模块,这么模块上的存储芯片就只有这么大。
    SilentDepth
        82
    SilentDepth  
       2020-12-20 14:47:49 +08:00
    如果对动态界面需求不大,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 不是个难以实现的目标。
    SilentDepth
        83
    SilentDepth  
       2020-12-20 14:58:32 +08:00
    如果你决定使用 Tailwind CSS,同时只对基础控件(文本框、选择框、复选框啥的)的样式有现成方案需求,可以参考 `@tailwindcss/forms`,一个 Tailwind CSS 对表单元素的官方插件。直接用也行,足够美观了。

    关于审美,其实基于 Tailwind CSS 默认配置把握几个原则,做出来的东西都不会太差:

    - 使用留白
    - 使用统一尺寸
    - 使用较少的颜色
    - 在保证对比度的前提下使用多个明暗度( blue-500 、blue-300 之类的)
    youla
        84
    youla  
    OP
       2020-12-20 15:05:31 +08:00
    @SilentDepth 我都蒙了,我是写傻了,就封装一个 websocket 方法,直接 html 调用多省事,vue jquery 完全不需要,不过提的需求很恐怖阿,大概还包含一个图形化路由器的状态界面,之前用 jquery 是想着自己应该能比较方便的做一些饼干状图。
    SilentDepth
        85
    SilentDepth  
       2020-12-20 15:11:27 +08:00
    @youla #84 emmm,突然对你的实际需求感到迷惑了。你要做的不是整个后台界面,而是其中的一部分?而这一部分有单独的 150 KB 空间?那就无所谓了,怎么顺手怎么来就行了。150 KB 的话,老实说 D3 都放得下😂️
    vone
        86
    vone  
       2020-12-20 15:14:44 +08:00   ❤️ 1
    建议不要和楼主争论具体的技术问题,可以看以前他的回复记录。
    Pi7bo1
        87
    Pi7bo1  
       2020-12-20 17:12:46 +08:00
    回复人都看傻
    youla
        88
    youla  
    OP
       2020-12-20 18:08:23 +08:00
    @SilentDepth 一个单页的路由器管理界面阿。
    youla
        89
    youla  
    OP
       2020-12-20 18:09:16 +08:00
    @vone 把什么都认为是在争论的人是狭隘的
    youla
        90
    youla  
    OP
       2020-12-20 18:14:00 +08:00
    @SilentDepth 我再补充一下,一个路由器的界面全是我写,本身也就只有一个页面,大概效果类似华硕图形化 bios 界面那个样子(这是需求)
    youla
        91
    youla  
    OP
       2020-12-20 18:16:35 +08:00
    @vone 不过我还想回复一下,用 windows 打开 cmd,del 不能删目录,rd 不能直接删除文件,我看看还有没有杠精
    SilentDepth
        92
    SilentDepth  
       2020-12-20 18:17:10 +08:00
    @youla #88 你说的单页是指 SPA ?那「封装一个 websocket 方法」是指什么……不过总之,目标是 SPA 的话考虑 Vue 没毛病啊,手撸 HTML/JS 是图啥。简单图表的话,div + CSS transition 就够用,状态驱动靠框架;想要更复杂一点的就手写 SVG,状态驱动还是靠框架。
    youla
        93
    youla  
    OP
       2020-12-20 18:24:10 +08:00
    @SilentDepth 没那么复杂,本身功能不多,现在就一个 html 页面,左侧菜单,display 控制内容显示那些。
    就是现在写出来太大了
    ===================
    | m : my router exit
    | e : —————————
    | n :
    | u : 点击菜单变化内容
    | -- :
    ===================
    youla
        94
    youla  
    OP
       2020-12-20 18:26:23 +08:00
    @SilentDepth websocket 是通信的协议,大概就是模块内置了一个 websocket 服务端会处理前端发送的 HEX 数据,然后通过串口转发给其他模块完成任务,嵌入式我也不是很懂...
    SilentDepth
        95
    SilentDepth  
       2020-12-20 18:45:15 +08:00
    我整理一下我的理解:你的工作是开发一个涉及路由导航和图表的前端页面,这个页面的核心业务是通过 WebSocket 与其他后端系统模块进行通讯,而你现在遇到的问题是不知道选择什么技术栈能更好地完成你的工作。

    这样的话,看需求设计包含的工作量了。如果没几个子视图,视图内容也比较简单,手撸 HTML/JS 我觉得也行。甚至 jQuery 都不用:`const $ = document.querySelectorAll`。如果子视图数量多,或者涉及不少数据逻辑,上框架会省事些,至少便于你实现组件化,少点思维负担。

    虽然我嚼着一个路由器后台的子视图也不少了。
    hronro
        96
    hronro  
       2020-12-20 18:48:56 +08:00
    给个建议,150 KB 直接存 GZIP 之后的压缩文件,现在应该没有浏览器不支持 GZIP 了吧?
    这个方法实行起来最简单,还可以配合楼上给出的各种建议一起食用,并且效果大概率超过任何一个楼上们给出的框架上优化的建议。
    johnkiller
        97
    johnkiller  
       2020-12-20 19:08:02 +08:00
    外部引用一个 js,该 js 加载创建所有网页元素。
    那么路由器上就只用存放一个<script src="xxx.js"> </script>
    SilentDepth
        98
    SilentDepth  
       2020-12-20 19:14:25 +08:00
    @johnkiller #97 如果路由器没有 WAN 呢
    youla
        99
    youla  
    OP
       2020-12-20 19:19:54 +08:00
    @SilentDepth 肯定没有路由的功能,不必纠结这些,我这只是一个用来开发的模块。
    youla
        100
    youla  
    OP
       2020-12-20 19:21:03 +08:00
    @SilentDepth 我发现我貌似没看懂你的意思,
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2728 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 12:44 · PVG 20:44 · LAX 05:44 · JFK 08:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.