jQuery 学习第七课 扩展jQuery的功能 插件开发
jQuery的主体如下:
(function(){ ……})();
对于Javascript基础不太好好的人来说比较奇怪。实际上，这个表达式声明了一个匿名函数（第一个括号），然后再执行它（第二个括号）。在这个函数中，完成了jQuery一系列方法和对象的定义。第24行很关键，
代码如下:
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}
在这里，定义了十分强大的$函数。$其实是jQuery的一个别名。jQuery才是“正宗”的jQuery函数，$的定义只是为了减少程序员的打字量。$很容易和其他库冲突，例如著名的prototype库也使用了这个名字。不过jQuery和其他库冲突的机会就少多了，因此使用jQuery 要比$安全的多。下面再说冲突的问题。再看return的对象fn的定义，第35行
代码如下:
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { …… }, ……
};
很显然fn只是一个jQuery的原型的简写而已。其中定义了一个init函数。实际上，init充当的是jQuery的构造函数的角色。当我们使用var i=$(‘selector')这样的代码的时候，可以发现变量i被jQuery包裹起来了，也就是i带上了jQuery.fn的方法。很明显，i的prototype被指向了jQuery.fn。再Javascript的世界里，可以说，i是jQuery的一个实例，你尝试下 i instanceof jQuery,返回的是true。然而，这里并没有用 i=new $(selector); 我估计，$是如此常用的一个函数，如果每次都要使用new来构造一个对象的话，那也太麻烦了，这就是init存在的理由，$本身被定义为一个很简单的函数，它内部仅有一行代码，返回一个init对象。我们每调用一次$(selector)方法，都返回一个jQuery对象。有点工厂模式的味道。当然，如果你对Javascript比较熟悉，就会知道这样是不够的，我们需要把init的prototype设为jQuery.fn，代码541行：
jQuery.fn.init.prototype = jQuery.fn;
到540行为止，都是定义的jQuery的原型对象，用OO语言的话说，相当于实例方法，从540行开始，定义了一系列jQuery的方法，相当于静态方法。至此，抛开方法的具体实现不谈（有些实在是太困难了），jQuery的结构基本上是明了的了。下面开始介绍扩展。
扩展jQuery首先要注意的就是避免命名冲突，尤其是抢手的$。考虑周到的jQuery设计了一个jQuery.noConflict()方法，使得jQuery可以拱手让出$符号，避免和其他库冲突，而程序员可以使用完整的符号jQuery来调用jQuery提供的方法。noConflict()的实现简单而巧妙，顺便看一下，首先在第21行，
// Map over the $ in case of overwrite
_$ = window.$,jQuery首先记录下windows.$，注意这行代码的运行时间非常早，在jQuery任何函数执行之前就会被执行。当然，这里的_$也有冲突的可能，不过概率是在是太小了，谁会用这么诡异的名字作为关键的变量呢。此时如果$已经被其他库占用，它的值会保留在_$中，在任何时候，只要调用jQuery.noConflict方法，619行，其代码如下：
代码如下:
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
这样，$就又还回去了。
作为插件开发者，我们无法保证$是否被拱手相让，最保险的是调用jQuery方法，然而有一个技巧可以保留简单的$而不影响其他部分，那就是:
代码如下:
(function($){
// plugin code goes here, you can use $ safely.
})(jQuery);
关于插件的js文件的命名，一般是jquery.pluginname.js。
要扩展jQuery工具函数（静态函数）是很容易的，下面一个例子实现一个将数字扩展成固定位数的字符串的函数。
代码如下:
(function($) {
$.toFixedWidth = function(value, length, fill) {
var res = value.toString();
if (!fill) fill = 0;
var padding = length - res.length;
if (padding < 0) {
res = res.substr(-padding);
} else {
for (var n = 0; n < padding; n++)
res = fill + res;
}
return res;
}
})(jQuery);
要编写包装集的方法也同样容易，下面实现一个使表单元素只读的方法：
代码如下:
$.fn.setReadOnly = function(readonly) {
return this.find('input:text').attr('readonly', readonly).css('opacity', readonly ? 0.5 : 1.0);
}
下面编写一个小页面测试下，这个页面模拟的是订单提交页面，如果用户需要发票，需要填写发票信息，否则不能填写发票信息。
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Extension</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.yinzixin.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#OrderID').val($.toFixedWidth('123', 8));
$('#InvoiceRequired').click(function() {
$('.InvoiceInfo').setReadOnly(!this.checked);
});
$('.InvoiceInfo').setReadOnly(false);
}
);
</script>
</head>
<body>
<form>
Order ID:<input type="text" id="OrderID" /> <br />
<input type="checkbox" id="InvoiceRequired" />Invoice Required<br />
<div class="InvoiceInfo">
Inovice Tilte:<input type="text" id="Text1" />
Invoice Content:<input type="text" id="Text2" />
</div>
<input type="button" value="Submit" />
</form>
</body>
</html>
相关推荐
-
jQuery插件开发的五种形态小结
关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出来,帮助那些和我一样曾经遇到过同样问题的人. 我要做什么 我想要得到的javascript 插件应该会有以下几个特征 代码相对独立 链式操作 插件可配置 有可操作的方法,插件的生命周期可控制 配置可被缓存 可扩展 无冲突处理 事件代理,动态初始化 * 以下的代码均假设存在 jQuery 插件的第一形
-
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发
-
老司机带你解读jQuery插件开发流程
jquery插件开发模式 jquery插件一般有三种开发方式: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍.第二种则是一般插件开发用到的方式,本文着重讲讲第二种. 插件开发 第二种插件开发方式一般是如下定义 $.fn.pluginName = function() { //your
-
跟我一起学JQuery插件开发
在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 如果对E文好的同学 ,可以看上面的连接.现在我把上面网站的及结合自己的想法写这篇文章.希望能得到大牛们的支持和谅解...大鸟飞过...欢迎拍装.来源: [1]How to write plugin in Jquery. [2]锋利的JQuery 书 [3]RascallySnake的JQuery.extend()详解一.介绍 插件编写的目的是给已经有的一系列方法或函数做一个封装
-
jQuery插件开发详细教程
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 一.入门 编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: 复制代码 代码如下: jQuery.fn.myPlugin = function(){ //你自己的插件代码 }; 用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他JavaScript库冲突,我们最好将jQuery传递
-
跟我一起学写jQuery插件开发方法（附完整实例及下载）
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:"嗨,美女,用这个吧.这是我写的一个jQuery插件."我想基本上你的人生大事就能很快解决. 先想好做个什么功能 这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还
-
jQuery 插件开发 其实很简单
经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧. [基础] a)样式 很多人会认为样式是个很复杂的东西,需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI,抛开图片设计不说,其实css也就是那么些属性:position,margin,padding,width,height,left,top,float,border,background... UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调.举个简单的例子,一个简单的页面,
-
jquery插件开发方法(初学者)
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. 复制代码 代码如下: jQuery.fn = jQuery.prototype = { init: function( sel
-
基于Jquery插件开发之图片放大镜效果(仿淘宝)
需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p
-
jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 复制代码 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 复制代码 代码如下: var i = $.add(3,2); var j