Подтвердить что ты не робот

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

Я играю с довольно интенсивным веб-приложением jQuery на основе ajax. Это доходит до того, что я почти потерял информацию о том, какие события должны вызывать действия и т.д.

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

4b9b3361

ОТВЕТЫ

Ответ 1

AMDS!

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

Как это работает, вы пишете ВСЕ свой код в виде модулей AMD, например:

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);
    }
);

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

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

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

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

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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' );

Ответ 5

(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);

Ответ 6

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

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

Ответ 7

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

  • xxx.utility.js
  • mypage.events.js
  • xxx.common.js
  • /Lib/
  • /OS-DoNotDistribute/Library/

Где

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

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

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

Ответ 10

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