# 旧时代插件
回忆： 在很久之前的 Jquery (opens new window) 时代，插件都是以什么方式书写的呢？什么方式引入的呢？
由于 JavaScript 语言的特性，库的作者不得不用闭包的方式避免变量全局污染，将库绑定在 window 上。然后用户通过 <script src="......"></script> 的方式引入，通过 window.xxxx 就可以获取到库里的方法了。例如：
提示
引入的地址可以是本地或 CDN。为了方便讲解，以上方式均称为 CDN 方式加载。
创建一个 library.js 和 index.html 文件，库里的内容采用 ES5 方式随便写一些：
// library.js
(function(window) {
// 浏览器识别
var inBrowser = typeof window !== "undefined";
var UA = inBrowser && window.navigator.userAgent.toLowerCase();
var isIE = UA && /msie|trident/.test(UA);
var isEdge = UA && UA.indexOf("edg/") > 0;
var isChrome = UA && UA.indexOf("chrome") > 0 && !isEdge;
// 浏览器识别结果
function browser() {
return ["ie: " + isIE, "edge: " + isEdge, "chrome: " + isChrome].join(", ");
}
// 随机数
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// 加载图片
function loadImg(src, callback) {
var img = document.createElement("img");
img.src = src;
img.onload = function() {
callback && callback(img);
};
}
// 使用 background 显示图片
function createBackgroudImg(src, callback) {
loadImg(src, function(img) {
var div = document.createElement("div");
div.style.width = img.width + "px";
div.style.height = img.height + "px";
div.style.background = "url(" + src + ")";
callback && callback(div);
});
}
// 创建一个有随机数的节点
function createRandomTextElement() {
var div = document.createElement("div");
div.innerText = "random: " + getRandomInt(1000, 9999);
return div;
}
// 插件变量
var library = {
isIE: isIE,
isEdge: isEdge,
isChrome: isChrome,
browser: browser,
getRandomInt: getRandomInt,
createBackgroudImg: createBackgroudImg,
createRandomTextElement: createRandomTextElement,
// ...
};
// 绑定在传入的 window 上
window.library = library;
})(window);
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./library.js"></script>
<script>
// 随机数文本节点
var randomText = window.library.createRandomTextElement();
document.body.appendChild(randomText);
// 显示浏览器类型
var browserText = document.createElement("div");
browserText.innerHTML = window.library.browser();
document.body.appendChild(browserText);
// 添加图片
window.library.createBackgroudImg(
"https://hxin.link/images/avatar.jpg",
function(el) {
document.body.appendChild(el);
}
);
</script>
</body>
</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
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
试着在 Chrome、IE >= 9 浏览器下运行。结果：均正常运行。
思考： 随着库的迭代更新，功能越来越多会导致项目难以维护，试想一下一个文件几千行的代码。那该如何解决呢？
提示
以上代码会在后续教程中使用。