<script type="text/javascript">
Yottaa.init_sampleajax = function(obj){
$(obj).click(function(){
var component_id = $(this).attr('id').split('-')[1];
$.get('/server/controller/method', {id: component_id}, function(data){
if(data){
alert('Message from server: ' + data );
}
});
});
}
</script>
<a href="javascript:;">Show server message. </a>
<a href="javascript:;">Another button with same action but different server side identifier.</a>
在更复杂的一些场景中我们可以利用页面上的inline code给组件传递一些必要的信息。
复制代码 代码如下:
Yottaa.globalConst = {
User:{
familyName: "Jhone",
givenName: 'bruce'
},
Url:{
siteName: 'yottaa.com',
score: 98
}
}
Yottaa.componentMetaData = {
compoment_id_1:{ ...... },
component_id_2:{ ...... }
};
上面讨论了一种可能的代码组织办法，但是并非适用于所有的项目，我们要做的是：针对于目前的现状，找到一个在代价比较小的重构方案。我们考虑如下几点：
分离元素的事件绑定代码和组件代码：组件代码包括jquery库，相关扩展插件，以及我们自己编写的小部件，如chartbox等内容。
事件绑定及处理逻辑：按不同的组件划分为多个模块，每个模块放入一个function中。
页面需要指定哪些模块要在本页面上初始化，提供一个列表交由全局的事件绑定器统一处理。
下面来演示一下部分代码：
复制代码 代码如下:
<script type="text/javascript">
function init_loginPanel = function(){
var container = $('login_panel');
$('#login_button').click(function(){
......
});
}
function init_chart = function(){
......
}
//global static init method
Yottaa.initComponents = function(components){
for(var i = 0;i<components.length;i++){
if(typeof window[components[i]] == 'Function'){
window[components[i]]();
}
}
}
// above is in the 'all-in-one' assets file which is compressed to one file in production.
var components = ['init_loginPanel', 'init_chart'];
var metaData = {
loginPanel: {},
chart: {},
......
};
$(function(){
Yottaa.initComponents(components);
});
//here is inline script on the page.
</script>
您可能感兴趣的文章: