在前端开发中，我们常常需要使用各种第三方库及框架来辅助我们完成开发任务。can.js 是一个轻量级的 JavaScript 框架，它提供了一些强大的功能，比如数据绑定、模板渲染等，可以帮助我们更加高效地进行前端开发。
环境搭建
在开始使用 can.js 之前，我们需要先安装 Node.js 和 npm。打开终端并输入以下命令即可完成安装：
- -- --------------- ---- ------- ---- - -- --- --- ------- -- ---
安装完成后，在项目目录下执行以下命令安装 can.js：
--- ------- --- ------
基本用法
创建 ViewModel
ViewModel 是 can.js 中的一个重要概念，它可以将数据和模板绑定起来，并通过事件通知模板更新。下面是一个简单的例子，展示了如何创建一个 ViewModel 并将其绑定到模板上：
------ --- ---- ------ ----- --------- - --- --------- ----- -------- --------- ------- --- ----- -------- - ------------------------- ----------- -------------------- -- -- ------ -----
在上述代码中，我们首先通过 can.Map 来创建了一个 ViewModel，它包含两个属性：name 和 greeting。然后，我们使用 can.stache 函数来创建一个模板，并把 ViewModel 传递给它。最后调用模板函数，将模板渲染成 HTML。
数据绑定
在 can.js 中，数据绑定是一项非常强大的功能。它可以让我们把数据和模板绑定起来，当数据发生改变时，模板会自动更新。
下面是一个简单的例子，展示了如何实现数据绑定：
------ --- ---- ------ ----- --------- - --- --------- ----- -------- --------- ------- --- ----- -------- - ------------------------- ----------- ----------------------------------------------- ---------------------- -------- -- -------- ------ ----
在上述代码中，我们首先创建了一个包含两个属性的 ViewModel，并使用 can.stache 创建了一个模板。然后，我们将模板添加到页面上，并通过 viewModel.attr 方法来修改 ViewModel 的 name 属性。由于数据绑定的存在，模板会自动更新为新的值。
显示列表
can.js 也提供了一个强大的功能，可以让我们很方便地展示列表数据。
下面是一个简单的例子，展示了如何使用 can.List 和 each 块来展示一个列表：
------ --- ---- ------
----- ----- - --- ----------
- ----- ------ ------------ ----- ---- --
- ----- ------ ------- ----- ----- --
- ----- ------ -- ----- ----- ----- -
---
----- -------- - ------------
----
------- -------
------------ ------ -------------------------- ----------------------
---------
-----
---
------------------------------------ ----- ----在上述代码中，我们首先创建了一个包含三个对象的 can.List，每个对象都有一个 name 属性和一个 done 属性。然后，我们使用 can.stache 创建了一个模板，并使用 each 块来遍历 todos 列表中的每个对象，展示它们的属性。
高级用法
自定义元素
can.js 还提供了一些高级功能，比如自定义元素。通过自定义元素，我们可以将一整个页面片段打包成一个组件，并在其他地方重复使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/34635