首先,自然是要了解什么是jQuery了,jQuery是一款简洁并流行的JavaScript框架。号称“write Less,Do More
”,这里是jQuery官网:http://jquery.com/,这里主要是利用他的插件扩展机制打造自己的jQuery插件。
jQuery的插件主要分为对象级别的插件,给jQuery对象添加方法,如:$(‘元素’).append()
元素方法,还有类级别的插件,给jQuery添加新的全局函数,相当于给jQuery类本身添加方法,如:$.trim()
方法。
jQuery源码
先看下几段jQuery源码:
- // Define a local copy of jQuery
- jQuery = function( selector, context ) {
- // The jQuery object is actually just the init constructor ‘enhanced’
- // Need init if jQuery is called (just allow error to be thrown if not included)
- return new jQuery.fn.init( selector, context );
- },
jQuery实例的构造是由jQuery.fn.init
方法完成。
- jQuery.fn = jQuery.prototype = {
- // ….
- }
- init = jQuery.fn.init = function( selector, context ) {
- // …
- }
- // Give the init function the jQuery prototype for later instantiation
- init.prototype = jQuery.fn;
我们可以得到这样一层关系链:
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype;
new jQuery.fn.init() 相当于 new jQuery() ,所以可以无 new 实例化 jQuery 对象。
- jQuery.extend = jQuery.fn.extend = function() {
- // …
- }
好吧,我云里雾里了,乍一看,一样吧。好吧,这就要看this的指向者了。在 jQuery.fn.extend()
中,this 的指向是 fn 对象,由于 jQuery.fn = jQuery.prototype
,这里增加的是原型方法;在 jQuery.extend()
中,this 的指向是 jQuery 对象(或者说是 jQuery 类),所以这里扩展在 jQuery 上。
这里还是以小小遮罩类插件为例子,直接上菜吧
jQuery对象级插件
- // 添加jQuery对象级的插件,是给jQuery类添加方法
- // 调用方法:$(“#id”).函数名(参数);
- // 第一种对象方法
- $.fn.center = function() {
- // 在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,
- // 用jQuery选择器选中的元素,一般是一个jQuery包装类型的集合
- // 支持链式调用,使用 return
- return this.css(‘position’,’absolute’).css(‘top’, ( $(window).height() – this.height() ) / 2 + $(window).scrollTop() + ‘px’).css(‘left’, ( $(window).width() – this.width() ) / 2 + $(window).scrollLeft() + ‘px’);
- }
- // 第二种对象方法
- $.fn.extend({
- color: function(value) {
- return this.css(“color”,value);
- }
- });
jQuery类级别插件
- // jQuery类级别的插件,相当于添加静态方法
- // 调用方法:$.函数名(参数);
- // 第一种类方法
- $.blockUI = function() {
- $(‘<div id=“wenqy_shadelay”><div id=“wenqy_center”><span style=“background:white”>正在加载,请稍后…</span></div></div>’).css({
- position: ‘fixed’,
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- opacity: 0.6,
- background: ‘black’,
- display: ‘none’
- }).appendTo(‘body’).fadeIn(‘normal’, function() {
- $(‘#wenqy_center’).color(“red”).center();
- })
- //.click(function(event) {
- // $(this).fadeOut(‘normal’, function() {
- // $(this).remove();
- // });
- //})
- ;
- }
- // 第二种类方法
- $.extend({
- unblockUI: function() {
- $(“#wenqy_shadelay”).fadeOut(‘normal’, function() {
- $(this).remove();
- });
- }
- });
匿名函数包裹
再用匿名函数包裹下扩展方法
- // 用自调用匿名函数包裹代码,避免污染全局命名空间
- // ; 号开头,避免陷入 由于别人代码没有; 号结尾而报错无法执行插件 挖的一手好坑
- // 系统变量以参数形式传递到插件内部,避免陷入 由于别人代码可能修改系统变量而引用这些变量导致结果无法预知
- // 系统变量以局部引用 安全良构
- // 一般HTML代码里面使用双引号,而在JavaScript中多用单引号引用
- ;(function($,window,document,undefined) {
- // 这里添加刚才的扩展方法
- })(jQuery,window,document);
加载调用
再模拟测试下调用
- $(document).ready(function($) {
- $.blockUI(); // 开启遮罩
- window.setTimeout(function() {
- $.unblockUI();
- },5000); // 5s 后关闭遮罩
- // $(“p”).changeElementType(“a”);
- // $(“a”).attr(“href”,”http://wenqy.com”);
- });
Html代码
- <body>
- <p style=“float:center;text-align: center”>hello world! welcome to wenqy.com!</p>
- </body>
效果
看下效果图
前提是必须先引用jQuery代码库。然后进行扩展。不管能不能登大雅之堂,反正就是要上道。
参考:
https://github.com/chokcoco/jQuery- jQuery源码剖析
http://plugins.jquery.com/ 官网插件扩展
http://learn.jquery.com/plugins/ 官网插件学习
http://plugins.jquery.com/docs/publish/ 官网插件发布
发表评论