1/11

为您的设计
寻找专业的前端切图服务。

5种方法解决jquery和Prototype冲突

切图网在给cctv7专题做web前端开发的时候,碰到一个js效果就是点击按钮以后,自动复制对应文本框的内容到剪贴板, 而有经验的web前端应该都会知道这个效果看起来简单实际实现非常的麻烦,最主流的方法是用到一款jquery插件,并且这款插件需要用到flash,用到flash+js来实现,为什么要这样? 因为这个是目前最兼容的解决方案了~  还有一层原因因为这个效果是参考了优酷的效果,所以我们不遗余力将优酷代码一层一层剖析了,最终找到了这段核心的代码:

var copytoclip = 1;
function copyToClipboard(b, c) {
var d = $(b);
d.select();
try {
if (therange = void 0, 1 == copytoclip && (d.createTextRange && (therange = d.createTextRange()), therange = therange ? therange: document, therange.execCommand(“Copy”))) { ! 1 != c && alert(“\u590d\u5236\u6210\u529f\u3002\u73b0\u5728\u60a8\u53ef\u4ee5\u7c98\u8d34\uff08Ctrl+v\uff09\u5230Blog \u6216BBS\u4e2d\u4e86\u3002”);
return
}
} catch(e) {}
alert(“\u60a8\u4f7f\u7528\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6b64\u590d\u5236\u529f\u80fd\uff0c\u8bf7\u4f7f\u7528Ctrl+C\u6216\u9f20\u6807\u53f3\u952e\u3002”)
}

但是这个效果需要配合 jquery和 Prototype , 于是页面中其他的jquery代码不生效了,这一下子首先想到了就是两个类库的冲突了, 因为 jquery和 prototype都是 $ 做命名空间,如果解决jquery和 Prototype的冲突呢,下面的5种方法将解决这个问题,本次的问题采用的是 第二种方法。

演示地址:http://www4.qietu.com/html/ntvplayer/

第一种情况:先加载Prototype,再加载jQuery
方法一:jQuery 库和它的所有插件都是在jQuery名字空间内的,包括全局变量也是保存在jQuery 名字空间内的。

使用jQuery.noConflict();主要作用是在任何时候,只要在jQuery加载后就可以调用,将$符号的使用权返回给其它的js库,jQuery在创建它自己的名字空间时就将其它库的$保存在自己的一个变量当中。

  1. <html>
  2. <head>
  3. <script src=”prototype.js”></script>
  4. <script src=”jquery.js”></script>
  5. <script type=”text/javascript” >
  6. //各个js库之间的主要冲突在于$的冲突,这个方法是用来处理这个问题的
  7. jQuery.noConflict();
  8. //原本使用jQuery代码部分的$ 用jQuery替代
  9. jQuery(document).ready(function (){
  10. jQuery(“div”).hide();
  11. });
  12. // Use Prototype with $(…), etc.
  13. $(‘proto’).hide();
  14. </script>
  15. </head>
  16. <body></body>
  17. </html>

方法二:如果你仍然想使用类似于$这样比较简短的字符,你可以将jQuery.noConflict()的返回值赋值给某个变量。这个变量就是jQuery的新缩写了,当然你可以使用$以外的任意字符串,比如:

  1. <html>
  2. <head>
  3. <script src=”prototype.js”></script>
  4. <script src=”jquery.js”></script>
  5. <script type=”text/javascript” >
  6. //$j就相当于jQuery,名称你可以自主定义
  7. var  $j = jQuery.noConflict();
  8. // Use jQuery via $j(…)
  9. $j(document).ready(function (){
  10. $j(“div”).hide();
  11. });
  12. // Use Prototype with $(…), etc.
  13. $(‘proto’).hide();
  14. </script>
  15. </head>
  16. <body></body>
  17. </html>

方 法三:如果你还是想使用$,而不想使用别的字符,也是可以的。而且通常程序员都比较喜欢这样做,因为这样做写好的代码几乎都不用替换原来的$符号。那就是 利用名字空间的概念就所有的jQuery代码封装在document的ready事件名字空间范围内, 如:jQuery(document).ready(这里填入jQuery代码)

  1. <html>
  2. <head>
  3. <script src=”prototype.js”></script>
  4. <script src=”jquery.js”></script>
  5. <script type=”text/javascript” >
  6. jQuery.noConflict();
  7. // Put all your code in your document ready area
  8. jQuery(document).ready(function ($){
  9. // 这样你可以在这个范围内随意使用$而不用担心冲突
  10. $(“div” ).hide();
  11. });
  12. // Use Prototype with $(…), etc.
  13. $(‘proto’ ).hide();
  14. </script>
  15. </head>
  16. <body></body>
  17. </html>

 

第二种情况:先加载jQuery,再加载Prototype

按照这样的顺序加载,就不存在其它js库的$符号被jQuery占用的问题。所以对其它的js库的代码可以不作任何修改,照常使用$,而对 jQuery可以使用jQuery来替代$.如:

  1. <html>
  2. <head>
  3. <script src=”jquery.js”></script>
  4. <script src=”prototype.js”></script>
  5. <script type=”text/javascript” >
  6. // 使用 jQuery 用 jQuery(…)
  7. jQuery(document).ready(function (){
  8. jQuery(“div” ).hide();
  9. });
  10. // 使用 Prototype 时,用 $(…),
  11. $(‘someid’ ).hide();
  12. </script>
  13. </head>
  14. <body></body>
  15. </html>

或者你不想写jQuery这么长的字符,你可以通过另外一种方法:

  1. var  $j = jQuery;

欢迎一起交流, 也欢迎将繁琐的web前端交给切图网qietu.com来做~