Какой хороший способ реорганизовать растущее число функций javascript / jquery?

Question

Я работаю над проектом, в котором мы делаем много пользовательских javascript и особенно jquery, над проектом в стиле mvc.

Единственная проблема заключается в том, что я продолжаю добавлять все больше глобальных функций / переменных, и они накапливаются. У меня есть несколько файлов, но я не уверен, как разделить некоторые вещи на отдельные файлы.

Я думал о том, чтобы объединить некоторые из этих функций и глобальных переменных в объекты, но синтаксис объекта в 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 - хороший пример того, как настроить пространства имен JavaScript среди прочего.

Answer 3

Если вы работаете с 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

Answer 4

Вы можете разбить их так же, как это делает jquery.ui ... по категориям или по действию / контролю

например:

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

Могут ли они быть разбиты на контроли, с которыми они имеют дело?

Или чем они занимаются?

Только некоторые предложения ...