Организация кода javascript

Ответ 1

Самый лучший ресурс, который я нашел на эту тему, - это творческая книга Ady Osmani, Шаблоны для широкомасштабной архитектуры приложений JavaScript. Он основан в части архитектуры Масштабируемой архитектуры приложений для Apple, адаптируя ее к классическим шаблонам дизайна и современному документообороту.

Как только вы достигнете даже скромного уровня сложности, вам будет полезно работать с каркасом, построенным с использованием шаблона архитектуры MVC. Backbone.js является лидером и представляет собой микро-фреймворк, а это означает, что он меньше удерживает руки, чем другие. Другие популярные варианты Ember.js, KnockoutJS.

Расширения и шаблоны также основаны на этих структурах для обработки повторяющихся задач, таких как привязка данных/модели и строительные леса. Для Backbone, проверьте Backbone.Marionette у Derick Bailey и Backbone Aura, не совсем готовый, для производственной адаптации архитектурной модели Osmani/Zakas, построенной с использованием Backbone как ее... ну, позвоночника.

Ответ 2

Будучи JavaScript языком сценариев, структура является одной из самых важных проблем в крупных проектах Javascript. Важно, чтобы части вашего приложения были хорошо развязаны и "самодостаточны". Например, вы можете создать свои собственные компоненты пользовательского интерфейса, имеющие свой собственный шаблон, логику, стиль, локализацию и т.д. В одной папке. Такая локальная сдерживающая способность позволит вам организовать сложный внешний код в управляемом режиме.

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

• Как эти слабосвязанные компоненты взаимодействуют с плотной муфтой
• Как я должен оптимизировать эти отдельные части для быстрой загрузки в моем проекте env

Я являюсь автором эталонной архитектуры BoilerplateJS для крупномасштабных приложений.

http://boilerplatejs.org

Он включает в себя большинство лучших практик, обсуждаемых в предложении Николаса Закаса. Вы также найдете пример реализации модульного набора продуктов в коде. Посмотрите, вы поймете, какие проблемы вы должны будете обратить внимание, делая широкомасштабное приложение с JavaScript.

Ответ 3

Предположим, мы создаем кроссплатформенное приложение, как показано ниже

Извините за удаление грязного контента.

Мы хотим, чтобы это кроссплатформенно, поэтому мы пишем это с помощью JavaScript. Мы хотим, чтобы наш синтаксис был умным, элегантным и лаконичным, поэтому мы используем jQuery.

Наша структура источника будет такой

В папке js у нас есть три папки: controller, model, view. Мы делим наше приложение на три (может быть много) части: главное, меню и навигационная панель.

Для каждой из этих частей у нас есть ...Ctrl.js и ...View.js У нас есть только одна модель mainModel.js (на всякий случай).

Ctrl.js - это место, где ваши обработчики и где вы прикрепляете их к элементам управления. Например mainCtrl.js:

app.mainCtrl = {
   model: app.mainModel,
  init: function(){

     $('#addButton').click(function(){
         this.model.addToFavorites();
     });
     $('#removeButton').click(function(){
         this.model.removeFromFavorites();
     });
  }
};

(маленькие звездочки справа на скриншоте выше - это кнопки добавления/удаления)

Контроллер может содержать ссылки как на вид, так и на модель или только на модель (как в примере выше).

Model.js - это то, где мы обновляем наш бэкэнд и представление. Например mainModel.js:

app.mainModel = {

  view: app.mainView,
  all: {},
  favorites: {},
  init: function(){
   /* for example
   this.all = $.parseJSON ($.load('url'));
   this.favorites = $.parseJSON ($.load('url')); 
    */
      this.showAll();


  },
  showAll: function(){
       this.view.show(this.all);
  },
  showFavorites: function(){
       this.view.show(this.favorites);
  },
  addToFavorites: function(item){
      //add item to favorites
  },
  removeFromFavorites: function(item){
      //remove item from favorites
  }
};

View.js - то, где мы фактически обновляем наше представление (непосредственно управляя DOM). Методы просмотра могут вызываться соответствующим контроллером и/или моделью. Например mainView.js:

app.mainView = {
   show: function (items){
       //create new element for each item
   }

};

И, наконец, у нас app.js файл app.js где мы инициализируем наше приложение:

var app = {
  init: function(){
      this.mainCtrl.init();
      this.menuCtrl.init();
      this.navbarCtrl.init();
      this.mainModel.init();
      this.navbarView.init();
  }  
};

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

И наконец, наконец, порядок импорта. app.js вы должны импортировать app.js поскольку он определяет переменную app.

    <script src="vendor/js/jquery.min.js"/></script>
    <script src="js/app.js"/></script>
    <script src="js/controller/mainCtrl.js"></script>
    <script src="js/controller/menuCtrl.js"></script>
    <script src="js/controller/navbarCtrl.js"></script>
    <script src="js/view/mainView.js"></script>
    <script src="js/view/menuView.js"></script>
    <script src="js/view/navbarView.js"></script>
    <script src="js/model/mainModel.js"></script>

    <script>
        $(function(){
            app.init();
        });

    </script>    
   </body>
</html>