前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一劳永逸的解决jquery的本地引入的方法

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

作者头像
FungLeo
发布2022-11-28 08:49:04
3.9K0
发布2022-11-28 08:49:04
举报

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

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

好,jq本地引入有什么问题?

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

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

代码语言:javascript
复制
<!--[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]-->

好,如上。

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

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

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

代码语言:javascript
复制
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]-->");

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

代码语言:javascript
复制
<script src="js/jquery/jquery.js"></script>

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

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

有什么办法可以解决呢?有思路:

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

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

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

代码语言:javascript
复制
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]-->");

其中

代码语言:javascript
复制
var js=document.scripts;
js=js[js.length-1].src.substring(0,js[js.length-1].src.lastIndexOf("/")+1);

是百度来的,原文地址:http://www.cnblogs.com/MaxIE/archive/2007/11/09/936999.html

虽然这段代码很乱,但是通过仔细研究之后,还是搞明白了。

好了,用了这段代码之后,就一劳永逸的解决jquery引入问题啦,以后想用jquery,直接把这一坨给复制到相应目录,然后检点的调用一下jquery.js即可不用管啦!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-08-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档