【仅供了解】简单介绍一下jquery.min.map文件

学习笔记 马富天 2016-07-01 17:24:08 91 0

【摘要】相信每一位学习过jQuery的同学们一定会发现在不同的jQuery版本中,会出现类似什么什么.map、.min.map的文件,相信大家都有印象吧,其实是jquery.min.map或者类似于jquery-1.9.1.min.map的名称,这篇文章就来给大家讲解一下jquery.min.map文件。

首先介绍一下基本概念,分为如下四点:

第一点:从 jQuery 1.9.0 版本后在原始压缩后的代码里会有,如jquery-1.9.1.min.js文件中,第二行:

@ sourceMappingURL=jquery.min.map,

不信的话你可以打开压缩后的jQuery文件看看。

第二点,给出一个词汇:Source Map,Source Map就是一个Json格式的信息文件,这个文件的里面储存着位置信息。Source map是压缩后Js对应的一个字典文件,如果你的代码有了错误,那么调试工具就会直接显示原始代码,而不是压缩后的代码。

第三点,jquery.min.map就是对应版本的jQuery文件的Source Map。也就是说从jQuery 1.9.0之后的版本都会有Source Map文件用于当jquery.min.js文件出现错误的时候,显示的是jquery.js文件,而不是jquery.min.js文件。这样做的好处是:可以快速的找到错误的所在位置(行和列),但是如果不使用Source Map文件,则jquery.min.js文件出现错误的时候,那是相当难找到错误位置的。

第四点,也就是说不同的Source map文件是由不同的js文件产生的,而这些js文件可能是压缩后,合并后或者是其它语言编译成JavaScript。

目前支持jquery.min.map文件的浏览器有Google Chrome、Firefox Firebug的为数不多的浏览器。

可能出现的错误:

如果jquery.min.js文件中不存在对应的juqery.min.map的时候,可能会出现的错误:

当打开引入jQuery脚本的页面时,在Chrome的控制台中报了“GET http://localhost/libs/jquery.min.map 404 (Not Found)”的错误。

解決方法:下载同一版本的 source maps跟jquery.js同目录,source maps 会跟 jquery 同一文件夹

结论:

//@ sourceMappingURL=jquery.min.map

或者

//# sourceMappingURL=jquery.min.map

如果是布置到生产环境中去,你可以把上面那行代码直接删掉。

如果是在开发环境中,你应该下载jquery-1.10.2.min.map文件,放到jQuery同级目录中去(需要对应的source map文件)。

测试:

index.html页面代码:

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

jquery-1.9.1目录下存在的文件有:

  1. jquery-1.9.1.js
  2. jquery-1.9.1.min.js
  3. jquery.min.map	# 这个juqery.min.map 是 version 1.9.1 的,只是命名取成jquery.min.map

而将jquery-1.9.1.min.js中的某个命令误改(就是随便修改,使得js代码会报错),然后打开Google Chrome,会发现出现打开的文件是jquery-1.9.1.js文件的某行,如下图:

请输入图片名称

总结一句话,其实在真是上线的项目中是不使用jquery.min.map文件的,因为没有任何意义,这个文件仅仅供给程序员用于快速发现错误所在行和列。

版权归 马富天PHP博客 所有

本文标题:《【仅供了解】简单介绍一下jquery.min.map文件》

本文链接地址:http://www.mafutian.net/153.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 input输入框绑定回车事件两种方式 》 下一篇《 html5shiv.js解决IE6-IE8使用HTML5新标签的兼容性问题 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多