一劳永逸的解决jquery的本地引入的方法

最新推荐文章于 2023-08-10 22:34:02 发布

TinaSlowDown

最新推荐文章于 2023-08-10 22:34:02 发布

阅读量4.4k

点赞数

转载至：

一劳永逸的解决jquery的本地引入的方法

标签： jquery html5

2015-08-27 17:23 4065人阅读评论(0) 收藏举报

分类：

jQuery（26）

作者同类文章 X

JavaScript（51）

作者同类文章 X

HTML&CSS（48）

作者同类文章 X

很多人都建议jQuery使用cdn加速的方式引入。当然，我不反对这么做。但是以我自己做项目的便利性，我还是习惯把jq放在本地使用。原因有以下几点：

项目的可靠性。不会受外在的情况的影响。
在断网的情况下依旧可以工作。（我这个随时随地写代码的人哪）。

好，jq本地引入有什么问题？

JQ2不兼容IE低版本，所以，针对IE低版本，要使用JQ1.11版
同时引入html5.js，以让低版本IE支持HTML5标记

为了实现这样的效果，我们需要写如下代码：

<!--[if IE]>
    <script src='js/jquery/jquery-1.11.3.min.js'></script>
    <script src='js/jquery/html5.js'></script>
<![endif]-->
<!--[if !IE]><!-->
    <script src="js/jquery/jquery-2.1.4.min.js"></script>
<!--<![endif]-->
    
    1
2
3
4
5
6
7
    
    
     
     
    
    
    
    1
2
3
4
5
6
7

好，如上。

IE以后不会有新版本了，所以我简单粗暴的分为IE和非IE。如果愣是要区别IE自身的版本的话，代码就太冗长了。

但是这个代码还是比较冗长的。我个人不是很喜欢。怎么办呢？

我想到一个解决方法。就是在同目录下建立一个jquery.js的文件，然后，在这个文件中写上如下代码：

document.writeln("<!--[if IE]><script src=\"js/jquery/jquery-1.11.3.min.js\"></script><script src=\"js/jquery/html5.js\"></script><![endif]-->")
document.writeln("<!--[if !IE]><!--><script src=\"js/jquery/jquery-2.1.4.min.js\"></script><!--<![endif]-->");
    
    1
2
    
    
     
     
    
    
    
    1
2

使用这种方式之后，在html中确实精简太多啦。我们只需要这样调用就可以了。

<script src="js/jquery/jquery.js"></script>
    
    1
    
    
     
     
    
    
    
    1

相比上面的一坨代码，确实是非常理想。但是，问题还是存在的。什么问题呢？就是在这个项目中是没有问题的，在其他的项目中，可能就有问题了。

因为其他的项目的目录路径可能跟这个是完全不一样的。

有什么办法可以解决呢？有思路：

所有JS文件放在同一个目录下，至于这个目录在哪里是不知道的。
因此，我们需要动态的获取这个js的目录并赋予变量，然后替换原来的路径就可以了

思路如此简单，代码实现不一定简单。因为我的JS基础非常薄弱，只能写一些不太复杂的jquery。而这个一定是不能用jquery来写的，因为它的作用是引入jquery，所以必须要写原生。

查找了一番资料，终于找到解决方法。代码如下：

var js=document.scripts;
js=js[js.length-1].src.substring(0,js[js.length-1].src.lastIndexOf("/")+1);
document.writeln("<!--[if IE]><script src='"+js+"jquery-1.11.3.min.js'></script><script src='"+js+"html5.js'></script><![endif]-->");
document.writeln("<!--[if !IE]><!--><script src='"+js+"jquery-2.1.4.min.js'></script><!--<![endif]-->");
    
    1
2
3
4
    
    
     
     
    
    
    
    1
2
3
4

其中

var js=document.scripts;
js=js[js.length-1].src.substring(0,js[js.length-1].src.lastIndexOf("/")+1);
    
    1
2
    
    
     
     
    
    
    
    1
2