jquery開發插件教程

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend();

jQuery.extend();

虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。

jQuery便是一个封装得非常好的类，比如我们用 语句　$("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object);　为jQuery类添加类方法，可以理解为添加静态方法。如：

jQuery.extend({


min: function(a, b) { return a < b ? a : b; },


max: function(a, b) { return a > b ? a : b; }


});

jQuery.min(2,3); //  2


jQuery.max(4,5); //  5


ObjectjQuery.extend( 
target, object1, [objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象

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" }

 

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({          
     alertWhileClick:function() {            
           $(this).click(function(){                 
                  alert($(this).val());           
            });           
      }       
});       
$("#input1").alertWhileClick(); // 页面上为：    

$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

 

jQuery插件开发模式

1. 使用闭包：

(function($) {
  // Code goes here
})(jQuery);

这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？

a) 避免全局依赖。

b) 避免第三方破坏。

c) 兼容jQuery操作符'$'和'jQuery '

我们知道这段代码在被解析时会形同如下代码：

var jq = function($) {
  // Code goes here
};
jq(jQuery);

这样效果就一目了然了。

(function ($) {

    $.DragField = function (arg) {

        var name = "你好";     //这个是私有变量，外部无法访问

        this.testFun = function () {     //this.testFun方法，加上了this，就是公有方法了，外部可以访问。

            alert(arg.title + "," + name);

        };

    };

})(jQuery);

使用方法：

var a = new $.DragField({ title: "Hi" });

var b = new $.DragField({ title: "Hello" });

a.testFun();

b.testFun();

 

通过$.extend()来扩展jQuery

而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。

所以我们调用通过$.extend()添加的函 数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。请看下面的 例子。

$.extend({

  sayHello: function(name) {

    console.log('Hello,' + (name ? name : 'Dude') + '!');

  }

})

$.sayHello(); //调用

$.sayHello('Wayou'); //带参调用

 

  $.extend({
                log: function (message) {
                    var now = new Date(),
                      y = now.getFullYear(),
                      m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
                      d = now.getDate(),
                      h = now.getHours(),
                      min = now.getMinutes(),
                      s = now.getSeconds(),
                      time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
                    console.log(time + ' My App: ' + message);
                }
            })
            $.log('initializing...'); //调用

jQuery.extend()在插件中友一个很重要的功能是扩展已经有的object的对象。
比如：
var newSrc=$.extend(dest,src1,src2,src3...)
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并。
示例：
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
得到的结果是：
result={name:"Jerry",age:21,sex:"Boy"}

 

通过$.fn 向jQuery添加新的方法

 $.fn.myPlugin = function() {
            //在这里面,this指的是用jQuery选中的元素
            this.css('color', 'red');
            this.each(function() {
                //对每个元素进行操作
                $(this).append(' ' + $(this).attr('href'));
            })
        }
        $(function () {
            $('a').myPlugin();调用编写的插件，类似于jquery一样
        });

            <ul>
                <li>
                    <a href="http://www.webo.com/liuwayong">我的微博</a>
                </li>
                <li>
                    <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
                </li>
                <li>
                    <a href="http://wayouliu.duapp.com/">我的小站</a>
                </li>
            </ul>

效果如下

通过$.widget()应用jQuery UI的部件工厂方式创建 

使用与所有 jQuery UI 小部件相同的抽象化来创建有状态的 jQuery 插件