jquery插件编写【转载】
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了,用过的都知道。今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简单扩展Jquery对象的demo:
//sample:扩展jquery对象的方法,bold()用于加粗字体。
(function ($) {
$.fn.extend({
"bold": function () {
///<summary>
/// 加粗字体
///</summary>
return this.css({ fontWeight: "bold" });
}
});
})(jQuery);
调用方式:
这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。
一、jquery的插件机制
为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend() 方法有一个重载。
jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子:
//扩展jQuery对象本身
jQuery.extend({
"minValue": function (a, b) {
///<summary>
/// 比较两个值,返回最小值
///</summary>
return a < b ? a : b;
},
"maxValue": function (a, b) {
///<summary>
/// 比较两个值,返回最大值
///</summary>
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])
用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。
未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。
参数
deep: 可选。如果设为true,则递归合并。
target: 待修改对象。
object1: 待合并到第一个对象的对象。
objectN: 可选。待合并到第一个对象的对象。
示例1:
合并 settings 和 options,修改并返回 settings。var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
结果:settings == { validate: true, limit: 5, name: "bar" }
示例2:
合并 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" }
这个重载的方法,我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。
jQuery.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类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。
二、自执行的匿名函数/闭包
1. 什么是自执行的匿名函数?
它是指形如这样的函数: (function {// code})();
2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?
3. 分析
(1). 首先, 要清楚两者的区别: (function {// code})是表达式, function {// code}是函数声明.
(2). 其次, js"预编译"的特点: js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.
(3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;
当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.
另外, 函数转换为表达式的方法并不一定要靠分组操作符(),我们还可以用void操作符,~操作符,!操作符……
例如:
bootstrap 框架中的插件写法:
!function($){
//do something;
}(jQuery);
和
(function($){
//do something;
})(jQuery); 是一回事。
匿名函数最大的用途是创建闭包(这是JavaScript语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用。
例如:
var a=1;
(function()(){
var a=100;
})();
alert(a); //弹出 1
更多 闭包和匿名函数 可查看 Javascript的匿名函数与自执行 这篇文章。
三、一步一步封装JQuery插件
接下来我们一起来写个高亮的jqury插件
1.定一个闭包区域,防止插件"污染"
//闭包限定命名空间
(function ($) { })(window.jQuery);
2.jQuery.fn.extend(object)扩展jquery 方法,制作插件
//闭包限定命名空间
(function ($) {
$.fn.extend({
"highLight":function(options){
//do something
}
});
})(window.jQuery);
3.给插件默认参数,实现 插件的功能
//闭包限定命名空间
(function ($) {
$.fn.extend({
"highLight": function (options) {
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
this.each(function () { //这里的this 就是 jQuery对象
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
//根据参数来设置 dom的样式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
}); }
});
//默认参数
var defaluts = {
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);
到这一步,高亮插件基本功能已经具备了。调用代码如下:
$(function () {
$("p").highLight(); //调用自定义 高亮插件
});
这里只能 直接调用,不能链式调用。我们知道jQuey是可以链式调用的,就是可以在一个jQuery对象上调用多个方法,如:
$('#id').css({marginTop:'100px'}).addAttr("title","测试“);
但是我们上面的插件,就不能这样链式调用了。比如:$("p").highLight().css({marginTop:'100px'}); //将会报找不到css方法,原因在与我的自定义插件在完成功能后,没有将 jQuery对象给返回出来。接下来,return jQuery对象,让我们的插件也支持链式调用。(其实很简单,就是执行完我们插件代码的时候将jQuery对像return 出来,和上面的代码没啥区别)
//闭包限定命名空间
(function ($) {
$.fn.extend({
"highLight": function (options) {
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
//根据参数来设置 dom的样式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
}); }
});
//默认参数
var defaluts = {
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);
4.暴露公共方法 给别人来扩展你的插件(如果有需求的话)
比如的高亮插件有一个format方法来格式话高亮文本,则我们可将它写成公共的,暴露给插件使用者,不同的使用着根据自己的需求来重写该format方法,从而是高亮文本可以呈现不同的格式。
//公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果。
$.fn.highLight.format = function (str) {
return "<strong>" + str + "</strong>";
}
5.插件私有方法
有些时候,我们的插件需要一些私有方法,不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。
6.其他的一些设置,如:为你的插件加入元数据插件的支持将使其变得更强大。
完整的高亮插件代码如下:
//闭包限定命名空间
(function ($) {
$.fn.extend({
"highLight": function (options) {
//检测用户传进来的参数是否合法
if (!isValid(options))
return this;
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
//根据参数来设置 dom的样式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
//格式化高亮文本
var markup = $this.html();
markup = $.fn.highLight.format(markup);
$this.html(markup);
}); }
});
//默认参数
var defaluts = {
foreground: 'red',
background: 'yellow'
};
//公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果。
$.fn.highLight.format = function (str) {
return "<strong>" + str + "</strong>";
}
//私有方法,检测参数是否合法
function isValid(options) {
return !options || (options && typeof options === "object") ? true : false;
}
})(window.jQuery);
//调用
//调用者覆盖 插件暴露的共公方法
$.fn.highLight.format = function (txt) {
return "<em>" + txt + "</em>"
}
$(function () {
$("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
});
原文地址:http://www.cnblogs.com/joey0210/p/3408349.html#
jquery插件编写【转载】的更多相关文章
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- jQuery插件编写及链式编程模型
jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
- jQuery插件编写,
jQuery插件编写 jQuery插件 最近搞jquery插件的编写这里做下笔记 给jquery扩展的方式很多,看的我眼花缭乱 方式1 $.fun=function(){} 方式2 $.fn.fun= ...
- (转)jQuery插件编写学习+实例——无限滚动
原文地址:http://www.cnblogs.com/nuller/p/3411627.html 最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简 ...
- jQuery插件编写学习+实例——无限滚动
最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简单学习了下jQuery的插件编写,然后分享出来. 先说下基础知识,基本上分为两种,一种是对象级别的插 ...
- jQuery插件编写步骤详解
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
- jQuery插件编写学习中遇见的问题--attr prop
个人博客: https://chenjiahao.xyz 最近在学习jQuery的插件的编写,有两种方式,$.fn.extend以及$.extend,一种是作用于对象原型上,一种是直接作用于jQuer ...
- jquery插件编写模版
jquery插件是什么??这里以讨论实力方法为主,比如 $("div").pluginname({}); 他的最简单形势应该是 $.prototype.plugin = funct ...
- jQuery插件编写规范
第一种方法: 在很多基于jQuery或基于Zepto的插件中,在立即函数执行前面会加上";"这个符号. 这是为了防止前面的其他插件没有正常关闭. 在立即执行函数执行时,会一般会传入 ...
随机推荐
- @RequestParam和@ResponseBody注解的区别(转)
@RequestParam 用来处理Content-Type: 为 application/x-www-form-urlencoded编码的内容.(Http协议中,如果不指定Content-Type, ...
- Java编程基础-面向对象(上)
一.面向对象的概念 1.概念:面向对象是把解决的问题按照一定规则划分为多个独立的对象,然后通过调用对象的方法来解决问题.当然,一个应用程序会包含多个对象,通过多个对象的相互配合来实现应用程序的功能.这 ...
- Chisel语言
1 What is Chisel? Chisel(Constructing Hardware In a Scala Embedded Language)是一种嵌入在高级编程语言Scala的硬 ...
- IOS typedef 函数指针的用法
代码简化, 促进跨平台开发的目的. typedef 行为有点像 #define 宏,用其实际类型替代同义字. 不同点:typedef 在编译时被解释,因此让编译器来应付超越预处理器能力的文本替换. 用 ...
- [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法 --转
初用Yii的srbac模块.出现 Cannot read property ‘msie’ of undefined 错误.上网查询,找到如下的文章.使用文末的打补丁的方法,成功搞定.感谢. ===== ...
- 原创 :xftp SFTP子系统申请已拒绝 请确保SSH链接的SFTP子系统设置有效
在出现这个错误时候 如果你的远程连接没有问题 那么就执行下面的命令 service sshd restart 搞定!
- fun下载内容批量收集
1.download title and url #!/usr/bin/env python #-*- coding:utf-8 -*- import re, urllib2,threading de ...
- WPF中窗体调用窗体
在WPF中有时候我们需要在一个窗体中去调用另外的一个窗体,下面给出调用方法. 下面实现在MainWindow中通过点击一个按钮调用另外的一个窗口. 首先创建你要调用的另外一个窗口:点击最上面的项目 ...
- softmax_loss的归一化问题
cnn网络中,网络更新一次参数是根据loss反向传播来,这个loss是一个batch_size的图像前向传播得到的loss和除以batch_size大小得到的平均loss. softmax_loss前 ...
- 用python编写九九乘法表
for i in range(1,10): for j in range(1,10): if j >i: print(end='') else: print(j,'*',i,'=',i*j,en ...