Question

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

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

到目前为止，我经常最终将这些内容与他们管理的UI部分结合在一起。这让我觉得很脏，我想把JS代码保存为python / php / ruby代码，我希望它是可测试的，我希望它可以重用。

在这样的设置中组织JS代码的最佳方法是什么，我们没有构建一个完整的JS客户端应用程序，而主要部分仍然是服务器端？

Answer 1

我也对其他人对此有何看法非常感兴趣。我采用的方法是使用对象文字符号来存储大部分函数，并将它们存储在所有页面（库）中包含的一个文件中

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文件，该库将该页面上的元素与库中的函数联系起来。我试图让每个函数尽可能重用，有时页面上的事件绑定函数会调用我的几个库函数。

$(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

Answer 2

在处理JS代码时，您应首先分析在页面加载时是否立即使用它。如果它没有立即使用（意味着用户必须做一些事情来调用它），你应该将它打包成一个JS文件并稍后包含它，这样用户就可以更快地感知加载时间。这意味着用户将看到的任何内容都应该首先出现，并且应该在文件末尾附近导入与该功能相关的JS。下载此工具以分析您的网站：http://getfirebug.com/ 如果JS代码足够小，它应该与HTML内联。希望有所帮助。

Answer 3

对于快速的小用户界面这样的事情，我将所有内容放入我在每个页面上包含的单个javascript文件中。然后在javascript文件中，我检查页面上存在的内容并相应地运行代码。我可能在UIMagic.js中有这个例子。我有jQuery，如果你不熟悉那些jQuery-isms的借口。

function setupMenuHover() {
  if ($("li.menu").length) { // The page has a menu
    $("li.menu").hover(function() { ... }, function() { ... });
  }
}
$(setupMenuHover);

function setupFacebookWizbang() {
  if (typeof FB != "undefined") { // The page has Facebook's Javascript API
    ...
  }
}
$(setupFacebookWizbang);

我发现这是一个足够理智的方法。

Answer 4

我首选的方法是在其自己的文件中存储内联javascript（以便我可以使用语法高亮等方式轻松编辑它），然后通过直接加载内容将其包含在页面中：

'<script type="text/javascript">'+open('~/js/page-inline.js').read()+'</script>'

但这可能效果不佳，除非您的模板库可以缓存此类内容。

使用Django，您可能只需include js文件：

<script type="text/javascript">
    {% include "js/page-inline.js" %}
</script>

不确定是否缓存输出。

如果您仍然担心“脏”，那么您可以查看以下项目，这些项目试图弥合服务器/客户端语言不匹配：

http://pyjs.org/（Python生成JavaScript）

http://code.google.com/webtoolkit/（Java生成JavaScript）

http://nodejs.org/（一直是JavaScript！）

在主要“肉”仍然是服务器端的webapps中组织JS代码的最佳方法是什么？

4 个答案: