如何实现企业级JavaScript“；“框架”；对于网页设计师？

我的任务是改善当前的混乱局面，这是我们的JavaScript“策略”；我们是一家网上购物公司，我的老板给了我时间让我好好做这件事。他非常热衷于保持这种模块化并提高组件的可重用性

我们的HTML是用JSP呈现的，我们有很多自定义标记，例如，关于产品的信息，而web设计师不需要担心

现在，我们想用JavaScript做类似的事情。web设计师应该得到一组自定义标记，比如

<foo:draggable> 
 ... some HTML here ...
</foo:draggable>

... 这里有一些HTML。。。

这将把HTML包装在一个

中，顶部有一个拖拽条和一个关闭按钮

我的想法是用一个唯一的CSS类名来标记div，比如

foo\u draggable

，然后将我的所有函数放在一个JS文件中。然后，该JS文件查看DOM中是否有CSS类为

foo_draggable

的元素，如果找到任何元素，它将附加所需的事件处理程序

然而，我担心伸缩性问题，并想知道在不经常使用选择器查询时运行它们是否是一个好主意

第一种选择是显式地启动每个可拖动项，但这意味着将

标记放得到处都是。第二种方法是不将所有UI功能放在一个文件中，而只是下载我需要的功能，但这意味着更多的HTTP请求和较慢的页面加载速度

---

有人有过这方面的经验吗？

有两个类名怎么样

<div class='foo fooDragable'></div>
<div class='foo fooSortable'></div>

之后，您可以在这个数组中搜索，这个数组应该比完整的dom小得多

var $dragAble = $foo.filter('.fooDragable');

---

你有没有考虑或看一看？我知道如果您还没有使用JSF，这将是一个重大的改变。但是有很多现成的JSF组件库带有ajaxical沙司，例如，等等。自己为它创建组件/标记几乎是浪费时间

---

或者，您可以替换所有Java脚本来使用伟大的JS框架。

根据您有多少独立的组件，运行选择器的额外开销可能不是什么大问题。加载页面时，您可以一次性初始化所有组件。页面上不存在的任何内容都不会被初始化，也不会产生更多的开销。在大多数JavaScript框架中，按类名（或标记名）选择非常快。只有浏览器本身不支持的复杂选择器速度较慢

如果您有一些常用的组件，然后是一组不太常用的组件，那么将它们拆分可能是值得的。将常用组件保存在一个JavaScript文件中（缩小，提供压缩和主动缓存），并将其加载到每个页面中，无论是否需要。缓存将确保只下载一次，并且只需要一个小的HTTP请求。对于不太常见的组件，请将它们保存在单独的文件中（理想情况下，每个组件一个），并在使用它们的页面上添加脚本标记

---

我并不完全熟悉JSP的工作原理，但它可能会自动执行此操作-如果文档中包含标记，请在文档标题中为foo_widget.js添加脚本标记，或者类似的内容。

请，Javascript！=jQuery。非常聪明的解决方案。可惜我自己没有想到。jQuery>Javascript，jQuery就是Javascript应该是的样子。我想说，jQuery就是DOM/浏览器环境应该是的样子。它根本不会改变语言，只会改变你与浏览器的交互方式。我可能只是学究，但我做了很多JavaScript编程，根本没有连接到web浏览器，所以jQuery在那里什么都不做。我们评估了JSF，但最终决定，在服务器上保留一整船的支持bean和UI树是不值得的。我自己从来没有使用过JSF，所以不能说这是否是正确的决定。

var $dragAble = $foo.filter('.fooDragable');