简介
Thorax 是一个基于 Backbone.js 的前端框架，它提供了更多的组件化和可复用性，使得开发者可以更快速地构建 Web 应用。该框架支持模板预编译、自定义事件、数据绑定等特性，并且拥有非常友好的 API 设计。
安装 Thorax
在开始使用 Thorax 之前，需要先安装 Node.js 和 NPM。 接下来，我们就可以通过 NPM 来安装 Thorax 包：
--- ------- ------ ------
如果你正在使用浏览器而不是 CommonJS 模块，则可以直接使用CDN 来引入 Thorax：
------- -----------------------------------------------------------------------
创建一个Thorax应用程序
创建一个Thorax应用程序非常简单。首先，我们需要创建一个 HTML 文件并引入 Thorax：
--------- -----
----- ----------
------
----- ----------------
--------- ------ -----------
---- -------- ---
------- -----------------------------------------------------------------------
-------
------
-------
-------现在，我们可以通过以下代码创建一个 Thorax 应用程序：
--- ----- - --- --------------------
----- --------
---------- -
----- ------------ -- -- ----------
-
---
--------------建立视图
在 Thorax 中，视图是组成用户界面的基本块。我们可以通过以下代码创建一个简单的视图：
--- ------ - --------------------
--------- ---------- -
------ ----------- -------------
-
---
--- ---- - --- ---------
--------------这里我们定义了一个叫做 MyView 的视图类，并通过其 template 方法来指定该视图的 HTML 模板。最后，我们创建了一个 MyView 的实例并调用 render() 方法将其渲染到页面上。
数据绑定
Thorax 提供了非常方便的数据绑定功能。我们可以通过 $('[data-bind]') 选择器来获取所有带有 data-bind 属性的元素，并将其绑定到一个模型属性上。例如：
---- ----------------------------------------------
-- ---- -- --------
------其中，class{} 表示要绑定的是 class 属性，而 {my-class:isRed()} 表示当 isRed() 方法返回 true 时，该元素的 class 将会被设置为 my-class。另外，{{text}} 则表示输出当前模型的 text 属性。
事件处理
除了数据绑定，Thorax 还提供了非常方便的事件处理机制。我们可以通过 events 属性来定义视图中的事件处理函数，例如：
--- ------ - --------------------
------- -
------ -------- ---------------
--
-------------- ---------- -
------------- ----------
-
---这里我们定义了一个 MyView 类，并通过 events 属性来指定点击按钮时的回调函数。当用户单击按钮时，Thorax 将会自动调用 onButtonClick() 方法。
组件化
组件化是 Thorax 的重要特性之一。通过将应用程序拆分为多个小组件，我们可以更方便地管理代码并提高复用性。以下是一个简单的组件示例：
--- ----------- - --------------------
--------- ------------ ----------------
---
--- ---- - --- -------------
----- --------
---
--------------这里我们定义了一个名为 MyComponent
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35018