Question

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

我们的HTML正在使用JSP呈现，我们有大量的自定义标签，例如，有关产品的信息，而网络设计师无需担心它。

现在，我们想用JavaScript做类似的事情。网页设计师应该获得一组自定义标签，比如说，

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

将HTML包含在<div>中，顶部有一个拖动条和一个关闭按钮。

我的想法是使用唯一的命名空间CSS类名称标记div，例如foo_draggable，然后将所有函数放在一个JS文件中。然后，该JS文件会查看DOM中是否存在具有CSS类foo_draggable的元素，如果找到任何元素，则会附加所需的事件处理程序。

但是，我担心扩展问题，并且想知道在不经常使用的情况下运行大量选择器查询是否是个好主意。

第一种选择是明确启动每个可拖动项目，但这意味着将<script>个标记放在所有地方。第二种方法是不将所有UI功能放在一个文件中，而只是下载我需要的那些，但这意味着更多的HTTP请求和更慢的页面加载速度。

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

Answer 1

有两个类名怎么样？

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

您将类'foo'添加到需要修改javascript的所有元素中。你的javascript必须只为foo检查一次dom。

var $foo = $('.foo');

之后你可以在这个数组中搜索哪个应该比完整的dom小。

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

Answer 2

您是否考虑过或JSF？我知道如果你还没有使用JSF，那将是一个重大变化。但是有很多现成的JSF组件库带有ajaxical酱，例如RichFaces，IceFaces，PrimeFaces等。创建组件几乎是浪费时间/标签为你自己。

或者，您可以替换所有Javascripts以使用 great jQuery JS框架。

Answer 3

根据您拥有的单独组件的数量，运行选择器的额外开销可能不是什么大问题。加载页面时，您可以只初始化一次所有组件。页面上没有的任何内容都不会被初始化，并且不会产生进一步的开销。在大多数JavaScript框架中，按类名（或标记名称）进行选择非常快。只有复杂的选择器（浏览器本身不支持）才很慢。

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

我并不完全熟悉JSP的工作原理，但是可以自动执行此操作 - 如果文档中包含标记，则在文档标题中为foo_widget.js添加脚本标记，或者类似的东西

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

3 个答案: