私はこの大規模なアプリケーションを構築し始めましたが、私はそれを正しくやっていることを確認したいと思います。一言で言えば、議会のアジェンダアプリだ。 /css
、/images
、/js
、/templates
、そしてもちろん、index.htmlファイル:彼らは私のディレクトリ構造がある大規模なAJAXアプリケーションを構築していますが、これは正しいのですか?
/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
にはUIを表示するためのものがあります。たとえば、カスタムスクロールバー、アクションメニュー(ファイル、編集などのメニュー)、リサイズ時のUIの再レンダリングなど。
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
は内部API(CFで構築されています)を扱いやすくするためのラッパーです。ユーザーフレンドリーなAPIではないので、私は自分の正気や未来の開発者のために、もっとシンプルにする方が簡単だと考えました。 api().post('agenda');
またはapi().remove('agenda',124);
のような機能があります。最後のディレクトリ/templates
には、modal.html
というような.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>
私は正しい経路にいますか?それは私の最後に完全にフロントエンドのアプリです。私はちょうど私が、バックエンドの開発者が作成したAPIと対話するCF & M $ SQL DBを持っています。
フィードバックは非常に高く評価されました。
ありがとうございました。私は良いアイデアかもしれない任意のパラメータを必要としないので。 –
Awh、でも今は覚えています。私はそのように私は内部関数とvarsを '_settings'のように持つことができます。どのようにして 'app.js'を書き直しても、それでも問題は解決しますか? –