前端知识 | 论jQuery如何编写插件

一. jQuery的插件机制

为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法
jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式。

jQuery.extend() 扩展
//扩展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);

jQuery.extend()方法重载
jQuery.extend([deep], target, object1, [objectN])

参数
deep: 可选。如果设为true,则递归合并。
target: 待修改对象。
object1: 待合并到第一个对象的对象。
objectN: 可选。待合并到第一个对象的对象。

示例
合并 defaults 和 options, 不修改 defaults。
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options)

结果
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。
未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。
Query.fn.extend(object)扩展 jQuery 元素集来提供新的方法(常用来制作插件)。

首先我们来看fn 是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {.....};
};
原来 jQuery.fn = jQuery.prototype,也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法,就相当于为对象添加“成员方法”,类的“成员方法”要类的对象才能调用,所以使用jQuery.fn.extend(object)扩展的方法,jQuery类的实例可以使用这个“成员函数”,比如$(‘p’).extend(obj)。
jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。
二. 自执行的匿名函数/闭包

  1. 什么是自执行的匿名函数?
    它是指形如这样的函数: (function(){// code})();
  2. 疑问 为什么(function() {// code})();可以被执行, 而function() {// code}();却会报错?
    (1).首先,要清楚两者的区别:(function(){// code})是表达式,function(){// code}是函数声明.
    (2).其次, js"预编译"的特点: js在"预编译"阶段, 会解释函数声明, 但却会忽略表达式.
    (3).当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;
    当js执行到(function(){// code})();时, 由于(function(){// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

匿名函数最大的用途是创建闭包(这是JavaScript语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用。

例如:
var a=1;
(function(){
    var a=100;
  })();
alert(a); //弹出 1
三. 分步封装JQuery插件

第一步定义一个闭包区域,防止插件“污染”。
(function($) {} )(window.jQuery);

第二步jQuery.fn.extend(object)扩展jquery方法制作插件
(function ($) {
$.fn.plugin=function(options){
//do something
};
})(window.jQuery);

第三步给插件默认参数,实现插件的功能
(function ($) {
$.fn.plugin=function (options) {
var defaults={
foreground: ‘red‘,
background: ‘yellow‘
};
//options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
var endOptions=$.extend({},defaults,options);
this.each(function () {
var $this = $(this);
$this.css({
backgroundColor: endOptions.background,
color: endOptions.foreground
});
});
return this;
};
})(jQuery);

最后调用插件
$(function () {
$("p").plugin({ foreground: ‘orange‘, background: ‘#ccc‘ });
//调用自定义 插件
});
注意

  1. 有一种东西叫脚本压缩,前端页面要减少脚本数量和脚本大小,所以要把一类的脚本压缩在一起,为了避免压缩时前一个脚本没有写最后一个分号而导致压缩后脚本不能使用,所以要在开始加一个分号。
  2. 函数全部放在闭包里,外面的函数就调用不到里面的参数了,比较安全。
  3. 之所以插件要return this,返回当前对象,是为了遵循jQuery的链式写法特点。

    总结
  4. jQuery.fn = jQuery.prototype,也就是jQuery对象的原型。jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。为对象添加“成员方法”,类的“成员方法”要类的对象才能调用,所以使用jQuery.fn.extend(object)扩展的方法,jQuery类的实例可以使用这个“成员函数”,比如$(‘p’).extend(obj)。
  5. 闭包可以构建命名空间,以减少全局变量的使用,避免全局污染。
  6. $.extend()多用来合并插件中的参数,也可以用来拓展全局函数,$.fn.extend()用来为对象添加成员方法。
  7. return this返回该对象,便于jQuery方法的链式调用。

原文地址:http://blog.51cto.com/13476205/2157009

时间: 2024-11-07 03:34:00

前端知识 | 论jQuery如何编写插件的相关文章

jQuery自己编写插件()

引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可是要追寻 高大上的90后有为青年呢~可是该如何高大上呢?这时jQuery自定义插件开发来了,第一次听到插件开发觉得如此happy, 遂动手网上查找资料进行学习,如下,我用自己的语言将插件开发的程序步骤写出来,如有错误,欢迎指正. 1:jQuery插件开发分为类级别开发和对象级别开发,因为类级别开发在

前端知识之jQuery

jQuery主要内容 1.选择器 2.筛选器 3.样式操作 4.文本操作 5.属性操作 6.文档处理 7.事件 8.动画效果 9.插件 10.each,data,Ajax jQuery版本 1.x 兼容IE678 原文地址:https://www.cnblogs.com/mrwang1101/p/8605823.html

jquery编写插件(转)

阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用j

jquery编写插件的方法

版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2.使用$.extend(obj) 3.使用命名空间 类级别开发插件(用的非常少,1%) 分别举例: //1.直接给jquer添加全局函数 jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法.extend是jquery提供的一个方

再谈:jquery编写插件的方法

版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2.使用$.extend(obj) 3.使用命名空间 类级别开发插件(用的非常少,1%) 分别举例: //1.直接给jquer添加全局函数 jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法.extend是jquery提供的一个方

前端不容错过的jQuery图片滑块插件

作为前端开发者,我们会碰到很到各种各样的jQuery插件,但老实说,很少有自己写的.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQuery多图并列焦点图插件 今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示.和其他jQuery焦点图一样,这款焦点图插件的图片下方也有一排小按钮,可以任意切换图片.另外,每张图片也都有文字描述

前端开发不容错过的jQuery图片滑块插件(转)

作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQuery多图并列焦点图插件 这是一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示.和其他jQuery焦点图一样,这款焦点图插件的图片下方也有一排小按钮,可以任意切换图片.另外,每张图片也都有文字描述. 在线演示  /  源码下载 2.j

10款web前端优秀的jQuery特效插件

1.jQuery鼠标悬停文字渐隐渐现动画效果 这是一款基于JQuery实现的鼠标悬停文字渐隐渐现动画效果源码,是一款鼠标悬停后图片渐渐有一层透明遮罩层,同时说明文字从左侧滑入,鼠标离开后文字从右侧滑出,整体效果美观自然,用户体验较好.是一款比较优秀的特效源码.该源码兼容目前最新的各类主流浏览器. 在线演示 源码下载 2.jquery基于small2big实现的图片突出显示特效 这是一款基于Jquery的small2big插件实现的图片突出显示特效源码,鼠标滑过图片可实现图片的放大突出显示效果,有

10款web前端基于精美jQuery插件及源码

1.使用 SVG 制作单选和多选框动画 通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中的时候执行 SVG 动画. 在线演示 源码下载 2.PHP+jQuery+Ajax多图片上传 今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页