javascript - 在主要 "meat"仍然是服务器端的 webapps 中组织 JS 代码的最佳方式是什么?

标签 javascript architecture

当使用 Django、Kohana、Rails 等 MVC 网络框架构建网络应用程序时,我最初将没有 JS 驱动组件的应用程序放在一起,然后将它们作为“改进”添加到 UI。

这种方法导致非侵入式 JS,但我没有一个好的“标准”方法来组织 JS 工作。我在此类应用程序中编写的大多数 JS 都是 10-30 行的 JQuery 片段,它们挂接到 UI 的某些非常特定的部分。

到目前为止,我经常将这些东西与它们管理的 UI 部分一起内联。这让我觉得很脏,我希望 JS 代码像 python/php/ruby​​ 代码一样有条理,我希望它是可测试的,我希望它是可重用的。

在这样的设置中组织 JS 代码的最佳方式是什么,我们没有构建成熟的 JS 客户端应用程序,主要内容仍然是服务器端?

最佳答案

我也很想知道其他人对此有何评论。我采用的方法是使用对象文字表示法来存储大部分函数,​​并将它们存储在一个包含在所有页面(库)中的文件中

uiHelper = {
    inputDefault:function(defaulttext){
    // function to swap default text into input elements
    },
    loadSubSection:function(url){
    // loads new page using ajax instead of refreshing page
    },
    makeSortable:function(){
    // apply jQuery UI sortable properties to list and remove non javascript controls
    }
}

然后我在任何需要使用库的页面上包含一个 .js 文件,该库将该页面上的元素与库中的函数联系起来。我已尝试使每个函数尽可能可重用,有时页面上的事件绑定(bind)函数会调用我的几个库函数。

$(document).ready(function(){
    $('#mybutton').live('click',uiHelper.loadSubSection);

    //more complicated helper
    $('#myotherbutton').live('click',function(){
        uiHelper.doThisThing;
        uiHelper.andThisThing;
    });
});

编辑:使用 jsDoc http://jsdoc.sourceforge.net/注释这些函数的符号可以为“库”生成文档,并有助于使您的代码易于阅读(按注释拆分函数)。

以下问题与您自己的问题类似 - 您应该检查一下...

Commonly accepted best practices around code organization in JavaScript

关于javascript - 在主要 "meat"仍然是服务器端的 webapps 中组织 JS 代码的最佳方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4080851/

相关文章:

javascript - 我们可以从 React 写入文件吗?

javascript - 在 Firefox 中检测到 "image corrupt or truncated"

javascript - 显示空行 jQuery dataTables

C++ 模块架构,模块循环依赖

c# - 什么时候领域驱动设计就足够了?

javascript - React + flux : can action return a value?(例如最后创建的 id)

javascript - AngularJS/Json没有ng-repeat,如何显示数据?

javascript - 回显模式窗体上特定按钮的值

web-applications - 您如何构建像 Firebase 这样的应用程序?

architecture - 将用于微服务的 SignalR 与 API 网关集成