在动态网站中安排JS代码的最佳实践

Best practice in arranging JS code within dynamic websites

本文关键字：代码最佳 JS 动态网站更新时间：2023-09-26

在管理我们自己编写的JS代码(不是像jquery这样的JS库)时，我有以下关注:

是将javascript与html联系起来更好还是将其与服务器端代码联系起来更好?意味着它是更好地从服务器端代码返回JS代码或创建单独的JS文件，并从html代码或事件中引用它写在html页面内?

这里我想举一个例子:

假设我有两个服务器端页面，注册和登录，并说我们正在使用jquery验证插件(在html中使用script标签引用)，我们将使用它来验证注册和登录表单，在这种情况下，我们需要为登录页面和注册页面编写验证JS语句$('.login_form').validate();和验证JS语句$('.register_form').validate();。

所以我需要创建2个js文件(login.js, register.js)并在其js文件中添加每个语句，或者在HTML页面本身内编写代码，或者从每个页面返回js代码服务器端代码?

这里我的困惑是，如果我将创建2个单独的文件，它会更好地维护JS代码，因为它是分开的，但对于性能和页面加载浏览器需要加载额外的JS文件，只有一行语句，另一方面，如果我想使用服务器端代码生成JS代码，那么维护JS代码将是困难的，但对于性能明智我猜它更好。

考虑到可维护性和性能，你的建议是什么?

通常，您会将所有javascript写入服务器端的不同文件中，并在进行开发时从页面链接它们，但随后使用像uglifyjs这样的东西将它们压缩成一个文件，从您的html文件链接到您的生产环境。

这允许您在多个文件中进行开发，并保持代码的良好结构，但只让浏览器下载一个文件，并在您的生产环境中只发出一个http请求。

你不让你的服务器端PHP/Python/Java/其他什么直接把代码写进html的原因是，这样可以防止浏览器缓存它。浏览器必须在网站的每个页面上下载这些代码。这是更好的，如果它都在一个外部javascript文件，有缓存控制头集。

这样浏览器只会下载你的脚本一次，并且只在用户在你的网站上看到的第一页，然后在每次加载其他页面时从缓存中加载它。