我经常创建(并继承)中小型网站,在这些网站中,我在单个文件(通常名为global.js或application.js或projectname.js)中具有以下类型的代码.
如果函数变大,我通常将它们放在单独的文件中,并在$(document).ready()部分下面的文件底部调用它们.
如果我有某些特定于某些页面的函数,通常我在$(document).ready()部分中有另一个body类的switch语句.
我如何重组此代码以使其更易于维护？
注意：我对函数内部的兴趣不大,对结构的兴趣以及应如何处理不同类型的函数的兴趣更小.
我还在这里发布了代码-http://pastie.org/999932,以防万一
var ProjectNameEnvironment = {};
function someFunctionUniqueToTheHomepageNotWorthMakingConfigurable () {
$('.foo').hide();
$('.bar').click(function(){
$('.foo').show();
});
}
function functionThatIsWorthMakingConfigurable(config) {
var foo = config.foo || 700;
var bar = 200;
return foo * bar;
}
function globallyrequiredJqueryPluginTrigger (tooltip_string) {
var tooltipTrigger = $(tooltip_string);
tooltipTrigger.tooltip({
showURL: false
...
});
}
function minorUtilityOneLiner (selector) {
$(selector).find('li:even').not('li ul li').addClass('even');
}
var LightBox = {};
LightBox.setup = function(){
$('li#foo a').attr('href','#alpha');
$('li#bar a').attr('href','#beta');
}
LightBox.init = function (config){
if (typeof $.fn.fancybox =='function') {
LightBox.setup();
var fade_in_speed = config.fade_in_speed || 1000;
var frame_height = config.frame_height || 1700;
$(config.selector).fancybox({
frameHeight : frame_height,callbackOnShow: function() {
var content_to_load = config.content_to_load;
...
},callbackOnClose : function(){
$('body').height($('body').height());
}
});
}
else {
if (ProjectNameEnvironment.debug) {
alert('the fancybox plugin has not been loaded');
}
}
}
// ---------- order of execution -----------
$(document).ready(function () {
urls = URLconfig();
(function globalFunctions() {
$('.tooltip-trigger').each(function(){
globallyrequiredJqueryPluginTrigger(this);
});
minorUtilityOneLiner('ul.foo')
LightBox.init({
selector : 'a#a-lightBox-trigger-js',...
});
LightBox.init({
selector : 'a#another-lightBox-trigger-js',...
});
})();
if ( $('body').attr('id') == 'home-page' ) {
(function homeFunctions() {
someFunctionUniqueToTheHomepageNotWorthMakingConfigurable ();
})();
}
});
最佳答案
您问题的“安全”和“高性能”部分是如此之大,以至于在这里我不会尝试解决这些问题：),但是我将讨论可维护性.
这是我使用的方法.我确信它可以得到改进-可以做任何事情-到目前为止,对我来说效果很好：
1)使用名称空间.这是我使用的：Is it possible to create a namespace in jQuery?
2)按使用区域(主页或管理页面等)或按用途(字符串函数,动画等)将窗口小部件中的功能分组-哪种方式对您更有效.在每个小部件中,都有一个init()函数来初始化所有必需的功能.
只要是一次性的事情,您拥有的将特定功能限制在主页上运行或仅对IE6用户运行的任何逻辑都可以隐藏在相关功能内,而无需对整个功能进行初始化东西很干净.
示例(包括从上面链接的问题中捏出来的namespacing函数)：
jQuery.namespace = function() {
var a=arguments,o=null,i,j,d;
for (i=0; i<a.length; i=i+1) {
d=a[i].split(".");
o=window;
for (j=0; j<d.length; j=j+1) {
o[d[j]]=o[d[j]] || {};
o=o[d[j]];
}
}
return o;
};
// set up your namespace
$.namespace( 'jQuery.myProject' );
// init helper
$.myProject.init = function(widget) {
$(document).ready(widget.init);
}
/**
* Sitewide scripts
*/
$.myProject.Sitewide = {
init: function()
{
$.myProject.Sitewide.doSomething();
$.myProject.Sitewide.doSomethingElse();
},doSomething: function()
{
// here goes your code
},doSomethingElse: function()
{
// you get the idea
}
};
// more widgets here
// ...
// final step - call the init() helper
$.myProject.init($.myProject.Sitewide);
// init more widgets:
// $.myProject.init($.myProject.AnotherWidget);
希望这可以帮助.
