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

Posted 2023-03-08

【中文标题】在主要“肉”仍然是服务器端的 webapps 中组织 JS 代码的最佳方法是啥？

【英文标题】：What is the best way to organize JS code in webapps where the main "meat" is still server side?在主要“肉”仍然是服务器端的 webapps 中组织 JS 代码的最佳方法是什么？

【发布时间】：2011-05-04 02:39:08

【问题描述】：

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

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

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

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

【参考方案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/ 表示法对这些函数进行注释可以为“库”生成文档，并有助于使您的代码易于阅读（函数由 cmets 拆分）。

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

Commonly accepted best practices around code organization in JavaScript

【讨论】：

我认为这是一个正确的方向，将一个通用的 UI 方法库放在一起。就像你说的那样，这为拥有适当的文件结构打开了大门，这反过来又允许使用文档、测试、缩小等进行自动构建。它仍然需要使用模板内联内容。也许只是将一个 js 文件直接包含在执行事件绑定的模板（类似于 mytemplate.html 和 mytemplate.html.js）中......

在我当前的应用程序中，我的控制器知道它的 url（例如 'users/edit/'）并检查文件系统上是否存在合作伙伴 .js 文件。如果是这样，它会将这些信息传递给模板，模板会自动使用 url 作为加载 js 文件的约定来包含它。在这种情况下，它会知道加载 /js/pages/users/edit.js。我在运行时使用code.google.com/p/minify

缩小/连接和缓存

我正在考虑为我的 Django 应用程序做一些类似的事情。我想要一个自动化系统来连接 js 文件和模板。似乎缺少从模板中访问实际模板名称的低级支持，因此这变得很困难。我写了一个小模板标签添加到模板的底部手动包含 js 并将其包装在适当的样板中..

【参考方案2】：

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

【参考方案3】：

对于像这样的快速小用户界面，我将所有内容都放入一个单独的 javascript 文件中，该文件包含在每个页面上。然后在 javascript 文件中检查页面上存在的内容并相应地运行代码。例如，我可能在UIMagic.js 中有这个。我有 jQuery，如果你不熟悉这些 jQuery 主义，请原谅。

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);

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

【参考方案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！）