Transformers組件化 Javascript 開發(fā)框架
Transformers 是一套基于 Javascript(JS) 的已徹底組件化與模塊化的開發(fā)框架，與 Web Components 理念一致。框架主要關(guān)注組件路由、組件消息傳遞和組件異步加載等，其中要解決的核心問題是組件間的解耦。
快速開始
引入 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 模板的目標(biāo)渲染節(jié)點 --> <div class="TFTarget-content"></div> <!-- 名為 content 的模板 --> <script type="text/html" class="TFTemplate-content"> 你好！世界！ </script> </div> </body> </html>
2. 創(chuàng)建應(yīng)用程序
// 創(chuàng)建應(yīng)用程序
TF.Core.Application.create({
baseUrl: "./"
});
3. 創(chuàng)建組件 Home
// 定義名為 Home 的組件
TF.define('Home', {
// 組件 DOM 準(zhǔn)備完畢回調(diào)函數(shù)
DomReady: function() {
console.log('ready!');
},
// Action 是組件對外的接口
testAction: function(args) {
console.log('test!');
// 渲染靜態(tài)模板
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. 啟動應(yīng)用程序
// 等待 DOM Ready
TF.ready = function(){
// 啟動應(yīng)用程序
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 模板的目標(biāo)渲染節(jié)點 -->
<div class="TFTarget-content"></div>
<!-- 名為 content 的模板 -->
<script type="text/html" class="TFTemplate-content">
你好！世界！
</script>
</div>
<script type="text/javascript">
// 創(chuàng)建應(yīng)用程序
TF.Core.Application.create({
baseUrl: "./"
});
// 定義名為 Home 的組件
TF.define('Home', {
// 組件 DOM 準(zhǔn)備完畢回調(diào)函數(shù)
DomReady: function() {
console.log('ready!');
},
// Action 是組件對外的接口
testAction: function(args) {
console.log('test!');
// 渲染靜態(tài)模板
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(){
// 啟動應(yīng)用程序
TF.Core.Application.bootstrap();
};
</script>
</body>
</html>評論
圖片
表情