企业官网建设流程全解析

• 前端
• UI库/组件

CanJS 是一个帮助你用更少代码构建 CRUD 应用的 JavaScript 框架。本教程带你从零上手 CanJS 的StacheElement：用原生 Web Components 语法 + 可观察属性 + 实时绑定模板，快速开发可复用、可组合的 UI 组件，几行代码就能让数据"活"起来 🚀

在 CanJS 中，每一个组件都是一个标准自定义元素，内部由View Model（状态）+ Stache View（模板）组成。数据变化时，DOM 自动精准更新，无需手动操作 —— 这正是构建可复用 UI 组件的理想方式。

为什么选择 StacheElement 构建可复用组件

相比手写HTMLElement子类、手动拼接 DOM，StacheElement 给你三样东西：

• 可观察属性：声明式定义props，属性变化自动通知模板
• Stache 模板：{{ }}表达式 +on:click等绑定，写在 HTML 里就能用
• 标准 Web Components：注册后即可<my-counter></my-counter>直接使用，天然可复用、可跨项目分享

核心概念可参考官方技术概览 docs/can-guides/experiment/technology/technology.md，模块入口见 es/can-stache-element.js。

快速安装与环境准备步骤

安装 CanJS 只需一条命令（需要 Node.js 环境）：

npm install can@6 --save

项目提供多种接入方式（ES Module 包、webpack、StealJS、Browserify 等），完整对比见 docs/can-guides/setup/setting-up-canjs.md。新手推荐直接import { StacheElement } from "can"开始。

5 分钟上手：定义第一个 Web Component

以项目内置的经典计数器 Demo 为例（完整文件 demos/technology-overview/my-counter.html）：

import { StacheElement } from "can"; class MyCounter extends StacheElement { static view = ` <button on:click="this.increment()">+1</button> Count: <span>{{ this.count }}</span> `; static props = { count: 0 }; increment() { this.count++; } } customElements.define("my-counter", MyCounter);

HTML 中只需一行<my-counter></my-counter>，点击+1按钮，计数实时变化 ✨ 完整拆解请阅读 readme.md 中的 Web Components 章节。

掌握组件两大核心：view 与 props

每个 StacheElement 主要由两部分构成：

几个常用技巧：

• 计算属性：用get派生状态，如get left() { return this.value / 100 * this.width; }，详见拖拽滑块示例 demos/technology-overview/component-slider.js
• Promise 直接进模板：{{ this.dataPromise.value }}即可展示异步数据，无需手写加载逻辑
• 生命周期：在connected()中挂载事件、读取 DOM，返回函数用于清理

组件间传值：属性绑定的 3 种方式

可复用组件的灵魂在于"可传参、可通信"。CanJS 用属性绑定完成组件通信：

<my-modal> <diva-questions divaExpenses:bind="this.divaExpenses" /> </my-modal>

• xxx:from—— 父组件 → 子组件（单向）
• xxx:bind—— 双向绑定，子组件改值，父组件同步更新
• 组件标签之间写入的内容，可在模板中用<content></content>渲染（插槽机制）

实战案例见多模态窗教程 docs/can-guides/commitment/recipes/modals/modals.md，其中弹层组件用<content>承载任意表单内容：1-simple-modal.js。父子传参 Demo 还可参考 demos/can-stache-bindings/to-child.html。

实战：用 Web Components 构建待办列表与弹层

把组件组合起来，就能搭出完整应用。例如待办列表组件：通过Todo.getList()拿到 Promise，模板里{{# for(todo of this.todosPromise.value) }}直接循环渲染，数据更新后列表自动实时刷新，无需手动重新请求。

CanJS 在渲染大量列表项时性能表现稳定，组件化拆分后更新只触及变化的 DOM 节点：

更完整的进阶玩法：

• 多步骤表单弹窗：docs/can-guides/commitment/recipes/modals/
• 卡片表单组件：docs/can-guides/commitment/recipes/credit-card-simple/
• 文件浏览组件：docs/can-guides/commitment/recipes/file-navigator/

调试组件与继续学习路线

🔍 遇到问题时，CanJS DevTools 的Bindings Graph面板能可视化每个 DOM 节点背后的绑定关系，快速定位组件数据流断点：

继续学习路线图：

1. 模板与绑定：docs/can-guides/experiment/technology/html.md
2. 组件测试（无需真实 DOM 也能测逻辑）：docs/can-guides/topics/testing/testing.md
3. 数据层：docs/can-guides/topics/data/introduction.md —— 让组件专注 UI，数据交给 Model 层
4. 版本升级指南：docs/can-guides/upgrade/migrating-to-canjs-6.md

小结：StacheElement 让"可复用 UI 组件"变得极其简单 —— 一个类、两段声明（view + props）、一次注册，组件即可在任意页面即插即用。从计数器到复杂表单，CanJS 组件化开发值得每个前端开发者尝试 💪

• 前端
• UI库/组件