-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnoConflict.html
47 lines (41 loc) · 1.53 KB
/
noConflict.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>noConflict</title>
<script>
var $ = function (a) { console.log(a) }
</script>
<!-- <script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script> -->
</head>
<body>
<h4>很多第三方库都会往自己的全局环境中注入一些便捷的全局变量，例如 $ 和 _。但是如果两个库都使用了 $ 就会有命名冲突的问题。所以类似 jQuery 会自带一个 noConflict 方法，来防止这种命名的冲突。noConflict 会恢复原来的 $ 全局变量，并且返回自己原本应该注入的变量。</h4>
<p>例如：</p>
<pre>
// 假设 $ 已经定义为 'ScriptOJ'
// 加载 jQuery，$ 变量被覆盖，变成了 jQuery。
// ...
$('body').html('ScriptOJ')
// noConflict 恢复原来的 $ 变量
const j = $.noConflict()
$ === 'ScriptOJ' // => true
// 现在 jQuery 变成了 j
j('body').html('Hello')
</pre>
<p>请你完成一个立即执行的函数，这个函数会往全局变量中注入 $ 对象变量，并且 $ 有一个 noConflict 方法来达到上面的效果。</p>
<script>
(() => {
const _$ = window.$;
window.$ = {
noConflict() {
let cur = window.$;
window['$'] = _$;
return cur
}
}
})()
</script>
</body>
</html>