Как структурировать мой код javascript / jquery? - PullRequest
66 голосов
/ 09 февраля 2009

Я играю с довольно интенсивным jquery-приложением на основе ajax. Наступает момент, когда я почти забываю, какие события должны вызывать какие действия и т. Д.

У меня вроде как осталось ощущение, что моя структура javascript неверна, на более базовом уровне. Как вы, ребята, структурируете свой код javascript / jquery, обработку событий и т. Д., Любые советы для начинающего разработчика javascript.

Ответы [ 10 ]

34 голосов
/ 14 ноября 2011

AMDS!

Прошло много времени с тех пор, как на этот вопрос были опубликованы первые ответы, и многое изменилось. Во-первых, кажется, что мир браузеров JS движется к AMD (определение асинхронных модулей) для организации кода.

Способ, который работает, заключается в том, что вы пишете ВСЕ свой код в виде модулей AMD, например ::10000

define('moduleName', ['dependency1', 'dependency2'], function (dependency1, dependency2) {
    /*This function will get triggered only after all dependency modules loaded*/
    var module = {/*whatever module object, can be any JS variable here really*/};
    return module;
});

И затем модули загружаются с использованием загрузчиков AMD, таких как curl.js или require.js и т. Д., Например:

curl(
    [
        'myApp/moduleA',
        'myApp/moduleB'
    ],
).then(
    function success (A, B) {
        // load myApp here!
    },
    function failure (ex) {
        alert('myApp didn't load. reason: ' + ex.message);
    }
);

Преимущества:

  1. Вам нужно всего лишь включить на страницу только один элемент <script>, который загружает сам загрузчик AMD (некоторые из них довольно маленькие).

  2. После этого все файлы JS будут автоматически выбираться в асинхронном режиме без блокировки! мода, таким образом, намного быстрее!

  3. Необходимые модули будут выполняться только после загрузки его зависимостей.

  4. Модульный (что означает код, который легче поддерживать и повторно использовать).

  5. При правильном использовании загрязнение глобальными переменными может быть полностью ограничено.

Честно говоря, как только концепт нажмет в вашей голове, вы никогда не вернетесь к своим старым путям.

P.S: jQuery регистрируется как модуль AMD, начиная с версии 1.7.

Дополнительная информация о AMDS:

25 голосов
/ 09 февраля 2009

Для кода javascript я нашел следующие ссылки от Кристиана Хайльмана незаменимыми

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

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

9 голосов
/ 09 февраля 2009

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

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' );
7 голосов
/ 09 февраля 2009

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

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

2 голосов
/ 25 января 2011

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

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

2 голосов
/ 23 июня 2009
(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);
1 голос
/ 10 августа 2012

Мне нравится идея AMD (см. ответ nix ).

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

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

1 голос
/ 13 декабря 2011

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

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.

1 голос
/ 09 февраля 2009

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

  • xxx.utility.js
  • mypage.events.js
  • xxx.common.js
  • / Библиотека /
  • / OS-DoNotDistribute / Библиотека /

Где

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

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

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

0 голосов
/ 26 сентября 2011

Мы можем использовать шаблон mvc в наших приложениях javascript-jquery. (Backbone.js, knockout.js vs ....) - зрелые библиотеки, которые мы можем использовать для этой цели.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...