网站首页 > 技术文章正文

Strawberry:取代 Vanilla JS 的最佳选择?

nanyue 2024-12-13 15:29:26 技术文章 6 ℃

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家带来的主题是一个全新的 Strawberry 前端框架的发布，该框架号称是Vanilla JS的直接替代方案。话不多说，直接进入正题。

1.什么是 Strawberry

Strawberry 是一个微型前端框架，可为开发者提供反应性和可组合性。它以零依赖关系执行此操作，无需构建步骤，并且体积压缩后不到 3KB。

Strawberry 不是 React、Vue 等框架的替代品，它是 Vanilla JS 的替代品。它适用于简单、持久、低维护的网页和微型网络应用程序。

值得一提的是，目前 Strawberry 框架正处于非常实验的阶段，即 pre-alpha。目前在 Github 上通过 MIT 协议发布，短短一个月已经有超过 400+的 star，总体来看是一个值得关注的前端项目。

2.Strawberry 有什么特征

以下是 Strawberry 的一些典型功能，包括：

反应性：更改数据后同步 UI 更新
可组合性：创建和使用组件，支持组件化开发模式
无构建：不需要任何构建步骤
零依赖：没有任何外部依赖，一切都使用 WebAPI
体积小：源代码不到 1000 CLOC
无 VDOM：直接更新 DOM

Strawberry 项目在基于以下两个硬约束下开发：

零依赖
不需要构建步骤即可运行

除此之外，还有保持源代码简洁的软约束。

3.使用 Strawberry

下面有几个简单的例子，说明 Strawberry 现在可以做的一些事情。

基本使用

下面示例展示了如何定义组件、实例化组件、使用组件、动态更新组件。

<!-- Define Components -->
<template name="plum-p">
  <p style="color: plum"><slot /></p>
</template>
<!-- Initialize Strawberry -->
<script>
  const data = sb.init();
</script>
<!-- Use Components -->
<plum-p sb-mark="message">
  A plum colored p element!
</plum-p>

<!-- Dynamically Update Components -->
<script>
  data.message = 'Hello, World!';
</script>

基本反应性

设置 data.message 时更新 innerText。

<p sb-mark="message">Placeholder</p>
<script>
  data.message = 'Hello, Strawberry!';
</script>

计算值

更新 data.count 时，使用计算值 data.countMessage 更新 innerText。

<p sb-mark="countMessage">Placeholder</p>
<script>
  data.count = 0;
  data.countMessage = () => `The count is: ${data.count}`;
  data.count += 1;
</script>

条件渲染

只有当 data.sayHi 为真时才会渲染 p。

<template sb-if="sayHi">
  <p>Hi!</p>
</template>
<script>
  data.sayHi = true;
</script>

循环

当设置了 data.list 时，ul 会填充 li， li 的 innerText 是从列表项中设置的。

<ul sb-mark="list" sb-child="li"></ul>
<script>
  data.list = ['Strawberry', 'Mulberry', 'Raspberry'];
</script>

模板

在运行 sb.register 时，定义了 red-p 元素并可以使用。

<template name="red-p">
  <p style="color: red"><slot /></p>
</template>
<red-p>Hi!</red-p>

外部模板

模板可以在外部文件中定义，它们是使用 sb.load 加载和注册的

<script>
  sb.load('./templates.html');
</script>
<red-p>Hi!</red-p>

嵌套模板

命名槽可以用来模板嵌套场景，比如下面的例子：

<!-- Blue H1 Template -->
<template name="blue-h1">
  <h1 style="color: blue"><slot></slot></h1>
</template>
<!-- Red P Template -->
<template name="red-p">
  <p style="color: red"><slot></slot></p>
</template>
<!-- Div Template using the above two -->
<template name="user-div">
  <div>
    <blue-h1>
      <slot name="name" />
    </blue-h1>
    <red-p>
      <slot name="age" />
    </red-p>
  </div>
</template>
<script>
  const data = sb.init();
</script>
<body>
  <user-div sb-mark="user"></user-div>
</body>
<script>
  data.user = { name: 'Lin', age: 36 };
</script>

3.本文总结

本文主要和大家介绍一个全新的 Strawberry 前端框架的发布，该框架号称会成为Vanilla JS的直接替代方案。相信通过本文的阅读，大家对 Strawberry 会有一个初步的了解。当然，该框架是否会成为 Vanilla JS的替代方案下结论还为时过早，大家就当了解了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://strawberry.quest/

https://18alan.space/posts/how-hard-is-it-to-build-a-frontend-framework.html

https://github.com/18alantom/strawberry/tree/main/docs

https://github.com/18alantom/strawberry

上一篇：整理开源资源:零代码开发灵魂——逻辑引擎，收藏吧
下一篇：从 Nuxt3 开始

网站首页 > 技术文章 正文