小型网站-全局javascript文件样式/格式/样式-提高可维护性

我经常创建(并继承)中小型网站,在这些网站中,我在单个文件(通常名为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()函数来初始化所有必需的功能.

3)具有一些帮助功能,可以初始化要在页面上使用的小部件.

只要是一次性的事情,您拥有的将特定功能限制在主页上运行或仅对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);

希望这可以帮助.

小型网站-全局javascript文件样式/格式/样式-提高可维护性

猜你在找的jQuery相关文章