web应用的Javascript/jQuery最佳实践:集中化vs.规范

Javascript/jQuery best practice for web app: centralization vs. specification

本文关键字：集中化 vs 规范 最佳 应用 Javascript jQuery web      更新时间：2023-09-26

想象一个web应用程序有几十个页面组(pg1, pg2，…)，其中一些页面组需要一些特定于它们的JavaScript代码，而不是整个应用程序。例如，对window.resize()的一些视觉修复可能只在pg2中相关，而在其他地方不相关。

以下是一些可能的解决方案:

1/Centralized:为整个应用程序提供一个脚本文件，处理所有页面组。要知道是否存在相关的DOM对象是很容易的，因此所有不相关的页面只需额外执行一个小小的if()。最大的优点是，整个web应用程序的所有JS都是一次加载，不需要修改HTML代码。缺点是在不相关的页面上添加了额外的检查。

2/Mixed:集中式脚本检查页面上是否存在特定函数，如果存在则启动该函数。例如，我们可以添加

if (typeof page_specific_resize === 'function') page_specific_resize();

本例中的特定页面组将有:

<script>
function page_specific_resize() {
    //....
}
</script>

的优点是代码只存在于相关的页面，因此不需要在每个页面上进行测试。缺点是整个页面组中HTML结果的额外大小。如果有超过几行代码，页面组可能能够加载特定于它的额外脚本，但然后我们在那里添加一个http调用，可能会在集中式脚本中节省几公斤。

哪个是最佳实践?请评论这些解决方案或提出您自己的解决方案。添加一些资源来支持您对更好的要求(考虑性能和易于维护)将是非常好的。将选择最详细的答案。谢谢。

考虑最佳解决方案有点困难，因为这是一个假设的场景，我们没有数据来处理:加载最多的页面是什么，有多少，总脚本大小，等等。

也就是说，我没有找到具体的答案，最佳实践TM，但人们同意的一般观点。

1)缓存:

根据这个:

https://developer.yahoo.com/performance/rules.html

"在现实世界中使用外部文件通常会更快因为JavaScript和CSS文件是由浏览器缓存的"

2)缩小

仍然根据雅虎链接:

"[minification]提高了响应时间性能，因为下载文件的大小减少了"

3) HTTP请求

最好减少HTTP调用(基于社区答案)。

一个大的javascript文件或多个较小的文件?

优化javascript加载的最佳实践

4)你需要那个特定的脚本吗?

根据:https://github.com/stevekwan/best-practices/blob/master/javascript/best-practices.md

"JavaScript应该被用来用额外的功能装饰你的网站，而不是你的网站运行所必需的。"


这取决于你要加载的资源。这取决于加载特定页面组的频率，或者您期望它被请求的频率。web应用程序是单页的吗?每个特定的脚本做什么?

如果脚本加载表单，则用户不需要多次访问该页面。无论如何，用户以后都需要互联网连接来发布数据。

但是如果这是一个调整页面大小的脚本，并且用户有一些连接问题(例如:在乘坐地铁时在手机上访问您的web应用程序)，那么最好已经加载了代码，以便用户可以自由导航。根据我之前发布的Github链接:

"一直被触发的事件(例如，调整大小/滚动)"

是一个应该优化的东西，因为它关系到性能。

将一个JS文件中的所有代码最小化，以便尽早缓存，这样可以减少请求的数量。此外，建立连接可能需要几秒钟，但处理一堆"if"语句需要几毫秒。

然而，如果你有一个很重的JS文件，只有一个功能，而不是你的应用程序的核心(比如，这一个文件的大小几乎是其他脚本总和的n%)，那么就没有必要让用户等待特定的功能。

"如果你的页面有大量的媒体，我们建议研究JavaScript技术，只在需要的时候加载媒体资源。"

这是JS的圣杯，希望ECMA6/7中的模块能够解决!

客户端上有模块加载器，如JSPM，现在node.js中有热插拔JS代码编译器，可以通过webpack在客户端上使用块。

去年我成功地创建了一个简单的应用程序，它只在运行时加载所需的代码块/文件:

这是一个简单的测试项目，我在github上称之为prator .js: github.com/magnumjs/praetor.js

h-pages-code分支可以告诉你它是如何工作的:https://github.com/magnumjs/praetor.js/tree/gh-pages-code

在main,js文件中，你可以看到webpackJsonp是如何编译完成的:

JS: 

 module.exports = {
    getPage: function (name, callback) {
        // no better way to do this with webpack for chunk files ?
        if (name.indexOf("demo") !== -1) {
            require(["./modules/demo/app.js"], function (require) {
                callback(name, require("./modules/demo/app.js"));
            });
        }
 .....

查看它的工作现场，去http://magnumjs.github.io/praetor.js/和打开网络面板，并查看正在加载的块在运行时，通过左侧的选择菜单导航。

希望有帮助!

通常情况下HTTP请求越少越好，但这取决于你的web应用。

我通常使用需求在每个文件中包含我需要的正确模型和视图。

虽然在开发中它节省了我大量的调试时间(因为我知道哪些文件存在)，但在生产中考虑到请求的数量，这可能是有问题的。

所以我使用r.js，这是专门为需求而设计的，在部署时编译我的JS文件。

希望能有所帮助

相关文章：