Структура JavaScript, правильно?

Question

Я пытаюсь стать лучше в кодировке javascript. Вдали от 1000 строк кода в одном файле. Но я не уверен, что это «правильный» путь:

RequireJS для загрузки файлов при необходимости внутри "boot.js":

require([
    "library/jquery.form/jquery.form",
    "app/eventManager",
    "app/myapp"
], function() {
    $(function() {
        MyApp.init();
    });
});

MyApp.js

var MyApp = {
init: function() {
    MyApp.mainController();
},

// this is our controller, only load stuff needed..
mainController: function() {

    //controller = set from php/zendframework
    switch (controller) {
        case 'admin':
            MyApp.initAdmin();
            break;
        default:
            break;
    }
},

// action for admin controller
initAdmin: function() {
    //lazy load
    require(["app/admin/admin"], function(){
        MyApp.admin.init();
    });
}};

MyApp.admin.js

MyApp.admin = {
init : function() {
    if (permisson != 'admin') {
        console.log('Permission denied.');
        return false;
    }
    MyApp.admin.dashboard.init();
}

};

MyApp.admin.dashboard = {

init: function() {
    MyApp.admin.dashboard.connectEventHandlers();
    MyApp.admin.dashboard.connectEvents();
    MyApp.admin.dashboard.getUserList('#admin-user-list');
},

connectEvents: function () {
    EventManager.subscribe("doClearCache", function() {
        MyApp.admin.dashboard.doClearCache(url);
    });

    EventManager.subscribe("doDeleteUser", function() {
        MyApp.admin.dashboard.doDeleteUser(url);
    });

},

Какие еще "стили" распространены? или это хороший способ структурировать код? В сети много примеров, но я не смог найти код "реальной жизни" ..

И одна из самых больших "проблем", когда мне нужен ".prototype"?

Answer 1

Шаблоны JavaScript - хороший справочник по различным способам структурирования кода.

Было бы также неплохо изучить исходный код библиотек, таких как jQuery.

Answer 2

Одно изменение, которое я бы сделал в вашем коде, - это избегать повсеместного повторения строк 'event'. Вы можете уменьшить это, сделав что-то вроде:

var app = {

      events : {

         someEvent : "someEvent"

      }

}

EventManager.subscribe(app.events.someEvent, someFn);

EventManager.publish(app.events.someEvent);

Я бы также избегал прямого вызова console.log и использовал бы оболочку, такую ​​как this , которая обеспечивает запасной вариант, если консоль недоступна

Н. Б. Ангус Кролл имеет приличный блог , где он упоминает структуру js / пространство имен и т. Д.

и есть некоторые действительно хорошие знания, которыми можно поделиться на JsMentors от хорошо осведомленных js ninjas

Answer 3

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

Если вам нужно ссылаться на эталонную архитектуру для крупномасштабной js-разработки, см. http://boilerplatejs.org. Я являюсь ее основным автором, и она демонстрирует множество шаблонов, полезных при разработке сложных продуктов.

Answer 4

Require.js - отличный инструмент, вы можете использовать его и на стороне клиента.Но будьте осторожны, когда вы используете его на мобильном телефоне.В этом случае вы должны либо использовать редактор для лучшей навигации в одном файле, либо использовать что-то вроде sprocket .Это «прекомпилятор», не добавляющий никакой дополнительной библиотеки в ваш код.

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

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

Answer 5

Я полагаюсь на Дугласа Крокфорда по всем вопросам, касающимся лучших практик JavaScript.

Вот его домашняя страница: http://javascript.crockford.com/.

Вот отличная книга о том, что делать и чего не делать в JavaScript. http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrrldwideweb

Вот его удивительный инструмент, который может автоматически сказать вам, если вы используете какие-либо худшие практики. http://www.jslint.com/

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