详解jQuery插件开发方式


Posted in Javascript onNovember 22, 2016

jQuery插件开发 

一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法;另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法。

一、jQuery扩展

1、$.extend(object)

类似于.Net的扩展方法,用于扩展jQuery。然后就可以用$.的方式调用。

$(function(){
 $.extend({ fun1: function () { alert("为jQuery扩展一个fun1函数!"); } });
 $.fun1();
 })

2、$.fn.extend(object)

扩展jQuery的对象。

$.fn.extend({ fun2: function () { alert("执行方法2"); } });
 $("#id1").fun2();

可以用google来看看:

详解jQuery插件开发方式

上面的写法等同于:

$.fn.fun2 = function () { alert("执行方法2"); }
 $(this).fun2();

二、私有域

其定义方式如下:

(function ($) { })(jQuery);
//相当于
var fn = function (xxoo) { };
fn(jQuery);

以下代码弹出123。

$(function(){
 var fn = function (xxoo) { };
 fn(alert(123));
 })

三、定义插件的基本步骤

1、定义作用域

开发一个jQuery插件,首先要把插件的代码与外界隔离开来,外部的代码不允许直接访问插件内部的代码,插件内部的代码也不影响外部。

    //步骤1 定义插件私有作用域

(function ($) {

 })(jQuery);

 这样就能保证插件内部的代码与外界隔离了。

2、扩展jQuery

定义了作用域之后,为了能够让外部调用,就需要将插件扩展到jQuery。

//步骤1 定义私有作用域
 (function ($) {
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 
 }
 })(jQuery);

    3、默认值

定义了jQuery插件之后,如果希望某些参数具有默认值,那么可以以这种方式来指定。

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
 Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults)
 var options = $.extend(defaults, options);
 }
 })(jQuery);

     4、支持jQuery选择器

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
 Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults)
 var options = $.extend(defaults, options);
 }
 //步骤4 支持jQuery选择器
 this.each(function () {

 });
 })(jQuery);

    5、支持jQuery的链式调用

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
 Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults)
 var options = $.extend(defaults, options);
 }
 //步骤4 支持jQuery选择器
 //步骤5 支持链式调用(将步骤4返回)
 return this.each(function () {

 });
 })(jQuery);

     6、插件内部方法

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
 Id: '#id1',
 };

 //步骤6 在插件里定义函数
 var MyFun = function (obj) {
 alert(obj);
 }

 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性,默认属性(如果options为空,则使用defaults)
 var options = $.extend(defaults, options);
 }
 //步骤4 支持jQuery选择器
 //步骤5 支持链式调用(将步骤4返回)
 return this.each(function () {
 //步骤6 在插件里定义函数
 MyFun(this);
 });
 })(jQuery);

    由于作用域关系,步骤6的私有函数目前允许的插件内部使用。

 以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
js实现在同一窗口浏览图片
Sep 17 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
详解javascript函数的参数
Nov 10 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
Vue头像处理方案小结
Jul 26 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
AngularJS中isolate scope的用法分析
Nov 22 #Javascript
详解js界面跳转与值传递
Nov 22 #Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 #Javascript
JavaScript面向对象分层思维全面解析
Nov 22 #Javascript
浅析location.href跨窗口调用函数
Nov 22 #Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 #Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 #Javascript
You might like
PHP 已经成熟
2006/12/04 PHP
php实现简单洗牌算法
2013/06/18 PHP
php获得url参数中具有&的值的方法
2014/03/05 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
少年闰土教学反思
2014/02/22 职场文书
企业出纳岗位职责
2014/03/12 职场文书
文体活动实施方案
2014/03/27 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2016年会开场白台词
2015/06/01 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Python中22个万用公式的小结
2021/07/21 Python
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python