详解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 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
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使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP可变变量学习小结
2015/11/29 PHP
初识PHP中的Swoole
2016/04/05 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
Python:slice与indices的用法
2019/11/25 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Python如何将装饰器定义为类
2020/07/30 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
教师党员自我评议不足范文
2014/10/19 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
少先队工作总结2015
2015/05/13 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
为Centos安装指定版本的Docker
2022/04/01 Servers
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS