前端新玩具： Nashi.js

[AkaraChen]

小弟最近写了个玩具，名叫 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

https://s1.ax1x.com/2022/11/09/zSWFMt.png 示例代码

[kaifeiji]

啊，这年头这东西真就是个玩具。。。

[AkaraChen]

@kaifeiji 有时候还是很方便的

[zhlxsh]

なし　梨

[acoldfox]

现在原生写起来也方便多了吧， 以前用 jquery 主要是解决兼容性

[AkaraChen]

@acoldfox 就是最近觉得写原生不舒服，所以才开始写的

[AkaraChen]

@zhlxsh 是的

[AkaraChen]

@acoldfox https://s1.ax1x.com/2022/11/09/zS6jhR.png 我感觉是比原生优雅的

[makelove]

jquery 这套写不了大程序，因为没可嵌套的组件体系，既然是微程序写几行原生也没什么大不了的
总之时代变了

[AkaraChen]

@makelove 感觉 jq 那套搭配 web-component 还是有搞头的，我最近也在研究写 web-component 组件库

[zhuchunshu]

牛逼，star 了

[GreatAuk]

建议 ts 重写下

[AkaraChen]

@GreatAuk 因为实现的很灵活，ts 很难推断出类型，所以就拿 js 写了，但是我有写类型定义的，项目的单测就是 ts 写的

[randomstream]

都这样了，用 vanilla js 也没啥区别感觉的样子。。😂

[AkaraChen]

@randomstream nashi gziped 后仅 1.6kb ，引入几乎没有负担，但是书写的体验比原生强太多了

[fromdark]

哈哈，如何做到有这样的精力的

[AkaraChen]

@fromdark 因为我是一名大二学生，无论是做开源和冲浪都时间充足

[yechentide]

大二羡慕了，今年刚工作，感觉眨眼一天就没了

[AkaraChen]

@yechentide 然而我实习也找到了，过几个月也没好日子了😪

[linkopeneyes]

@AkaraChen web component 更不需要 jq 了啊，可以试试 lit ，我自己小项目都是 lit 写的

[AkaraChen]

@sjhhjx0122 lit 我了解过，已经拿来写组件库了，我的意思是说，组件化靠 lit 实现，操作 litElement 的 prop 啥的则通过 nashi 这种类似 jq 的玩意

[hoythan]

你这语法等于重学一门语言，没必要。

[AkaraChen]

@hoythan 这。。。也没见别人说学 jq 等于学另一门语言啊，我这 API 设计的有什么不好吗

[hoythan]

@AkaraChen 因为我觉得得有足够让人心动的变化或更新才会大家去学习一门新语法。如果只是 jQuery 的替代的话他的文档更全一点。

[AkaraChen]

@hoythan 在我看来 jQuery 的文档冗长的让人难受，我这文档一句话把事情说清了反而好点。。。

[Yukiteru]

牛逼，大二就能写出来这个。楼主开始学编程有多久了？计算机专业的吗。

[tyrone2333]

我大二也去找实习,投了几十家就一家约了面试,还被婉拒了. 回来后天天写代码, 然后大四面了第一家就过了,3k 月薪当了一年的牛马:<

[ragnaroks]

经过实测，拿来写 user-script 的话要比直接使用香草方便些，而且大小可以接受

[ragnaroks]

我用 BUFF 获取求购比例的脚本测试，虽然多了个 2 KiB 的依赖，但是 user-script 本身减小了接近 300 行，挺好的。

不过常规前端我确实想不到有什么地方用得到这个库。

[putaozhenhaochi]

为啥 Web component 规范还没有流行开来

[LaTero]

楼上好像都是专业前端觉得没什么用，想我这种非专业的感觉顺便写一个网页挺好的。又不是写大应用，方便好学才最重要，看到 react 教程这么麻烦我直接用熟悉的技术编译到 wasm 算了。
顺便这项目用户和贡献者二次元浓度好高哦😏。

[AkaraChen]

@Yukiteru 高中那会是个计算机爱好者，也就写点 html css ，高考后的暑假开始自学 js ，学了一年多吧，虽然是计算机专业的，但是老师也没啥能教我的了

[AkaraChen]

@tyrone2333 同样找工作被婉拒，我现在是要去一个大学生创业项目实习

[AkaraChen]

@ragnaroks 终于见到有人实测了，有点感动。
我也正在考虑怎么用在实际项目，过段时间会写个风格指南

[yuthelloworld]

时代变了。而且原生写法也没什么负担。

[AkaraChen]

@LaTero 你这么一说我还真想研究一下写个 wasm 版本了🤣

[AkaraChen]

@yuthelloworld 原生 js 是没负担了，但是原生 dom API 还是跟以前一样不好用啊。。。

[penzi]

@ragnaroks 同意，userscript 确实一个不错的场景，里面有很多 dom 操作。attachshadow 是一个 userscript 必备的 API ，推荐作者加上。

[AkaraChen]

@maggch97 好的，已列入 todolist

[andyxic]

这个到底取代了 jquery 啥？ jquery 那么强大的选择器功能，貌似我没有看到啊？文档我就看到传标签，传 dom 节点...我都获取到 dom 节点了。干嘛还要包一层。前端老手原生 api 都可以直接白板的。还是要结合实际

[AkaraChen]

@andyxic jquery 那选择器我用 queryselector 实现了

[AkaraChen]

@andyxic 传元素是备选用的，有时候有这种需求。。。

[andyxic]

@AkaraChen 没看到文档上写，其实可以用你的东西去翻一个用 jquery 写的页面，这才能看到差距在哪里。对比才明显。光看文档 确实看不出来

[Rrrrrr]

jq 都没人用，再造一个？

[Envov]

搞成和 ajax 结合的，或许有点搞头，类似这样：
https://imgur.com/CqVZpOr

[AkaraChen]

@Rrrrrr 造一个比 jq 好点的，也未必没搞头

[AkaraChen]

@Envov 没做 ajax 的原因是原生 fetch API 已经够好，而且 ajax 轮子也不少了。况且看这个 API ，感觉实现出来库的大小得翻个倍，我就算造也肯定是造一个新库而非加到 nashi 了。。。

[AkaraChen]

@maggch97 能说一下写 user script 需要的 API 吗，正在设计 API 呢
@ragnaroks

[leegradyllljjjj]

拉屎.js ？

[AkaraChen]

@leegradyllljjjj 虽然很不情愿，但是能把名字给记住了，那也行吧🤣