关于document.scripts

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,838评论 1 32
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 7,462评论 0 25
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,672评论 1 41
  • 不知道该怎么做,可能一直做的都是错的,我犯了所有人都会犯的错。 不知道该思念与否,但总想留下这一片世界,给那个人。...
    莞尔听风阅读 1,807评论 1 4
  • 在一个产品的前期规划过程中,决策相关者往往面临着一个巨大的陷阱,就是对输出的关注要超过对结果的重视——也就是说,人...
    三达不留点gpj阅读 5,823评论 0 12