Web前端之路前端杂货铺程序员

关于document.scripts

2017-02-15  本文已影响87人  _palm

laydate.js日期插件源码中,有一段代码会自动创建标签然后引入自身使用css文件,有一个获取laydate.js文件路径函数:

//获取组件存放路径
Dates.getPath = (function(){
    var js = document.scripts, jsPath = js[js.length - 1].src;
    return config.path ? config.path : jsPath.substring(0, jsPath.lastIndexOf("/") + 1);
}());

我第一次见到document.scripts, 然后查询得知,这会返回全部script的HTMLCollection
对象,这个对象类似数组,但是并不是真正的数组.

看到js[js.length - 1].src 这行代码,我立马就想给这个插件提一个bug, 假如,最后一个<script>标签的src值不对或空,那需要的css文件不就加载失败了吗?

带着疑惑我进行了一些列的测试, 比如,我在最后又引入了别的js文件,例如 jquery:

<script type="text/javascript" src="../jquery/jquery-1.11.0.min.js"></script>

但是取到的依然是<script type="text/javascript" src="../laydate.js"></script>
我很疑惑, 各种找资料,然后又把laydate.js位置移动到不同的地方, 最后发现总能取到laydate.js引入之前的所有<script>标签,于是我大概明白了:
这些代码执行都是阻塞的, 例如,在a.js中调用 document.scripts ,则只能获取到<script type="text/javascript" src="../a.js"></script>之前的<script>标签,后面的内容是无法获取到.

这个问题总算是想明白了, 于是js[js.length - 1]总是能获取到document.scripts调用所在的js 文件.

参考资料: Document.scripts

上一篇下一篇

猜你喜欢

热点阅读