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元素超能力

核心是$函数，返回具有超能力的元素和响应式状态对象：

1
2
3
4
5
6
7
8
9


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

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

增强的元素暴露强大属性：

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

⚙️ 批量响应式设置

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

1
2
3
4
5


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

🔗 强大的引用解构

$.refs函数返回自动绑定的变量和共享响应式状态对象：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

<script>
  const { el, btn, state } = $.refs('#app', { counter: 0 })
  el.html = () => `Counter: ${state.counter}`
  btn.onClick(() => state.counter++)
</script>

🧠 深度响应式

支持数组、对象等引用类型，通过突变触发响应式：

1
2
3
4
5


<script>
  const { box, fruit, btn, state } = $.refs('#app', { fruits: ['apple', 'pear'] })
  box.text = () => 'Fruits: ' + state.fruits.join(', ')
  btn.onClick(() => state.fruits.push(fruit.attr.value))
</script>

响应式HTML模板

使用x-属性在HTML中直接使用响应式表达式：

1
2


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

🧩 创建可复用组件

使用纯JavaScript构建响应式组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


const Counter = {
  state: () => ({ count: 0 }),
  template: `<p ref="p"></p><button ref="btn">+</button>`,
  setup({ refs, state }) {
    refs.p.text = () => `Count: ${state.count}`
    refs.btn.onClick(() => state.count++)
  }
}

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

计算属性

基于响应式状态派生值：

1
2


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

与任何后端协作

可与任何后端技术栈集成，如Laravel：

1
2
3
4
5


<script>
  const { state } = $.refs('#app', {
    fruits: @json($fruits)
  })
</script>

🚀 开始使用VanillaCreamJS

无论是快速原型开发、增强现有应用，还是重新发现编写简洁响应式JavaScript的乐趣，VanillaCreamJS都提供了轻量级、优雅的零构建步骤解决方案。