写JQuery插件的基本知识


Posted in Javascript onNovember 25, 2013

普及JQuery知识

知识1:用JQuery写插件时,最核心的方法有如下两个:

$.extend(object) 可以理解为JQuery 添加一个静态方法。

$.fn.extend(object) 可以理解为JQuery实例添加一个方法。

基本的定义与调用:

/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("执行方法一"); } });
$.fun1();
/*  $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$(this).fun2();
//等同于
$.fn.fun3 = function () { alert("执行方法三"); }
$(this).fun3();

知识2:jQuery(function () { }); 与  (function ($) { })(jQuery);的区别:

jQuery(function () { });
//相当于
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);

jQuery(function () { });是某个DOM元素加载完毕后执行方法里的代码。
(function ($) { })(jQuery); 定义了一个匿名函数,其中jQuery代表这个匿名函数的实参。通常用在JQuery插件开发中,起到了定义插件的私有域的作用。

三:开发JQuery插件标准结构

1,定义作用域:定义一个JQuery插件,首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。说了这么多,那要怎样定义一个插件的私有作用域?

(function ($) {
})(jQuery);

到现在为止,其实一个最简单的JQuery插件就已经完成了。调用的时候可以$("#domName").easySlider({}),或者$(".domName").easySlider({})或者更多的方式来调用这个插件。

3,设置默认值:定义一个JQuery插件,就像定义一个.net控件。一个完美的插件,应该是有比较灵活的属性。我们来看这段代码:<asp:TextBox ID="TextBox1" Width="20" Height="100" runat="server"></asp:TextBox>。  TextBox控件有Width和Height属性,用户在用TextBox时,可以自由的设置控件的Height和Width,也可以不设置值,因为控件自身有默认值。那准备开发一个JQuery插件时,在用户未指定属性时,应该有默认值,在JQuery可以分两步实现这样的定义,看如下代码step03-a,step03-b。

//step01 定义JQuery的作用域
(function ($) {
    //step03-a 插件的默认值属性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b 合并用户自定义属性,默认属性
        var options = $.extend(defaults, options);
    }
})(jQuery);

做程序的人都喜欢创新,改改变量名呀,换一个行呀这些。当看到用var defaults = {}来表示一个默认属性时,在自己写JQuery插件时就想着与众不同,所以用var default01 ={} ,var default02 ={}来表示默认属性了。然后默认属性名五花八门,越来越糟。所以建议在写JQuery插件时,定义默认属性时,都用defaults变量来代表默认属性,这样的代码更具有可读性。

有人看到这行代码:var options = $.extend(defaults, options),皱起眉头,表示不解。那我们先来看如下代码:

var obj01 = { name: "英文名:Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "中文名:XiaoJian", girlfriend: { name: "YY"} };
var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);
var d = $.extend(true,{}, obj01, obj02);

把代码拷贝到开发环境中,分别看一下a,b,c,d的值,就明白了var options = $.extend(defaults, options)的含义了。表示 options 去覆盖了defaults的值,并把值赋给了options。
在插件环境中,就表示用户设置的值,覆盖了插件的默认值;如果用户没有设置默认值的属性,还是保留插件的默认值。

4,支持JQuery选择器:JQuery选择器,是JQuery的一个优秀特性,如果我们的插件写来不支持JQuery选择器,确实是一个不小的遗憾。如了使自己的JQuery插件能支持多个选择器,我们的代码应该这样定义:

//step01 定义JQuery的作用域
(function ($) {
    //step03-a 插件的默认值属性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b 合并用户自定义属性,默认属性
        var options = $.extend(defaults, options);
        //step4 支持JQuery选择器
        this.each(function () {
        });
    }
})(jQuery);

5,支持JQuery的链接调用:上边的代码看似完美了,其实也不那么完美。到目前为止还不支持链接调用。为了能达到链接调用的效果必须要把循环的每个元素return

//step01 定义JQuery的作用域
(function ($) {
    //step03-a 插件的默认值属性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b 合并用户自定义属性,默认属性
        var options = $.extend(defaults, options);
        //step4 支持JQuery选择器
        //step5 支持链式调用
        return this.each(function () {
        });
    }
})(jQuery);

这样的定义才能支持链接调用。比如支持这样的调用:$(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });

6,插件里的方法:往往实现一个插件的功能需要大量的代码,有可能上百行,上千行,甚至上万行。我们把这代码结构化,还得借助function。在第一点已经说了,在插件里定义的方法,外界不能直接调用,我在插件里定义的方法也没有污染外界环境。现在就尝试着怎么样在插件里定义一些方法:

//step01 定义JQuery的作用域
(function ($) {
    //step03-a 插件的默认值属性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a 在插件里定义方法
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }
    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b 合并用户自定义属性,默认属性
        var options = $.extend(defaults, options);
        //step4 支持JQuery选择器
        //step5 支持链式调用
        return this.each(function () {
            //step06-b 在插件里定义方法
            showLink(this);
        });
    }
})(jQuery);

步骤step06-a:在插件里定义了一个方法叫showLink(); 这个方法在插件外是不能直接调用的,有点像C#类里的一个私有方法,只能满足插件内部的使用。步骤step06-b演示了怎样调用插件内部的方法。

Javascript 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 #Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 #Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 #Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 #Javascript
js导入导出excel(实例代码)
Nov 25 #Javascript
用javascript添加控件自定义属性解析
Nov 25 #Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 #Javascript
You might like
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python写的贪吃蛇游戏例子
2014/06/16 Python
详解Python中的文件操作
2016/08/28 Python
Python工厂函数用法实例分析
2018/05/14 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python命令 -u参数用法解析
2019/10/24 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
三八妇女节活动主持词
2014/03/17 职场文书
班级旅游计划书
2014/05/03 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
办公室卫生管理制度
2015/08/04 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript