大規模なAJAXアプリケーションを構築していますが、これは正しいのですか？

Question

私はこの大規模なアプリケーションを構築し始めましたが、私はそれを正しくやっていることを確認したいと思います。一言で言えば、議会のアジェンダアプリだ。 /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を持っています。

フィードバックは非常に高く評価されました。

Answer 1

名前空間にapp関数を使用していますか？そうであれば、関数ではなくオブジェクトにすることができます。次に、app.modal（{title： 'Hello World'}）を実行できます。だから、var app = {...}

Answer 2

私はあなたの場所にいくつかの賢明な構造を参照してください参照してください。しかし、アプリケーションが本当に大きなものである場合に備えて、デカップリングされた独立型ユニット（UIコンポーネントなど）を作成することをお勧めします。それはライブラリではなく、大規模なJavaScriptの開発のために受け入れられたパターンを持ついくつかの業界をリードするライブラリを統合フレームワーク http://boilerplatejs.org

：

はを見てください。 BoilerplateJSのアイデアのいくつかがあなたをさらに助けてくれるかもしれません。