jQuery 插件扩展
extend()
jQuery中的`extend()方法作用是进行对象合并，类似于JavaScript中的Object.assign()。
<script>
$(() => {
let obj1 = { "one": 1, }
let obj2 = { "two": 2, }
console.log($.extend(obj1, obj2)); // {one: 1, two: 2}
})
</script>
插件编写
功能性插件
如果我们的插件是功能性的插件，比如轮播图，比如快速布局等等应当使用$.extend()，对jQuery构造函数对象本身扩展，由于Js是原型继承，所以其他的jQuery对象不能调用该方法。
以下用轮播图伪代码为例，只能通过$对象调用，其他对象皆不可调用。
模块文件
$(() => {
"use strict";
function initStyle() {
console.log("初始化样式");
}
function initElement() {
console.log("初始化生成标签标签功能");
}
function autoPlay() {
console.log("初始化自动播放功能");
}
function start(width, seconds) {
width = width;
seconds = seconds;
initStyle();
initElement();
autoPlay();
}
$.extend({ start }); // 添加方法至 $ 对象
});
模块使用
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script src="./自定义模块.js"></script>
<script>
$(() => {
$.start(); // 只能通过$调用
})
</script>
jQuery扩展
如果要对jQuery本身的一些操作方法进行扩展，可以使用$.fn.extend()对jQuery的原型对象方法进行扩展，这样的话所有jQuery对象都能继承到从而进行使用。
比如我们新增一个oh方法，将jQuery对象返回为Map对象，键为元素本身，值为innerHTML;
扩展jQuery方法的模块
$(() => {
"use strict";
function oh() {
let map = new Map();
this.each((index, ele) => {
map.set(ele,ele.innerHTML);
})
return map;
}
$.fn.extend({ oh }); // 添加方法至jQuery的原型对象
});
方法应用
<body>
<div>div-1</div>
<div>div-2</div>
<div>div-3</div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script src="./自定义模块.js"></script>
<script>
$(() => {
let $div = $("div");
let div_map = $div.oh(); // 由于在jQuery构造函数的原型对象中。故任何jQuery对象都可以使用，唯独构造函数$不可以
console.log(div_map)
// Map(3) {div => "div-1", div => "div-2", div => "div-3"}
})
</script>
