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 安装中。

登录后查看全文

Terrific JavaScript Framework 技术文档

1. 安装指南

使用 Bower 安装

依赖项

2. 项目的使用说明

快速开始

1. 创建模块

2. 注释标记

3. 启动应用程序

3. 项目API使用文档

模块

装饰器

示例

EventEmitter

支持的方法

示例

启动应用程序

4. 项目安装方式

通过 Bower 安装

依赖项

热门内容推荐

最新内容推荐

项目优选

Terrific JavaScript Framework 技术文档

1. 安装指南

使用 Bower 安装

依赖项

2. 项目的使用说明

快速开始

1. 创建模块

2. 注释标记

3. 启动应用程序

3. 项目API使用文档

模块

装饰器

示例

EventEmitter

支持的方法

示例

启动应用程序

4. 项目安装方式

通过 Bower 安装

依赖项

相关内容推荐

热门内容推荐

最新内容推荐

项目优选