前端新玩具: Nashi.js - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
AkaraChen
V2EX    程序员

前端新玩具: Nashi.js

  •  
  •   AkaraChen 2022-11-09 20:08:18 +08:00 4560 次点击
    这是一个创建于 1135 天前的主题,其中的信息可能已经有所发展或是发生改变。

    小弟最近写了个玩具,名叫 nashi,我称之为 2022 年的 jQuery ,简单介绍一下特性:

    1. 真的非常小,gziped 后仅 1.48kb ,是 jQuery 体积的 1/20

    2. 支持 jQuery 的大部分方法,除了动画、Ajax 相关,因为没必要

    3. 写了数十个单元测试, 且在多个现代浏览器表现良好,稳定性还行

    4. API 设计现代,写起来比 jQuery 舒服点,比写原生不知道高到哪里去了

    目前开源到 Github 一个周,issues 平均 4 小时内处理,一天更新一次,获得了十几个 star ,为数不多的用户反响也都不错,因此斗胆在 V2EX 引流一下,如果你觉得写得烂,直接在这里或者 issues 骂就行,我自己会调整修改,如果能贡献一下那我自然是感激不尽。

    项目地址:Github

    Playground: StackBlitz CodeSandbox

    第 1 条附言    2022-11-09 21:19:59 +08:00
    49 条回复    2022-11-11 07:56:27 +08:00
    kaifeiji
        1
    kaifeiji  
       2022-11-09 20:17:44 +08:00
    啊,这年头这东西真就是个玩具。。。
    AkaraChen
        2
    AkaraChen  
    OP
       2022-11-09 20:21:03 +08:00
    @kaifeiji 有时候还是很方便的
    zhlxsh
        3
    zhlxsh  
       2022-11-09 20:21:24 +08:00 via iPhone
    なし 梨
    acoldfox
        4
    acoldfox  
       2022-11-09 20:27:26 +08:00
    现在原生写起来也方便多了吧, 以前用 jquery 主要是解决兼容性
    AkaraChen
        5
    AkaraChen  
    OP
       2022-11-09 20:28:36 +08:00
    @acoldfox 就是最近觉得写原生不舒服,所以才开始的
    AkaraChen
        6
    AkaraChen  
    OP
       2022-11-09 20:28:54 +08:00
    @zhlxsh 是的
    AkaraChen
        7
    AkaraChen  
    OP
       2022-11-09 20:35:06 +08:00
    @acoldfox https://s1.ax1x.com/2022/11/09/zS6jhR.png 我感觉是比原生优雅的
    makelove
        8
    makelove  
       2022-11-09 20:40:28 +08:00
    jquery 这套写不了大程序,因为没可嵌套的组件体系,既然是微程序写几行原生也没什么大不了的
    总之时代变了
    AkaraChen
        9
    AkaraChen  
    OP
       2022-11-09 20:41:30 +08:00
    @makelove 感觉 jq 那套搭配 web-component 还是有搞头的,我最近也在研究写 web-component 组件库
    zhuchunshu
        10
    zhuchunshu  
       2022-11-09 21:09:56 +08:00
    牛逼,star 了
    GreatAuk
        11
    GreatAuk  
       2022-11-09 21:23:38 +08:00
    建议 ts 重写下
    AkaraChen
        12
    AkaraChen  
    OP
       2022-11-09 21:26:24 +08:00
    @GreatAuk 因为实现的很灵活,ts 很难推断出类型,所以就拿 js 写了,但是我有写类型定义的,项目的单测就是 ts 写的
    randomstream
        13
    randomstream  
       2022-11-09 21:32:38 +08:00
    都这样了,用 vanilla js 也没啥区别感觉的样子。。
    AkaraChen
        14
    AkaraChen  
    OP
       2022-11-09 21:36:22 +08:00
    @randomstream nashi gziped 后仅 1.6kb ,引入几乎没有负担,但是书写的体验比原生强太多了
    fromdark
        15
    fromdark  
       2022-11-09 21:50:42 +08:00
    哈哈,如何做到有这样的精力的
    AkaraChen
        16
    AkaraChen  
    OP
       2022-11-09 21:53:36 +08:00
    @fromdark 因为我是一名大二学生,无论是做开源和冲浪都时间充足
    yechentide
        17
    yechentide  
       2022-11-09 23:27:13 +08:00 via iPhone   1
    大二羡慕了,今年刚工作,感觉眨眼一天就没了
    AkaraChen
        18
    AkaraChen  
    OP
       2022-11-09 23:33:22 +08:00 via iPhone
    @yechentide 然而我实习也找到了,过几个月也没好日子了
    linkopeneyes
        19
    linkopeneyes  
       2022-11-10 08:22:09 +08:00
    @AkaraChen web component 更不需要 jq 了啊,可以试试 lit ,我自己小项目都是 lit 写的
    AkaraChen
        20
    AkaraChen  
    OP
       2022-11-10 09:02:05 +08:00
    @sjhhjx0122 lit 我了解过,已经拿来写组件库了,我的意思是说,组件化靠 lit 实现,操作 litElement 的 prop 啥的则通过 nashi 这种类似 jq 的玩意
    hoythan
        21
    hoythan  
       2022-11-10 09:13:35 +08:00
    你这语法等于重学一门语言,没必要。
    AkaraChen
        22
    AkaraChen  
    OP
       2022-11-10 09:16:19 +08:00
    @hoythan 这。。。也没见别人说学 jq 等于学另一门语言啊,我这 API 设计的有什么不好吗
    hoythan
        23
    hoythan  
       2022-11-10 09:18:52 +08:00
    @AkaraChen 因为我觉得得有足够让人心动的变化或更新才会大家去学习一门新语法。如果只是 jQuery 的替代的话他的文档更全一点。
    AkaraChen
        24
    AkaraChen  
    OP
       2022-11-10 09:20:30 +08:00   1
    @hoythan 在我看来 jQuery 的文档冗长的让人难受,我这文档一句话把事情说清了反而好点。。。
    Yukiteru
        25
    Yukiteru  
       2022-11-10 10:04:17 +08:00
    牛逼,大二就能写出来这个。楼主开始学编程有多久了?计算机专业的吗。
    tyrone2333
        26
    tyrone2333  
       2022-11-10 10:10:01 +08:00
    我大二也去找实习,投了几十家就一家约了面试,还被婉拒了. 回来后天天写代码, 然后大四面了第一家就过了,3k 月薪当了一年的牛马:<
    ragnaroks
        27
    ragnaroks  
       2022-11-10 10:11:17 +08:00
    经过实测,拿来写 user-script 的话要比直接使用香草方便些,而且大小可以接受
    ragnaroks
        28
    ragnaroks  
       2022-11-10 10:13:52 +08:00
    我用 BUFF 获取求购比例的脚本测试,虽然多了个 2 KiB 的依赖,但是 user-script 本身减小了接近 300 行,挺好的。

    不过常规前端我确实想不到有什么地方用得到这个库。
    putaozhenhaochi
        29
    putaozhenhaochi  
       2022-11-10 10:58:49 +08:00 via Android
    为啥 Web component 规范还没有流行开来
    LaTero
        30
    LaTero  
       2022-11-10 11:13:16 +08:00 via Android
    楼上好像都是专业前端觉得没什么用,想我这种非专业的感觉顺便写一个网页挺好的。又不是写大应用,方便好学才最重要,看到 react 教程这么麻烦我直接用熟悉的技术编译到 wasm 算了。
    顺便这项目用户和贡献者二次元浓度好高哦。
    AkaraChen
        31
    AkaraChen  
    OP
       2022-11-10 11:17:05 +08:00 via iPhone
    @Yukiteru 高中那会是个计算机爱好者,也就写点 html css ,高考后的暑假开始自学 js ,学了一年多吧,虽然是计算机专业的,但是老师也没啥能教我的了
    AkaraChen
        32
    AkaraChen  
    OP
       2022-11-10 11:18:27 +08:00 via iPhone
    @tyrone2333 同样找工作被婉拒,我现在是要去一个大学生创业项目实习
    AkaraChen
        33
    AkaraChen  
    OP
       2022-11-10 11:20:09 +08:00 via iPhone
    @ragnaroks 终于见到有人实测了,有点感动。
    我也正在考虑怎么用在实际项目,过段时间会写个风格指南
    yuthelloworld
        34
    yuthelloworld  
       2022-11-10 11:22:07 +08:00
    时代变了。而且原生写法也没什么负担。
    AkaraChen
        35
    AkaraChen  
    OP
       2022-11-10 11:22:29 +08:00 via iPhone
    @LaTero 你这么一说我还真想研究一下写个 wasm 版本了
    AkaraChen
        36
    AkaraChen  
    OP
       2022-11-10 11:23:44 +08:00 via iPhone   1
    @yuthelloworld 原生 js 是没负担了,但是原生 dom API 还是跟以前一样不好用啊。。。
    penzi
        37
    penzi  
       2022-11-10 12:34:46 +08:00
    @ragnaroks 同意,userscript 确实一个不错的场景,里面有很多 dom 操作。attachshadow 是一个 userscript 必备的 API ,推荐作者加上。
    AkaraChen
        38
    AkaraChen  
    OP
       2022-11-10 13:30:07 +08:00 via iPhone
    @maggch97 好的,已列入 todolist
    andyxic
        39
    andyxic  
       2022-11-10 14:20:56 +08:00
    这个到底取代了 jquery 啥? jquery 那么强大的选择器功能,貌似我没有看到啊?文档我就看到传标签,传 dom 节点...我都获取到 dom 节点了。干嘛还要包一层。前端老手原生 api 都可以直接白板的。还是要结合实际
    AkaraChen
        40
    AkaraChen  
    OP
       2022-11-10 14:27:27 +08:00 via iPhone
    @andyxic jquery 那选择器我用 queryselector 实现了
    AkaraChen
        41
    AkaraChen  
    OP
       2022-11-10 14:28:11 +08:00 via iPhone
    @andyxic 传元素是备选用的,有时候有这种需求。。。
    andyxic
        42
    andyxic  
       2022-11-10 14:36:01 +08:00
    @AkaraChen 没看到文档上写,其实可以用你的东西去翻一个用 jquery 写的页面,这才能看到差距在哪里。对比才明显。光看文档 确实看不出来
    Rrrrrr
        43
    Rrrrrr  
       2022-11-10 15:52:11 +08:00
    jq 都没人用,再造一个?
    Envov
        44
    Envov  
       2022-11-10 16:49:32 +08:00
    搞成和 ajax 结合的,或许有点搞头,类似这样:
    https://imgur.com/CqVZpOr
    AkaraChen
        45
    AkaraChen  
    OP
       2022-11-10 17:36:21 +08:00 via iPhone
    @Rrrrrr 造一个比 jq 好点的,也未必没搞头
    AkaraChen
        46
    AkaraChen  
    OP
       2022-11-10 17:40:07 +08:00 via iPhone
    @Envov 没做 ajax 的原因是原生 fetch API 已经够好,而且 ajax 轮子也不少了。况且看这个 API ,感觉实现出来库的大小得翻个倍,我就算造也肯定是造一个新库而非加到 nashi 了。。。
    AkaraChen
        47
    AkaraChen  
    OP
       2022-11-10 18:30:03 +08:00 via iPhone
    @maggch97 能说一下写 user script 需要的 API 吗,正在设计 API 呢
    @ragnaroks
    leegradyllljjjj
        48
    leegradyllljjjj  
       2022-11-11 07:43:17 +08:00 via Android
    拉屎.js ?
    AkaraChen
        49
    AkaraChen  
    OP
       2022-11-11 07:56:27 +08:00 via iPhone
    @leegradyllljjjj 虽然很不情愿,但是能把名字给记住了,那也行吧
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2806 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 58ms UTC 14:25 PVG 22:25 LAX 06:25 JFK 09:25
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86