VanillaCreamJS：为原生JavaScript赋予超能力

VanillaCreamJS是一个JavaScript库，为原生JavaScript赋予"超能力"，无需构建工具或编译步骤即可实现强大的现代功能，如响应式编程。

这是一项独一无二的技术，因为它：

为原生JavaScript带来响应式能力
由于没有差异比较或重新计算算法，具有出色的性能
通过最小化、直观的API提供强大工具
帮助提高对原生JavaScript的理解
可与任何后端技术栈零摩擦集成
提高中小型项目的开发效率
结合了HTMX、Vue和Alpine等工具的优点

📦 安装

通过CDN引入：

1

<script src="https://cdn.jsdelivr.net/npm/vanillacream/dist/vanillacream.min.js"></script>

或通过NPM安装：

1

npm install vanillacreamjs

💥 DOM元素的超能力

VanillaCream的核心是$函数。它返回具有超能力的元素（或元素集），包括响应式状态绑定：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<div id="app">
  <div id="el"></div>
</div>

<script>
  const [el, s] = $('#el', { counter: 10 })

  el.text = () => s.counter
  el.onClick(() => s.counter++)
</script>

$函数返回DOM元素和响应式状态对象。每个增强的元素都暴露强大属性：

text: 设置文本内容
html: 设置内部HTML
class: 动态切换CSS类
on: 添加事件监听器（如onClick、onInput等）
attr: 设置HTML属性
data: 设置数据属性

⚙️ 使用.set进行批量响应式操作

可以使用.set一次性应用多个响应式属性：

1
2
3
4
5


el.css.set({
  color: 'blue',
  backgroundColor: () => state.bg,
  width: () => state.x + 'px'
})

Refs：强大的解构

$.refs函数接受根元素并返回模板中每个ref的自动绑定变量，以及共享的响应式状态对象：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<div id="app">
  <div ref="el"></div>
  <button ref="btn">Update state</button>
</div>

<script>
  const { el, btn, state } = $.refs('#app', { counter: 0, bg: 'lightblue', boxClass: false })

  el.html = () => `Counter: ${state.counter}`
  el.css.backgroundColor = () => state.bg
  el.class.box = () => state.boxClass

  btn.onClick(() => {
    state.counter++
    if (state.bg !== 'lightgreen') state.bg = 'lightgreen'
    state.boxClass = !state.boxClass
  })
</script>

🧠 深度响应式

VanillaCream的响应式引擎支持原始类型和引用类型（如数组、对象和矩阵）。只需改变数组元素或对象属性即可触发响应式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<div id="app">
  <div ref="box"></div>
  Insert fruit: <input ref="fruit">
  <button ref="btn">Add Fruit</button>
</div>

<script>
  const { box, fruit, btn, state } = $.refs('#app', { fruits: ['apple', 'pear', 'kiwi'] })

  box.text = () => 'Fruits: ' + state.fruits.join(', ')

  btn.onClick(() => {
    state.fruits.push(fruit.attr.value)
    fruit.attr.value = ''
  })
</script>

响应式HTML模板

VanillaCream支持在HTML中直接使用x-属性进行响应式表达式：

1
2
3
4
5


<div id="app">
  <div x-text="`Counter: ${state.counter}`"></div>
  <button x-on.click="() => state.counter++">Increase counter</button>
  <div x-if="state.counter === 10">Counter is 10!</div>
</div>

AJAX请求简化

VanillaCream通过非常简单的语法提供对AJAX的完全控制：

1
2
3
4
5
6
7


el.post('https://jsonplaceholder.typicode.com/posts/', {
  data: {
    title: 'VanillaCream.js',
    body: 'Best Vanilla JS framework',
    userId: 1
  }
})

🧩 使用VanillaCream创建可重用组件

VanillaCream.js最强大的功能之一是能够在纯JavaScript中构建可重用的响应式组件，无需自定义渲染函数、钩子或任何虚拟DOM：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const Counter = {
  state: () => ({ count: 0 }),

  template: `
    <p ref="p"></p>
    <button ref="btn">+</button>
  `,

  setup({ refs, state }) {
    const {p, btn} = refs
    p.text = () => `Count: ${state.count}`
    btn.onClick(() => state.count++)
  }
}

要在一个或多个位置渲染此组件，只需使用：

1

$('#counter1, #counter2').component(Counter)

使用计算属性

在VanillaCream中，计算属性允许您基于其他响应式状态派生值：

1
2


const fullName = () => `${state.firstName} ${state.lastName}`
box.text = () => `Hello, ${fullName()}!`

与任何后端配合使用

虽然VanillaCream支持组件，但您也可以将组件渲染委托给后端。它可以与任何后端技术栈无缝集成。

VanillaCream.js提供了一个轻量级、优雅的解决方案，无论您是构建快速原型、增强现有应用程序，还是只是想重新发现编写干净响应式JavaScript的乐趣。