Я начал создавать это крупномасштабное приложение, но я хочу убедиться, что я делаю это правильно, и если нет, то что бы вы изменили, прежде чем я слишком углубился в это.Короче говоря, это приложение повестки дня совета.Они могут создавать повестки дня в Интернете с помощью приложения AJAX и публиковать, распечатывать и т. Д.
Моя структура каталогов: /css, /images, /js, /templates и, конечно, индекс.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.Содержит такие события, как перетаскивание, сортировка, щелчок правой кнопкой мыши и т. Д.
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().И т. Д. И т. Д., Поскольку приложение построено.
Файл functions.js просто отсутствует.функции / задачи, которые не попадают в другие места, такие как $.template(), который анализирует мои шаблоны (см. следующий абзац).
Наконец, для /js, api-wrapper.js - это оболочка для makeработать с внутренним 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, с которой я взаимодействую, с API, созданным внутренним разработчиком.
Обратная связь очень ценится.