0

我只想问在大型 Java 企业应用程序上编写 javascript 文件的准则是什么。基本上我们现在要做的就是复制JSP的文件夹结构，每个JSP都有一个对应的js文件。如下所示：

war
|- js
    |- jquery.js
    |- jquery.ui.js
    |- datatables.js
    |- other-lib.js
    |- pages
        |- login.js
        |- dashboard.js
        |- userAdmin.js

我们正在使用Sitemesh，这就是为什么在主装饰器 JSP 上，所有库都在<script>标签上导入。因此，在主装饰器 JSP 上，您可以看到如下内容：

<head>
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/datatables.js"></script>
   <script type="text/javascript" src="js/xform.js"></script>
   <script type="text/javascript" src="js/generic.js"></script>
</head>

正如我所说，“js/pages”文件夹下的 js 文件是在其特定的 JSP 文件中导入的。

现在，我刚刚阅读了Addy Osmani 关于 JS 模式的文章，并开始使用显示模块模式。但是，我还是有点迷茫。我遇到了这个 RequireJS 框架/工具。但我不知道如何开始检修 java 应用程序的 js 文件。

$(document).ready(function(){})如果我开始使用模块模式，我应该放在哪里？

我应该让每个 JSP 页面成为一个模块吗？还是我应该将其分解为行为并根据概念的可用性/行为创建模块？

不知道还能问什么，脑子里想的太多了，因为我是java开发者，一般都是写后端的，但是现在，因为我的团队没有前端工程师，所以我要学这个新东西。请耐心等待，因为我对 javascript 和 jQuery 的了解有限。

4

2 回答 2

1

如果您希望在每个 JSP 页面中开发复杂的 JS 功能，请考虑将更多的精力放在将功能构建到模块和 UI 组件中。正如 bokonic 所说，AMD 库可以帮助您为代码库建立良好的结构。

如果您需要查看构建大型 JavaScript 应用程序的参考架构，请查看 BoilerplateJS ( http://boilerplatejs.org )。它不是一个实用程序库，而是将一些领先的实用程序库集成到一个参考架构中，可以用作复杂 JS 项目的起点。

即使您不想按原样使用它，也请查看主页上正在讨论的问题。您将能够了解大型 JS 项目的必要架构方法，例如：

  • 你应该如何组织代码结构
  • 如何创建功能模块的层次结构
  • 如何使 UI 组件自包含
  • 如何进行路由、书签、历史处理
  • 如何管理 JS 脚本和依赖项
  • 如何优化、混淆部署
  • 如何使您的组件可单元测试
  • 如何处理样式、本地化方面

我是 BoilerplateJS 的主要作者，在完成了几个复杂的 JS 项目之后，我写了它来分享我的经验。

于 2012-08-28T07:31:29.433 回答
0

使用异步模块（AMD，如 require.js）可以让你的 js 看起来更像 java，因为你可以有明确定义的命名空间，你可以在彼此之间“导入”（require）。您将拥有相当于实例化一些顶级对象的主线（您的主 js）。

在 JSP 或 PHP 中，您通常会通过将<script>标签回显到页面上来将一系列脚本添加到 HTML 文档中。使用require.js，您必须生成为该应用程序定制的javascript——即您的main.js 可能会有所不同，或者您需要一个内联脚本。

这使得 require.js 非常适合单页 Web 应用程序，其中您有大量的 javascript 和很少的模板服务器端预处理。

似乎 js 社区中的人们（如果有一致的话）喜欢将显示模块模式作为封装代码的一种方式。这基本上是绕过 javascript 范围混乱的唯一好方法。除此之外，您还可以：

  • 将通用代码（模态、特定于站点的验证、REST api 调用等）分解到可以包含在每个页面中的模块中，并要求用户缓存更长的时间
  • 编写涵盖各个功能的小模块。这样，您可以根据需要将它们换出或包含在不同的页面上。
  • 考虑使用像grunt这样的 js 构建工具，它将连接和缩小你的 javascript。道场也有一个不错的。

在显示模块模式中，您不必担心它，除非您有一个需要 jQuery 的 IIFE（一个自执行函数）。只需确保将模块函数调用包装在 jQuery 闭包中即可。

$(function(){
     (function($){ $('body').append('<div />'); })(jQuery); // this needs the DOM & jQuery
});
(function(){
     my_module = my_module || {};
     my_module.nonjQueryFunc = function(){};
     my_module.myjQueryFunc = function(el){
         $(el).text("I need a ready DOM");
     };
});

在另一个 .js 文件中：

$(function(){
    my_module.myjQueryFunc(); // this needs the DOM to be ready & jQuery to exist
});

my_module.nonjQueryFunc();
于 2012-08-28T05:54:08.467 回答