3

我们有一个大型 Web 项目，我们需要可以相互通信的组件，这些组件可以放在不同项目的组件中央存储库中。使用 reuirejs 和 Backbone 进行模块化开发。浏览了可用于骨干网和 requirejs 的不同样板，但没有一个符合我的要求。所以我创建了以下目录结构。可以解释如下。

---resources
 |---custom-components
   |---mycomponent
     |---js
       |---views
       |---models
       |---collections
     |---css
     |---templates
     |---mycomponent.js
   |---mycomponent2
     |---js
       |---views
       |---models
       |---collections
     |---css
     |---templates
     |---mycomponent2.js
 |---libraries
   |---backbone
   |---underscore
   |---jquery
   |---jquery-ui
 |---jqueryplugins
   |---jcarouselite
 |---thirdpartyplugins
 |---page-js
   |---mypage.js
   |---mypage2.js
  1. resources 目录将包含所有资源。在此之下，我们将有 4 个如上所述的目录。
  2. library、jqueryplugins 和thirdpartyplugins 显然是他们所说的名称的目录。
  3. page-js 目录将包含实际的 main-js，它将在我们的 html 文件中用作 requirejs data-main 属性。
  4. 自定义组件是我们创建的所有小部件所在的位置，您可以看到它有一个与组件同名的 js 文件，这将是该小部件的入口点。该目录还包含 js、css 和模板的目录。CSS 和模板将分别由文本插件和CSS插件加载。Js 目录将包含使这个小部件工作的所有主干代码。

驻留在 page-js 中的 main-js 将询问自定义组件。

来到我需要的地方。
1. 我希望专家从大型 Web 项目的角度来审查此目录结构，您需要与其他团队共享您的小部件。欢迎提出建议。
2.我的每个自定义组件都会定义一个模块，该模块将在包结构内和包结构外具有依赖关系。我想知道，是否有任何方法可以使用 r.js 仅优化我在包结构中的自定义小部件依赖项，并让插件和库分别优化。
3. 我正在开发单页 ajax 应用程序，所以我会按需询问模块，所以我需要在不需要时清理模块和小部件，有什么方法可以清理我应该注意的吗？

4

2 回答 2

2

关于目录结构

作为一种目录结构模式，我强烈推荐使用 cakePHP 的目录结构。它真的像文字一样强大！我正在运行多个应用程序（其中一个和 Groupon 一样大），它就像一个魅力。
您可能需要对其稍作调整，因为您知道，cake 是一个 PHP 框架，而您的是一个 javascript 框架。

这是蛋糕的真棒MVC目录结构：

在此处输入图像描述

请注意，您可以在一个蛋糕安装中托管数千个应用程序。所以如果你有兴趣，你还在等什么？访问他们的网站并阅读他们的文档。

关于清理技巧

好吧，这是我不喜欢的 Javascript 的缺点之一。没有像 Java 或 C++ 那样销毁 OO 模块的真正方法。在这里，我们没有 C++ 的~析构函数之类的东西。

多年来，程序员使用module = null从未使用的代码中释放内存。

看看这些：

希望它对设计您的应用程序有所帮​​助并祝您好运；D

于 2012-06-11T19:01:31.677 回答
1

可能我回答这个问题迟了，但无论如何让我在这里分享我的观点，以防其他人发现它有用。

  1. 您的目录结构看起来不错。将业务组件自包含在特定目录中始终是一种更好的设计。我不会推荐打破 Open Close 原则的 Cake MVC 结构。还可以查看http://boilerplatejs.org推荐的目录结构，它是大规模 JavaScript 开发的参考架构。

  2. 我不太清楚这个问题。当 r.js 运行时，它将优化它在目录中找到的所有 JS 文件（可能排除），然后通过依赖树创建单个脚本。在生产中，您只需要那个脚本（如果使用 i18n 插件，还需要加上语言环境文件）

  3. 阅读下面我的博客文章。它可能会给你一些提示：http ://blog.hasith.net/2012/11/how-much-multi-page-single-page.html

于 2012-12-26T08:51:09.600 回答