jQ基础篇--插件开发入门

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。

入门

编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称:

jQuery.fn.myPlugin = function(){
 
  //你自己的插件代码
 
};

为了避免和其他JavaScript库冲突,我们最好将jQuery传递给一个自我执行的封闭程序:

  (function ($) {
        $.fn.m​​yPlugin = function () {
            //你自己的插件代码
        };
    })(jQuery);

执行环境

现在,我们可以开始编写实际的插件代码。 但是,在这之前,我们必须得对插件所处的环境有个概念。 在插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 这里容易产生一个普遍的误区,因为在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中,如下所示。

(function ($) {
    $.fn.m​​yPlugin = function () {
 
        //此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。
        //$(this)等同于 $($('#element'));
 
        this.fadeIn('normal', function () {
 
            //此处callback函数中this关键字代表一个DOM元素
 
        });
 
    };
})(jQuery);
 
$('#element').myPlugin();

简单例子

当理解了jquery的相关知识后,来看下面一个简单的例子:

(function ($) {
 
    $.fn.m​​axHeight = function () {
 
        var max = 0;
 
        this.each(function () {
            max = Math.max(max, $(this).height());
        });
 
        return max;
    };
})(jQuery);
 
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

这是一个简单的插件,利用.height()返回页面中高度最大的div元素的高度。

链式操作

要保持一个插件的链式操作(chainability),你必须确保你的插件返回this关键字。
如下例子:

(function ($) {
 
    $.fn.lockDimensions = function (type) {
 
        return this.each(function () {
 
            var $this = $(this);
 
            if (!type || type == 'width') {
                $this.width($this.width());
            }
 
            if (!type || type == 'height') {
                $this.height($this.height());
            }
 
        });
 
    };
})(jQuery);
 
$('div').lockDimensions('width').CSS('color', 'red');

由于插件返回this关键字,它保持了chainability,这样jQuery收集的元素可以继续被jQuery方法如.css控制。 因此,如果你的插件不返回固有的价值,你应该总是在其作用范围内返回this关键字。 此外,你可能会推断出,传递给插件的参数将会在插件的作用范围内被传递。 因此,在前面的例子,字符串’width’变成了插件的类型参数。

默认值和选项

通过使用$.extend来设置默认设置。

(function ($) {
 
    $.fn.tooltip = function (options) {
 
        //创建一些默认值,拓展任何被提供的选项
        var settings = $.extend({
            'location': 'top',
            'background-color': 'blue'
        }, options);
 
        return this.each(function () {
 
            // Tooltip插件代码
 
        });
 
    };
})(jQuery);
 
$('div').tooltip({
    'location': 'left'
});

在这个例子中,调用tooltip插件时覆写了默认设置中的location选项,background-color选项保持默认值,所以最终被调用的设定值为:

   {
        'location': 'left',
        'background-color': 'blue'
    }

这是一个很灵活的方式,提供一个高度可配置的插件,而无需开发人员定义所有可用的选项。

插件方法

在任何情况下,一个单独的插件不应该在jQuery.fn jQuery.fn对象里有多个命名空间。
如下的写法是糟糕的:

(function ($) {
 
    $.fn.tooltip = function (options) {
        // this
    };
    $.fn.tooltipShow = function () {
        // is
    };
    $.fn.tooltipHide = function () {
        // bad
    };
    $.fn.tooltipUpdate = function (content) {
        // !!!
    };
 
})(jQuery);

这是不被鼓励的,因为它$.fn使$.fn命名空间混乱。 为了解决这个问题,你应该收集对象文本中的所有插件的方法,通过传递该方法的字符串名称给插件以调用它们。

 (function ($) {
     
        var methods = {
            init: function (options) {
                // this
            },
            show: function () {
                // is
            },
            hide: function () {
                // good
            },
            update: function (content) {
                // !!!
            }
        };
     
        $.fn.tooltip = function (method) {
     
            // 方法调用
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method' + method + 'does not exist on jQuery.tooltip');
            }
     
        };
     
    })(jQuery);
     
    //调用init方法
    $('div').tooltip();
     
    //调用init方法
    $('div').tooltip({
        foo: 'bar'
    });
     
    // 调用hide方法
    $('div').tooltip('hide');
     
    //调用Update方法
    $('div').tooltip('update', 'This is the new tooltip content!');

这种类型的插件架构允许您封装所有的方法在父包中,通过传递该方法的字符串名称和额外的此方法需要的参数来调用它们。 这种方法的封装和架构类型是jQuery插件社区的标准,它被无数的插件在使用,包括jQueryUI中的插件和widgets。

总结

编写jQuery插件允许你做出库,将最有用的功能集成到可重用的代码,可以节省开发者的时间,使开发更高效。 开发jQuery插件时,要牢记:

  • 始终包裹在一个封闭的插件:
  (function($) {
    /* plugin goes here */
    })(jQuery);
    
  • 不要冗余包裹this关键字在插件的功能范围内。
  • 除非插件返回特定值,否则总是返回this关键字来维持chainability 。
  • 传递一个可拓展的默认对象参数而不是大量的参数给插件。
  • 不要在一个插件中多次命名不同方法。

转载地址:http://www.css88.com/archives...


风雨过后见彩虹
对web前端的爱好与兴趣而来,收集、发表有意义的文章随笔问题,让知识沉淀积累,方便自己查阅,方便网友...
9k 声望
1.1k 粉丝
0 条评论
推荐阅读
web前端常用的五种方式搭建本地静态html页面服务器
方式一:live-serverlive-server是一款npm工具,可以在项目目录启动一个node服务,然后直接在浏览器中预览,并且自动全局监听实时更新。两种安装方式: {代码...} 直接使用live-server首先在项目下npm初始化:npm ...

风雨后见彩虹4阅读 9.9k评论 1

Ajax实现搜索联想 搜索关键词提醒 无刷新搜索
通过javascript监听搜索框的内容,调用后端即可。(1)javascript监听搜索框的内容(2)把搜索框的关键词传给后端进行搜索(3)搜索到结果,遍历到页面

TANKING1阅读 4.7k

【永久开源】Pear Admin Layui 基于 Layui 的后台管理模板
Pear Admin Layui 是基于 Layui 的后台管理系统模板,扩展Layui原生UI样式,整合第三方开源组件,提供便捷快速的开发方式,延续LayuiAdmin的设计风格,持续完善的样式与组件的维护,基于异步Ajax的菜单构建,相对...

就眠仪式2阅读 7.1k评论 1

Promise: 异步编程的理解和使用
JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:Q、When、Bluebird。

后除2阅读 905

js简单实现实时显示网速强度
在页面加载完成时也就是测速开始时定义一个轮询并保存一下当前时间,用一张不大不小的图片做测速,这里选了个百度的logo图,因为不用担心资源失效。注意在图片后添加 rd=_" +new Date().getTime(),否则浏览...

洛阳醉长安行阅读 2k

【html + 原生js】input标签上传多张图片后如何转成base64数据并返回
前景摘要,最近帮后端同事解决了一个问题,他需要取到多选图片上传后的每个图片的base64数据。话不多说,直接上代码吧!页面部分(页面需要引入jq方可正常运行) {代码...} 逻辑部分 {代码...} 输入结果如下图所...

前端小高阅读 829

封面图
详细的Ajax简单案例
静态页面表格内容如下一个简单的表格 {代码...} JS调用引入用JqueryGET方式查询POST方式提交 {代码...} 后台代码调用的后台,做了详细的备注。 保存数据位置直接输出返回,没有链接数据库 {代码...}

Json阅读 14

9k 声望
1.1k 粉丝
宣传栏