详解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 相关文章推荐
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
webpack css加载和图片加载的方法示例
Sep 11 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python中自定义函数的教程
2015/04/27 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python实现两个文件合并功能
2018/04/01 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Numpy之random函数使用学习
2019/01/29 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Django之PopUp的具体实现方法
2019/08/31 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python实现字符串和数字拼接
2020/03/02 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
打架检讨书50字
2014/01/11 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
师德师风演讲稿
2014/05/05 职场文书
2015年度保密工作总结
2015/04/24 职场文书
中学校园广播稿
2015/08/18 职场文书
实验心得体会范文
2016/01/25 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
Python实现归一化算法详情
2022/03/18 Python