基于 Javascript 的組件化開發框架：Transformers
Transformers 是一套基于 Javascript 的已徹底組件化與模塊化的開發框架，主要關注組件路由、組件消息傳遞和組件異步加載等，其中要解決的核心問題是組件間的解耦。
快速開始
引入 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> 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！