设计门户容器

Question

我在一个场景下，我必须用HTML5和Javascript构建一个门户容器。此容器将提供'n‘个小部件URL，容器负责在DIVs (而不是iFrame)中通过Ajax加载它们。

现在的问题是如何将每个小部件的JavaScript函数定义分开？例如，我在容器页面上有两个DIVs，Widget1_DIV和Widget2_DIV。Widget1的HTML、JS和CSS将放在Widget1_DIV中，Widget2也是如此。

现在假设这两个小部件都有一个同名的JS函数'foo'，一旦它们嵌入到相同的DOM中，就会发生冲突。我想知道RequireJS是否有助于避免冲突，或者是使两个小部件的DIVs模块化的正确解决方案？

谢谢

Answer 1

你有没有考虑过使用JS框架？我推荐你使用AngularJS，因为它的功能，MVC方法和灵活性。我知道，这需要在项目生命周期的开始阶段做大量的工作，但后来你肯定会发现它的优点和健壮的页面结构。

另外，Angular JS允许您保留独立的项目结构：

- WidgetName
| - javascriptfile.js
| - widgetpage.html
| - javascriptfile_test.js

更多信息请访问：https://angularjs.org/

当然，你不需要使用这个特定的框架，还有很多其他很棒的工具：Knockout、Backbone等等。

Answer 2

如何使用仪表板框架来实现这一点。这应该会让事情变得更容易。例如：http://dashing.io/