雅星注册:jquery下组织javascript代码(js函数化)(2)

时间: 作者:装切

Yottaa.init_sayhello = function(obj){  
$(obj).click(function(){  
alert('Hello world!');  
});  
}  
Yottaa.init_unlike = function(obj){  
$(obj).click(function(){  
alert('I unlike it.');  
});  
}  
  
  
我们的DOM元素这样写:  
Say Hello  
Say Unlike  
  
这样看起似乎好多了,我们只需要在页面加载的时候执行一次class selector(在上面的代码中就是所有'.j'的元素)就可以找到所有需要绑定事件的元素,具体绑定哪一个组件由 class 名称里面的 a_xxx 来决定,对应着 Yottaa.init_xxx,并将当前元素的引用作为参数传入事件逻辑中。

  
在这个处理模式下,我们不需要再次手动编写事件处理的逻辑并将它放到 $(function(){ .... }); 这样的初始化函数中,所有我们要做的事情仅仅是给组件的“容器”加上两个 class: "j a_XXX"程序即可帮我完成事件绑定工作,是不是很 cool ?象常用的展开/折叠效果,全选/反选效果, tab切换以致于一些其它的简单功能都可以使用这种方式。难道这就是传说中的银弹?不,事情没那么简单,我们应该看到这种处理方式一些弱点:  
不能给组件传递初始化参数。

  
不能体现出组件的包含关系,也不能利用继承和多态等面向对象的特性使程序更容易编写和理解。

  
对于部分具体关联关系的组件在处理上略显麻烦,没有合理的事件通知机制。

  
我们来看看第一条:关于参数的传递,在许多场景下对于多个条目的列表,对应每一个条目我们一般会给元素分配一个唯一一的id,这些元素的行为类似,不同之处只是服务器端的编号不同,比如一个留言列表或者是一个产口列表。我们可以利用id属性为我们作一些事情,看下面的代码,我们用id属性把条目对应的服务器端编号告诉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 );  
}  
});  
});  
}  
  
Show server message.

  
Another button with same action but different server side identifier.

  

  
在更复杂的一些场景中我们可以利用页面上的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中。

  
页面需要指定哪些模块要在本页面上初始化,提供一个列表交由全局的事件绑定器统一处理。

  
下面来演示一下部分代码:  
代码如下:

  
  
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;iif(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.

  
  

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台