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

Question

Iam пытается поправиться в кодировке javascript. Вдали от 1000 строк кода в одном файле. Но IAM не уверен, если это "правильный" способ:

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

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

var app = { 

     events : { 

     someEvent : "someEvent" 

     } 

} 

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

EventManager.publish(app.events.someEvent); 

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

Н.B Ангус Кролл имеет приличный blog, где он упоминает структуру JS/Пространство имен и т.д.

и есть некоторое время совместно над на JsMentors из хорошо разбирающихся Js ниндзей

Answer 2

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

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

Answer 3

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

Адрес этой страницы: http://javascript.crockford.com/.

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

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

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

Answer 4

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

Я прошел через ваш нарезанный код. Вероятно, вы должны определить разные части как модули, прочитайте requirejs documentation for defining modules, он дает хорошую помощь.

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

Answer 5

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

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