使用jq把js代码封装一个自己的插件

为什么要把js功能封装成插件呢？我觉得有以下几点吧

　　1、最基本的原因就是便于代码复用。

　　2、便于维护和管理。

　　3、提升自身的能力。

　　4、避免各个相同功能组件的干扰，以及一些作用域会相互影响的问题。

jq的标准封装方式

<script type="text/javascript">
    (function ($) {
        //这里放入插件代码
    })(jQuery);
</script>

这是jQuery官方的插件开发规范，这样写是作用是：

1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’

这段代码在被解析时会形同如下代码：

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

然后传参怎么搞呢，我们一个插件一般有一些必选参数或者可选参数，在我看来可选参数不过就是在插件里面给了默认值罢了。我们传的参数会覆盖插件中的默认参数，可以用$.extend({})覆盖

例如：

$(function ($) {
    $.fn.getMsg = function (options) {
        var defaults = {
            Event : "click",
            msg : "点击了插件!" //显示内容
        }
        var options = $.extend(defaults, options);//继承默认参数
        var $this = $(this); //当然响应事件对象
        //绑定事件
        $this.on(options.Event, function (e) {
            alert(options.msg);
        });
    }
});

调用方法

$(function () {
    //绑定元素事件
    $("#test").插件名称({
        Event : "click", //触发响应事件会覆盖上面defaults里面的Event
        msg : "插件!" //显示内容
    });
});

html

<button id = "test" >插件调用</button >

知识扩展

官方提供两个开发插件的方法：

• $.extend(object);为扩展jQuery类本身.为类添加新的方法。
• $.fn.extend(object);给jQuery对象添加方法。

$.extend(object)：可以理解为静态方法，不需要使用到页面的dom元素，直接使用（$.插件名(参数)）就可以调用

为jQuery类添加类方法，可以理解为添加静态方法。如$.ajiax也是一个静态方法，$.extend(object)相当于新增一个类似$.ajax这样的静态方法：

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

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

(function( $ ){
    $.fn.tooltip = function( options ) {
        //内容
    };
    //等价于
    var tooltip = {
        function(options){
        }
    };
    $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );　 

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

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