Transformers 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Transformers 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Transformers 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 _Hex_
适用人群 未知
收录时间 2014-10-09

软件简介

Transformers 是一套基于 Javascript(JS) 的已彻底组件化与模块化的开发框架,与 Web Components 理念一致。框架主要关注组件路由、组件消息传递和组件异步加载等,其中要解决的核心问题是组件间的解耦。

快速开始

引入 jQuery

<script src="http://javascript.u.qiniudn.com/jquery/1110.js"></script>

引入 Transformers 框架

<script src="http://javascript.u.qiniudn.com/jquery/transformers.js"></script>

开始使用

1. 编写组件容器

<!doctype html>
<html>
<head>
    <title>Hello World</title>
    <meta charset="utf-8" />
    <script src="http://javascript.u.qiniudn.com/jquery/1110.js"></script>
    <script src="http://javascript.u.qiniudn.com/jquery/transformers.js"></script>
</head>
<body>

<div id="content" class="TFComponent">
    <div>
        <!--
            指定 tf-action-click 属性会给此元素绑定 click 事件
            事件处理器是组件的 testAction 方法
        -->
        <button type="button" tf-action-click="test">测试</button>
    </div>

    <!-- content 模板的目标渲染节点 -->
    <div class="TFTarget-content"></div>

    <!-- 名为 content 的模板 -->
    <script type="text/html" class="TFTemplate-content">
    你好!世界!
    </script>
</div>

</body>
</html>

2. 创建应用程序

// 创建应用程序
TF.Core.Application.create({
    baseUrl: "./"
});

3. 创建组件 Home

// 定义名为 Home 的组件
TF.define('Home', {
    // 组件 DOM 准备完毕回调函数
    DomReady: function() {
        console.log('ready!');
    },

    // Action 是组件对外的接口
    testAction: function(args) {
        console.log('test!');

        // 渲染静态模板
        this.sys.renderStaticTemplate('content');

        this.renderOk();
    },

    // 组件私有方法,外部无法访问
    renderOk: function() {
        console.log('render OK!');
    }
});

4. 注册组件

// 添加名为 Home 的组件到组件管理器中
TF.Core.ComponentMgr.add([{
    name: 'Home',
    appendRender: false,
    lazyRender: false,
    hide: false,
    applyTo: '#content'
}]);

5. 启动应用程序

// 等待 DOM Ready
TF.ready = function(){
    // 启动应用程序
    TF.Core.Application.bootstrap();
};

实例

<!doctype html>
<html>
<head>
    <title>Hello World</title>
    <meta charset="utf-8" />
    <script src="http://javascript.u.qiniudn.com/jquery/1110.js"></script>
    <script src="http://javascript.u.qiniudn.com/jquery/transformers.js"></script>
</head>
<body>

<div id="content" class="TFComponent">
    <div>
        <!--
            指定 tf-action-click 属性会给此元素绑定 click 事件
            事件处理器是组件的 testAction 方法
        -->
        <button type="button" tf-action-click="test">测试</button>
    </div>

    <!-- content 模板的目标渲染节点 -->
    <div class="TFTarget-content"></div>

    <!-- 名为 content 的模板 -->
    <script type="text/html" class="TFTemplate-content">
    你好!世界!
    </script>
</div>

<script type="text/javascript">
// 创建应用程序
TF.Core.Application.create({
    baseUrl: "./"
});

// 定义名为 Home 的组件
TF.define('Home', {
    // 组件 DOM 准备完毕回调函数
    DomReady: function() {
        console.log('ready!');
    },

    // Action 是组件对外的接口
    testAction: function(args) {
        console.log('test!');

        // 渲染静态模板
        this.sys.renderStaticTemplate('content');

        this.renderOk();
    },

    // 组件私有方法,外部无法访问
    renderOk: function() {
        console.log('render OK!');
    }
});

// 添加名为 Home 的组件到组件管理器中
TF.Core.ComponentMgr.add([{
    name: 'Home',
    appendRender: false,
    lazyRender: false,
    hide: false,
    applyTo: '#content'
}]);

// 等待 DOM Ready
TF.ready = function(){
    // 启动应用程序
    TF.Core.Application.bootstrap();
};
</script>

</body>
</html>
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
8 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部