jQuery自定义函数应用和解析

jQuery自定义函数
1. 如何扩展jQuery函数?
jQuery有两种自定义函数扩展:一种是类级别的函数开发,相当于将jQuery看做一个类,给类本身扩展函数,也叫作全局函数,。jQuery的全局函数是属于jQuery命名空间的函数,另一种是对象级别的函数开发,即给jQuery选择器产生的对象添加方法。下面就两种函数的开发做详细的说明。

1).全局函数开发:
类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是jQuery.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:
a. 添加一个新的全局函数
添加一个全局函数,我们只需如下定义:
jQuery.test = function() {
alert(‘This is a test!!!’);
};
然后通过调用$.test();即可运行。
b. 增加多个全局函数
添加多个全局函数,可采用如下定义:
jQuery.test = function() {
alert(‘This is a test!!!’);
};
jQuery.test1 = function() {
alert(‘This is a test1!!!’);
};
调用方式跟上面一样。

c. 使用jQuery.extend(object) 

jQuery.extend({
test:function() {
alert(‘This is a test!!!’);
},
test1: function() {
alert(‘This is a test1!!!’);
},
add:function(a,b){
return a+b;
}
});

2).对象级别函数开发:
对象级别的函数开发可以有如下两种方式
a.
(function(){.fn.extend({
sayHello:function(){
alert(‘sayHello’);
}
}) ;
})(jQuery);

说明:该方式也可以直接用jQuery.fn.extend定义,这样写是为了将美元符号限制在一个命名空间内,定义过程中可以继续使用该符号,防止与其他库的$符号冲突,没有其他作用。

b. 接受options参数以控制插件的行为
当自定义函数需要传递很多参数的时候,参数过多,可读性较差,我们可以考虑传递一个对象,比方说,我们要定义一个给div设置背景色和文字颜色的函数,可以这样写:

$.fn.extend({
setColor:function(options,callback){
var defaults = {
fontcolor: ‘red’,
background: ‘yellow’
};

            $.extend(defaults, options); //这句话是将default和options合并成一个对象
            //设置样式
            console.log(this);
            $(this).css('background-color',defaults.background);
            $(this).css('color',defaults.fontcolor);

        }     
        }) ;

调用函数测试代码:
var options={
fontcolor: ‘blue’,
background: ‘red’
};
$(function(){

        $(".table").setColor(options);
    });

我们会看到table背景红色,字体都为蓝色。
这里写图片描述
2. 分析总结
jQuery的API手册中,我们看到,extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法,尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的,但是它们的功能却不太一样。官方的解释:
jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中)
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性,来扩展一个新的jQuery实例方法)
可以看出,jQuery有静态方法和实例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的区别就是一个用来扩展静态方法,一个用来扩展实例方法。
jQuery自定义部分源码如下:
jQuery.extend = jQuery.fn.extend = function(obj){
//obj是传递过来扩展到this上的对象
var target=this;
for (var name in obj){
//name为对象属性
//copy为属性值
copy=obj[name];
//防止循环调用
if(target === copy) continue;
//防止附加未定义值
if(typeof copy === ‘undefined’) continue;
//赋值
target[name]=copy;
}
return target;
}
JavaScript方法也是对象,所以所谓的扩展函数,也即是给jQuery.extend, jQuery.fn.extend这两个对象扩展新的属性,形参就是我们自定义的函数,最后会被拷贝成为target对象返回,并合并到jQuery.extend对象,或者jQuery.fn.extend对象中,本质上就是相当于给jQuery类本身增加方法或者给jQuery对象的prototype对象增加方法。

已标记关键词 清除标记
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页