9.2 通过 JQuery 使用其他库
$.noConflict( [removeAll ] )
把 $ 控制权释放给第三方库，允许页面同时使用 jQuery 和其他库。执行一个函数，jQuery 功能调用是使用 jQuery 标识符（window对象的jQuery属性）而不是 $ 标识符。
参数：removeAll
类型: Boolean
一个布尔值，判断是否从全局作用域中内去除所有jQuery变量(包括jQuery本身)。
-
$是jQuery的简称，所有功能在调用$.noConflict()之后仍然可用，通过 window 对象的jQuery属性访问。可以定义一个缩写标识符，
var $j = jQuery;
- 假设需要同时放弃$和jQuery，则可以通过调用$.noConflict()工具函数实现，把返回值保存在一个全局属性里：
window.$new = $.noConflict(true);
一旦执行，可以使用 $new 属性来调用 jQuery 方法了（例如 $new('p').find('a')）
立即调用函数表达式
一种经常看到的设计模式，Immediately-Invoked Function Expression(IIFE，立即调用函数表达式)
(function($) {
//函数体代码
})(jQuery);
则不论其他外部函数是否定义了这个标识符，都可以在函数体内部安全使用 $ 标识符。
来看一个例子，
<body> <button id="button-test">Click me!</button> <script src="../js/jquery-1.11.3.min.js"></script> <script> $ = 'Hello world!'; try { $('#button-test').on('click', function() { alert('$ is an alias for jQuery'); }); } catch (ex) { alert('$ has been replaced. The value is "' + $ + '"'); } </script> </body>重写$测试1
失败原因是重新定义了$标识符。而且，按钮没有触发任何操作，因为在添加处理器之前$被重新分配了。下面修改代码
try { (function($) { $('#button-test').on('click', function() { alert('$ is an alias for jQuery'); }); })(jQuery); } catch (ex) {唯一修改的是，IIFE包装了附加处理器代码，而且传递了
window.jQuery属性给它。就能正常工作了。
现在来看如何恢复在jQuery调用 $.noConflict() 方法之前的 $ 的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Using $.noConflict()</title>
<link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<p>The output is printed on the console</p>
<script>
//创建一个库赋值给 window.$
window.$ = {
customLog: function(message) {
console.log('The function says: ' + message);
}
};
</script>
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
// Prints true
console.log('customLog: ' + ($.customLog === undefined));
// Restore the old value of $
$.noConflict();
// Prints false 已经给 $.customLog 赋值
console.log('customLog: ' + ($.customLog === undefined));
// Prints "The function says: Old value restored!"
$.customLog('Old value restored!');
</script>
</body>
</html>
网友评论