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

时间:2013-03-19 08:43:22

标签: javascript server-side

我在管理自己编写的JS代码时遇到以下问题(而不是像jquery这样的js库):

仅将javascript与html关联或将其与服务器端代码相关联是否更好?意味着从服务器端代码返回JS代码或创建单独的JS文件并从html代码或事件中将其引用到html页面中是否更好?

这里我想提一个例子:

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

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

这里我的困惑是,如果我将创建2个单独的文件,最好维护JS代码,因为它是独立的,但是对于性能和页面加载,浏览器需要加载只有一行的额外js文件声明,另一方面,如果我想使用服务器端代码生成JS代码,那么维护JS代码将很难,但就性能而言,我认为它更好。

那么您的建议是考虑到可维护性和性能吗?

1 个答案:

答案 0 :(得分:0)

通常,您将所有javascript写入服务器端的不同文件,并在进行开发时将它们从页面链接起来,然后使用类似uglifyjs的内容将它们全部压缩成一个您链接的文件您的生产环境的html文件。

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

为什么你不只是让你的服务器端PHP / Python / Java /将代码直接写入html是因为这会阻止浏览器缓存它。浏览器必须在网站的每个页面上下载该代码。如果它只在一个外部javascript文件中设置cache-control headers,那就更好了。

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