重构数量不断增长的javascript / jquery函数的好方法是什么？

Question

我正在一个项目中，我们在一个mvc样式项目中正在做很多自定义javascript，尤其是jquery。

唯一的问题是，我不断添加越来越多的全局函数/变量，并且它们正在堆积。 我有一些文件，但是我不确定如何将某些内容拆分为单独的文件。

我曾考虑过将这些函数和全局变量中的一些组成对象，但是javascript中的对象语法对我来说有点尴尬（因为缺少经典类）。 尽管如果我有一个很好的榜样可以跟随，也许我可以走了。

您如何处理这样的全局javascript函数和变量开始堆积的项目？

Answer 1

一种将一堆全局变量和函数堆积到单个全局对象中的非常简单的方法：

// Awful pile of globally-scoped names
var foo = 1
var bar = 2
function go = function(){
    console.log('Yeehaw!');
}


// Instead, just dump everything into a global-level object
var MyApp = {
    foo: 1,
    bar: 2,
    go: function(){
        console.log('Yeehaw!');
    }
}  

// Now access stuff like this
console.log(MyApp.foo);
console.log(MyApp.bar);
MyApp.go();

对于“简单的”顶级变量和函数，我推荐这样做。 可以对此进行很多改进，但是它们可能属于过早优化的类别； 这是伟大的第一步。

Answer 2

YUI剧院上的Crockford视频是如何设置JavaScript名称空间的一个很好的例子。

Answer 3

您可以按照类别或操作/控制将它们分解成类似于jquery.ui的...

例如：

effects.blind.js
Effects.bounce.js
ui.accordion.js

是否可以将它们分解为要处理的控件？

还是他们做什么？

只是一些建议...

Answer 4

如果您使用的是jQuery，则组织代码的第一种方法是构建jquery插件：

http://docs.jquery.com/插件/作者

http://www.learningjquery.com/2007/10/a-plugin-development-pattern

正如您提到的mvc一样，那里有各种javascript实现，但我不确定它们是否非常流行：jamal，javascript mvc，

http://jamal-mvc.com

http://javascriptmvc.com