Terrific JavaScript Framework 技术文档

2024-12-24 22:46:33作者：温玫谨Lighthearted

1. 安装指南

使用 Bower 安装

TerrificJS 可以通过 Bower 进行安装。执行以下命令即可：

bower install terrific

依赖项

TerrificJS 依赖于以下两个库：

es5-shim：用于兼容旧版浏览器。
es6-promise：用于支持 ES6 Promise。

如果你通过 Bower 安装 TerrificJS，这些依赖项会自动包含在内。

2. 项目的使用说明

快速开始

让 Terrific 应用程序运行起来非常简单，只需三个步骤：

创建模块
注释标记
启动应用程序

1. 创建模块

使用 T.createModule({ … }) 创建模块：

T.Module.Foo = T.createModule({
    start: function(resolve) {
        // 你的逻辑代码
        resolve();
    }
});

2. 注释标记

将 terrific.js 引入页面，并通过 data-t-name 属性注释你的标记：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div data-t-name="Foo">
        ...
    </div>
    <script src="bower_components/terrific/dist/terrific.min.js"></script>
</body>
</html>

3. 启动应用程序

在页面末尾或文档准备好时启动应用程序：

var application = new T.Application();
application.registerModules();
application.start();

3. 项目API使用文档

模块

模块是 TerrificJS 应用程序的核心。所有的 JavaScript 代码都将放在模块中。模块 API 非常简单，包含两个生命周期方法：start() 和 stop()。

T.Module.Foo = T.createModule({
    start: function(resolve) {
        // 启动时的逻辑
        resolve();
    },
    stop: function() {
        // 可选，停止时的清理逻辑
    }
});

装饰器

装饰器允许你扩展模块的功能。

示例

创建模块：

T.Module.Foo = T.createModule({
    value: 'foo',
    start: function(resolve, reject) {
        resolve();
    },
    foo: function() {
        return 'foo';
    }
});

创建装饰器：

T.Module.Foo.Bar = T.createDecorator({
    value: 'bar',
    start: function(resolve, reject) {
        this._parent.start(resolve, reject);
    },
    bar: function() {
        return "bar";
    },
    foo: function() {
        var value = this._parent.foo();
        return 'bar-' + value;
    }
});

使用装饰器：

var module = application.registerModule(document.createElement('div'), 'Foo', ['Bar']);
module.bar(); // -> bar
module.foo(); // -> bar-foo
module.value; // -> bar
module.start(); // 执行装饰器和模块的 start 方法

EventEmitter

EventEmitter 允许模块与外部（如其他模块）进行通信。每个模块都有一个绑定的 EventEmitter 实例，可以通过 this._events 访问。

支持的方法

emit(event, ...)：触发事件。
on(event, fn) / addListener(event, fn)：注册事件处理函数。
once(event, fn)：注册一次性事件处理函数。
off(event, fn) / removeListener(event, fn) / removeAllListeners(event, fn)：移除事件处理函数。
listeners(event)：返回事件处理函数的数组。
hasListeners(event)：检查是否存在该事件的处理函数。

示例

T.Module.Foo = T.createModule({
    start: function(resolve) {
        this._events.on('foo', function() {
            // 处理事件
        });
        resolve();
    }
});

启动应用程序

启动应用程序的代码应放在页面末尾或文档准备好时：

var application = new T.Application();
application.registerModules();
application.start();

4. 项目安装方式

通过 Bower 安装

执行以下命令安装 TerrificJS：

bower install terrific

依赖项

TerrificJS 依赖于 es5-shim 和 es6-promise，这些依赖项会自动包含在 Bower 安装中。

登录后查看全文