Как структурировать мой код javascript / jquery?

для кода javascript я нашел следующие ссылки от Christian Heilmann indispensable

• шаблон модуля
• настройка скрипты

Мне также очень нравится метод, описанный Питером Мишо здесь

для jQuery я сердечно рекомендую прочитать руководства по разработки и я нашел этот учебник по jQuery шаблоны плагин очень хорошо

чтобы контролировать мои события, я использую механизм публикации / подписки

jQuery.subscribe = function( eventName, obj, method ){
    $(window).bind( eventName, function() {
        obj[method].apply( obj, Array.prototype.slice.call( arguments, 1 ) );
    });
    return jQuery;
}

jQuery.publish = function(eventName){
    $( window ).trigger( eventName, Array.prototype.slice.call( arguments, 1 ) );
    return jQuery;
}

вот пример его использования

// a couple of objects to work with
var myObj = {
    method1: function( arg ) {
        alert( 'myObj::method1 says: '+arg );
    },
    method2: function( arg1, arg2 ) {
        alert( arg1 );
        //republish
        $.publish( 'anEventNameIMadeUp', arg2 );
    }
}

var myOtherObj = {
    say: function(arg){
        alert('myOtherObj::say says: ' + arg);
    }
}



// you can then have all your event connections in one place

//myObj::method2 is now listening for the 'start' event 
$.subscribe( 'start', myObj, 'method2' );

//myOtherObj::say is now listening for the 'another' event
$.subscribe( 'anotherEvent', myOtherObj, 'say' );

//myObj::method1 is now listening for the 'anEventNameIMadeUp' event
$.subscribe( 'anEventNameIMadeUp', myObj, 'method1' );
//so is myOtherObj::say
$.subscribe( 'anEventNameIMadeUp', myOtherObj, 'say' );


// ok, trigger some events (this could happen anywhere)
$.publish( 'start', 'message1', 'message2' );
$.publish( 'anotherEvent', 'another message' );

Я определенно рекомендую прочитать на объектном литеральном шаблоне в дополнение к шаблону модуля; вот хорошая запись:

http://ajaxian.com/archives/show-love-to-the-object-literal

(function($, window, slice)
{

    $.subscribe = function(eventName, obj, method)
    {
        $(window).bind(eventName, function()
        {
            obj[method].apply(obj, slice.call(arguments, 1));
        });
        return $;
    };

    $.publish = function(eventName)
    {
        $(window).trigger(eventName, slice.call(arguments, 1));
        return jQuery;
    };

})(jQuery, window, Array.prototype.slice);

чтобы добавить к существующим ответам, вот Великий пост это охватывает более продвинутые методы, которые строятся на шаблоне модуля.

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

Мои файлы js обычно следуют соглашению об именах, аналогичному этому:

• xxx.утилита.js
• mypage.события.js
• ХХХ.общие.js
• / lib/
• / OS-DoNotDistribute/lib/

здесь

• 'mypage' - это имя html, aspx, php и т. д. файл.
• ' xxx ' - это концепция. (то есть приказы.общий.js)
• "утилита" означает, что это многоразовый библиотечный скрипт (т. е. Аякс.полезность.js, controlfader.полезность.js)
• 'common' - это многоразовая функциональность для этого приложения, но не многоразовые через другие проекты
• 'lib' - это подкаталог для любых внешних или библиотечных скриптов
• "OS-DoNotDistribute" является подкаталогом, чтобы гарантировать, что лицензионный код ОС не распространяется, если приложение когда-либо продавалось.

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

Я не уверен, что это близко к тому, что вы ищете, но я надеюсь, что это помогает.

Мне очень нравятся эти статьи:

http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

Они помогли мне понять, как telerik создает расширения для asp.net mvc.

Мне нравится идея AMDs (см. ответ Никса).

но я обычно компилирую все мои JS-файлы в один JS-файл. В этом случае асинхронная часть не нужна. Поэтому я написал немного "загрузчик модулей Infile".

вот он:https://codereview.stackexchange.com/questions/14530/a-little-infile-amd

мы можем использовать шаблон mvc в наших приложениях javascript-jquery. (Позвоночник.Джей, нокаут.Яш и... ) зрелые библиотек мы можем использовать для этой цели.