您的位置：首页 > Web前端 > JQuery

jQuery 插件扩展

2020-08-24 23:13 2071 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航