插件

作者: 宁宁nn | 来源:发表于2017-04-14 10:48 被阅读0次

前一段时间,老大让我封装插件,开始翻看之前的笔记和例子,今天天气很好,开始写一段插件机制。jquery有成千上万种的第三方插件,有时候自己写好了一个独立的功能,想将它与jquery结合起来,可以用jquery链式调用,这就需要扩展jquery,下成jquery插件形式了。先来一个小小的例子吧

(function($){

            $.fn.extend({

                         'bold':function(){

                                   return this.css({fontWeight:'bold'

                          });

               }

            });

})(jquery);

调用的方式:

$(function(){

                 //链式调用,加粗p标签中的字体

                  $('p').bold();

})

这是一个很简单的扩展。

现在开始解释上边的代码:

1,jquery的插件机制

创建插件,jquery提供了两种方法,jquery.extend()  和  jquery.fn.extend()

jquery.extend()方法有一个重载

jquery.extend(object),一个参数的用于扩展jquery类本身,也就是用来在jquery类/命名空间上增加新函数,或者叫静态方法,例如jquery内置的ajax方法都是用jquery.ajax()这个样子来调用,有点像“类名.方法名”静态方法的调用方式。下边来写个jquery.extend(object)的例子:

//扩展jquery对象本身

jquery.extend({

'minValue':function(a,b){

return a < b ? a : b;

},

'maxValue':function(a,b){

return a > b ? a : b;

}

});

//调用

var i = 100;j = 101;

var min_v = $.minValue(i,j);//min_v等于100

var max_v = $.maxValue(i,j);//max_v等于101

重载版本:jquery.extend([deep],target,object1,[objectN])

也许你刚看到这几个参数会有一种懵逼的感觉,没关系,先来解释一下:

deep:     可选       如果设为true,则递归合并

target:     待修改的对象

object1      待合并到第一个对象的对象

objectN         可选  待合并到第一个对象的对象

用一个或多个其他对象来扩展一个对象,返回被扩展的对象

如果不指定target,则对jquery命名空间本身进行扩展。这有助于我为jquery增加新方法

如果第一个参数设置为true,则jquery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。

未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制

演示一下:

合并settings 和 options ,修改并返回settings

var settings = { validate:false,limit:5,name:'foo'};

var options = {validate:true,name:'bar'};

jquery.extend(settings,options);

那么结果呢就是seetings == {validate:true

相关文章

  • React配置过程中用到的插件汇总

    ●react插件●react-dom插件●react-router插件●react-redux插件●babel插件...

  • iOS项目实战02

    修改插件:查找插件 -> 插件路径(不能记) -> Xcode插件开发 -> 查看插件代码 -> 搜索instal...

  • 5.文档 - gitbook - 插件

    参考 官方插件 重点参考 GitBook 插件 常用插件 配置插件 到 官方插件 上找合适的插件 在配置文件中安装...

  • FCPX系列的插件怎么安装导入?Final cut pro x插

    fcpx插件怎么安装? Fcpx插件怎么解压安装?fcpx插件怎么卸载?fcpx插件怎么添加?fcpx lut插件...

  • Cordova 插件更新

    查看项目插件列表 移除插件 添加插件

  • IDEA破解

    配置插件 配置仓库 下载插件 使用插件

  • Cordova 本地插件

    1 安装插件环境 2 创建插件 例子 添加配置 进入插件文件夹下初始化插件 插件使用

  • Webpack入门之plugins篇

    入门篇主要先学学插件的使用,不涉及自定义插件。 首先 插件分为:内置插件和外部插件。 内置插件例如BannerPl...

  • Gradle中插件的使用

    目录 插件的类型 插件的类型分为:1.脚本插件2.二进制插件 插件的使用 1.脚本插件的使用 脚本插件的使用方法如...

  • 更多关于CocoaScript

    目录 入门插件基础您的第一个插件开发环境调试Action API发布插件 高级插件捆绑插件,脚本和命令插件位置更多...

网友评论

      本文标题:插件

      本文链接:https://www.haomeiwen.com/subject/mowbattx.html