Я строю приложение AJAX большого масштаба, я делаю это правильно?

Question

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

Моя структура каталогов: /css, /images, /js, /templates, и, конечно же, файл index.html.

/css содержит любой плагин jQuery CSS, resets.css и main.css.

/js содержит: app.js, ui.js, functions.js, keyboard-shortcuts.js, mouse-events.js, api-wrapper.js и любые плагины и JQuery.

keyboard-shortcuts.js содержит кучу, ну, сочетания клавиш, такие как копирование, вставка, навигация по приложениям и т. Д. Это то же самое для mouse-events.js. Содержит такие события, как drag & drop, sorting, right click menus и т. Д.

ui.js есть материал для визуализации интерфейса. Например, пользовательские полосы прокрутки, меню действий (меню «Файл», «Правка» и т. Д.) И повторная визуализация пользовательского интерфейса при изменении размера и т. Д.

app.js это говядина. У этого есть мой персональный API для взаимодействия с приложением. Код до сих пор:

var app = function(){ 
    var _settings = { 
    templatePath: 'templates/' 
    } 
    var api = { 
    /** 
    * resetUI Re-renders the UI. Use in resizing, click, and load events for example. 
    * @returns {object} It re-renders the UI and returns the app() object for chaining 
    */ 
    resetUI: function(){ 
     $('#sidebar,#editor,#preview').css({height:$(window).height()-$('header').outerHeight()-$('footer').outerHeight()+'px'}); 
     $('#preview').jScrollPane(); 
     return this; 
    }, 
    /** 
    * actionMenu opens and closes the action menu at the top of the UI 
    * @param action {string} Can be "open" or "close" and does what it sounds like. If "open" see "item" param 
    * @param item {object} Is only needed for the "open" action. It gives a reference of what item is clicked on 
    * @returns {object} Returns the app() object for chaining. 
    */ 
    actionMenu: function(action,item){ 
     if(action == 'open'){ 
     $('body').bind('click.contextMenus',function() { app().actionMenu('close') }); 
     $(item).addClass('active').find('ol').css({display:'block',top:$(item).outerHeight()+'px'}); 
     } 
     else if(action == 'close'){ 
     $('#menu .active').removeClass('active'); 
     $('#menu > ol > li ol').css({display:'none'}); 
     $('body').unbind('click.contextMenus'); 
     } 
     return this; 
    }, 
    /** 
    * modal() simply takes care of the modals. Lots of params also make it easy. 
    */ 
    modal: function(options){ 
     var defaults = { 
     title: 'Message', 
     content:'', 
     animationSpeed:150, 
     beforeLoad:function(){}, 
     onLoad:function(){}, 
     afterLoad:function(){}, 
     beforeClose:function(){}, 
     onClose:function(){}, 
     afterClose:function(){} 
     } 
     var settings = $.extend({},defaults,options); 
     var modalWrapper = $('#modal-wrapper'); 
     if(typeof options == 'string'){ 
     if(options == 'close'){ 
      $('#modal-buttons [href*=close]').unbind('click.modalClose'); 
      settings.beforeClose.call(this,modalWrapper) 
      modalWrapper.fadeOut(animationSpeed); 
     } 
     } 
     else{ 
     settings.beforeLoad(); 
     $.get(_settings.templatePath+'modal.html',function(html){ 
      var newHTML = $.template(html,{"title":settings.title,"content":settings.content}); 
      $('body').prepend(newHTML).find('#modal-wrapper').css({ 
      left:($(window).width()/2-modalWrapper.outerWidth()/2)+'px', 
      top:($(window).height()/2-modalWrapper.outerHeight()/2)+'px' 
      }).fadeIn(settings.animationSpeed,function(){ 
      settings.afterLoad.call(this,modalWrapper); 
      }); 
      settings.onLoad.call(this,modalWrapper); 

      $('#modal-buttons [href*=close]').bind('click.modalClose',function(){app().modal('close')}); 

     }); 
     } 
    } 
    } 
    return api; 
} 

Таким образом, вы можете использовать его как app().modal({title:'Hello World'}) или app().actionMenu('open',this).resetUI(). Etc и более, поскольку приложение построено.

Файл functions.js является просто разным. функции/задачи, которые не попадают в другие места, такие как $.template(), который анализирует мои шаблоны (см. следующий параграф).

Последнее, что касается /js, api-wrapper.js - это обертка для упрощения работы с внутренним API (который построен с CF). Это не самый удобный API, поэтому я решил, что для моего собственного здравомыслия и будущих разработчиков было бы проще сделать его более простым. Вы получаете функциональность как api().post('agenda'); или api().remove('agenda',124);

Кроме того, последний каталог, /templates содержит .html шаблоны таких modal.html. Используется для HTML, который берется в кусках, которые будут иметь только часть кода, измененного. Например, modal.html выглядит как (до сих пор):

<div id="modal-wrapper"> 
    <div id="modal-buttons"><a href="#close">(X)</a></div> 
    <h1>{{title}}</h1> 
    <div id="modal-content"> 
    {{content}} 
    </div> 
    <div class="modal-controls"></div> 
</div> 
<div id="modal-overlay"></div> 

Итак, я на правильном пути? Это совершенно приложение для начинающих на моем конце. Я просто имею CF & M $ SQL DB, с которым я взаимодействую, с API-интерфейсом, созданным backend.

Отзыв очень оценен.

Answer 1

Вы используете функцию приложения для пространства имен? Если это так, вы можете сделать его объектом вместо функции. Затем вы можете сделать app.modal ({title: 'Hello World'}). Итак, var app = {...}

Answer 2

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

Посмотрите: http://boilerplatejs.org

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