组件化 Javascript 开发框架 Transformers
- 授权协议: MIT
- 开发语言: JavaScript
- 操作系统: 跨平台
- 软件首页: https://github.com/hex-ci/Transformers
- 软件文档: https://github.com/hex-ci/Transformers/wiki
软件介绍
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>
ASP.NET 2.0技术内幕
埃斯帕斯托 / 施平安 / 清华大学出版社 / 2006-8 / 68.00元
《ASP.NET2.0技术内幕》围绕着ASP.NET 2.0是Web开发的重要分水岭这一主题，采用自顶向下的方式介绍ASP.NET 2.0的最新编程实践，从更广泛的特征到具体的实现和编程细节，充分展示了ASP.NET的最新编程实践。全书共15章，主题涉及HTTP运行库、安全性、缓存、状态管理、控件、数据绑定和数据访问。 《ASP.NET2.0技术内幕》主题丰富，讲解透彻，包含大量实例，是......一起来看看 《ASP.NET 2.0技术内幕》 这本书的介绍吧!
