Transformers组件化 Javascript 开发框架
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>
评论
Transformers组件化 Javascript 开发框架
Transformers是一套基于Javascript(JS)的已彻底组件化与模块化的开发框架,与WebComponents理念一致。框架主要关注组件路由、组件消息传递和组件异步加载等,其中要解决的核
Transformers组件化 Javascript 开发框架
0
Ale.js组件化 JavaScript 框架
介绍:Ale(中文:啤酒)是一套用于以组件的形式构建用户界面的渐进式框架。它信奉,万物皆组件。与其它大型框架不同的是,Ale只需要你将关注点放在数据上,并不需要关心任何与视图有关的内容。当你更新数据时
Ale.js组件化 JavaScript 框架
0
wepy小程序组件化开发框架
wepy是一个小程序组件化开发框架。组件小程序支持js模块化,但彼此独立,业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。例如模板A中绑定一个bindtap="myclick",
wepy小程序组件化开发框架
0
CaesarJJava开发组件框架
CaesarJ是一种新的基于Java的编程语言,有利于更好地开发模块化和可重复使用的组件。这些组件协作的类,他们可以模块化横切功能或无功能的关注。Caesar语言功能帮助执行,摘要和整合这样的组件。凯
CaesarJJava开发组件框架
0