慎用 script 节点的 src 属性来传递参数

在有些使用 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 属性来传递参数 :)