慎用 script 节点的 src 属性来传递参数
作者：xujiwei 来源：Architecting Life 发布时间：2009-11-18 12:59:00
在有些使用 javascript 来渲染数据的时候，为了能动态获取不同的数据，并且保持 javascript 代码的可扩展性，会将 javascript 代码中获取数据的部分需要的参数提取出来，做为参数放在 script 节点的外部。
一般来说，传递参数到 javascript 文件内部的方法有两种，一种是将参数写在一个 script 节点中，写成全局变量的方式的传递给紧接着这个 script 节点的外部 javascript 中，Google Analytics 就是使用这样的方式：
<script type="text/javascript">
var p1 = "v1", p2 = "v2";
</script>
<script type="text/javascript" src="foo.js"></script>
另外一种是将参数直接写在 script 节点的 src 属性中，相当于一个页面的查询字符串一样：
<script type="text/javascript" src="foo.js?p1=v1&p2=v2"></script>
不过，使用 script 节点的 src 属性来传递参数需要注意一个很重要的问题，那就是动态变化的 src 属性会导致缓存失效。
现在，为了网站性能的需要，一般都会将 javascript 文件放在独立的服务器上，并设置一个较长的过期时间，这样客户端只会在第一次访问网站时需要去下载这个 javascript 文件。但是，如果使用 src 来传递参数，就可能会使这种缓存策略失效。特别是 src 中存在动态参数的情况，例如统计脚本中如果有一个 ip 参数，那么访客每次连上线时，可能 ip 都会不同，就会导致 javascript 缓存失效了。
解决这个问题的方法也很简单，简单地的将 src 属性中的参数放到 script 节点的一个自定义属性中就可以了，例如 data-args，而 src 属性只需要保留一个时间戳就可以了。因为使用 src 属性来传递参数本来就需要定位 script 节点，所以改由 data-args 自定义属性来传递参数并不会增加额外的代码。只不过页面会通不过 w3c 的验证罢了 :)
<script type="text/javascript" src="foo.js" data-args="p1=v1&p2=v2"></script>
再次提醒，慎用 script 节点的 src 属性来传递参数 :)
0
投稿猜你喜欢
- 1、构建合理的HTTP请求标头。HTTP的请求头是一组属性和配置信息，当您发送一个请求到网络服务器时。因为浏览器和Python爬虫发送的请求
简介对与控件QPushButton中的可以使用setStyleSheet设置它背景图片。具体设置背景图片的方法有两种self.button.- MySQL Index索引是一种数据结构，可以是B-tree、R-tree、或者hash结构。其中，B-tree适用于查找某范围内的数据，可
- 这篇文章主要介绍了Python监控服务器实用工具psutil使用解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习
- 看代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional
- 本文实例讲述了PHP判断是否微信访问的方法。分享给大家供大家参考，具体如下：在开发中有时需要禁止或者仅允许微信浏览器进行访问，则此时就需要对
- 在处理批量更新某些数据的时候，如果跟你更新的字段的值都一样，比如某个状态都更新为某个固定值,直接用update table set xxx=
- 本文介绍了详解vue 模版组件的三种用法，分享给大家，具体如下：第一种//首先，别忘了引入vue.js<div id="us
- 单神经元引论对于如花，大美，小明三个因素是如何影响小强这个因素的。这里用到的是多元的线性回归，比较基础from numpy import a
- 前言许多任务程序如果为其构造为一个命令行界面，就可以通过接受不同的参数来改变它的工作方式。例如，在爬虫程序中，不同 URL&nbs
- 一、存在问题在v-model想绑定表达式 || 函数方法，发现控制台报错了，不允许这波操作。下面我们分析存在该问题的原因和解决方法。实战经验
- 前言最近在搜寻资料时，发现了一则10年前的新闻：二维码将成线上线下关键入口。从今天的移动互联网来看，支付收款码/健康码等等与我们息息相关，二
- 前言接口在软件工程扮演重要角色，随着应用程序的功能不断扩展，代码库的更新和改变也难以管理。在许多情况下，会发现有一些看起来非常相似，但却不相
- 用python读取视频有两种主要方法，大家可依据自己的需求进行使用。方法一：使用imageio库，没有安装的可用pip安装或自己下载，安装好
- 放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 JavaScr
- 前言本文使用 cpu 的 tensorflow 2.4 完成迁移学习和模型微调，并使用训练好的模型完成猫狗图片分类任务。预训练模型在 NLP
- 目录一、目标二、环境准备1、基本信息2、数据库环境准备3、建库 & 导入分表三、配置&实践1、pom文件 &nbs
- 一、推荐方法 CURL获取<?php$c = curl_init();$url = 'www.jb51.net';cu
- 前言VScode是一个相当优秀的IDE，具备开源、跨平台、模块化、插件丰富、启动时间快、颜值高、可高度定制等等优秀的特质，不愧是微软爸爸的私
- 以前跟同事开玩笑时说过，我们遇到的用户在访谈测试过程中的表现基本上就三种类型，发泄型，赞美型和实话实说型。发泄型用户通常是在产品的使用过程中
