javascript - 重构越来越多的 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/Plugins/Authoring

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

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

http://jamal-mvc.com

http://javascriptmvc.com