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也是如此。包含拖放，排序，右键菜单等事件。

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文件只是misc。不属于其他地方的函数/任务，例如$.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＆amp;与我交互的M $ SQL数据库，使用API构建后端开发。

非常感谢。

Answer 1

我看到你有一些合理的结构。但我建议创建更多解耦和自包含的单元（例如UI组件），以防应用程序非常大。

看看： http://boilerplatejs.org

它不是一个库，而是一个框架，它将一些行业领先的库与可接受的大规模JavaScript开发模式集成在一起。可能是BoilerplateJS中的一些想法可以进一步帮助你。

Answer 2

您是否正在使用app功能进行命名空间？如果是这样，您可以将其设为对象而不是函数。然后你可以做app.modal（{title：'Hello World'}）。所以，var app = {...}

我正在构建一个大型的AJAX应用程序，我这样做了吗？

2 个答案: