关于jQuery插件写法的记录

这两天，前端请假了，把活干完后，看了下js代码，发现有许多$.extend这样的写法，以前也发现过，但没细究。由于在上家公司，js大多是自己写的，为此在项目结束后还写了篇博客总结下学到的js相关技巧，到了现在这家，前端技术甩上家公司好几条大街，因此相关的js就没怎么写，也就落下来了。正好，今天有空，顺着代码看了下来，不明白的在网上搜了下，明白了其中的写法及相关原理，这里便简单记录下，一来锻炼下表达能力，二来是好记性不如烂笔头嘛。

jQuery插件的开发分为两种：

1、类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。

2、对象级别的插件开发，即给jQuery对象添加方法。

与之相对应的提供了两种扩展JQuery功能的方法

1、jQuery.fn.extend()，为扩展jQuery类本身，为类添加新的方法。

2、jQuery.extend() ，给jQuery对象添加方法。 扩展已经有的object的对象

编写jQuery插件时，一定要注意以下列出的地方

1、插件的推荐命名方法为：jquery.[插件名].js

2、所有的对象方法都应当附加到JQuery.fn对象上面，而所有的全局函数都应当附加到JQuery对象本身上。

3、在插件内部，this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样，内部的this指向的是DOM元素。

4、可以通过this.each 来遍历所有的元素

5、所有方法或函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题。为了更加保险写，可以在插件头部添加一个分号（；），以免他们的不规范代码给插件带来 影响。

6、插件应该返回一个JQuery对象，以便保证插件的可链式操作。

7、避免在插件内部使用$作为JQuery对象的别名，而应当使用完整的JQuery来表示。这样可以避免冲突。

这里主要针对$.extend和$.fn.extend这两种方法作说明

jQuery.extend(dest, src1, src2, src3)，它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest对象；extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src

合并到调用extend方法的全局对象中去。

eg1

var test = $.extend({},{name:'molaifeng', age:27});
console.log(test.name, test.age); // molaifeng 27

eg2

// 就是将hello方法合并到jquery的全局对象中
$.extend({hello: function () {console.log('Hello World!')}});
$.hello();// Hello World

eg3

// true代表对象深度拷贝
var obj = $.extend(true, 
{name:'molaifeng', age:27 ,detail:{height:165, weight:120, sex: 'man'}}, 
{name:'jianyiqingfeng', age:28, detail:{height:170, weight:120}});
console.log(obj.detail.sex); // man

// false代表后面的对象完全覆盖前面的
var obj = $.extend(false, 
{name:'molaifeng', age:27 ,detail:{height:165, weight:120, sex: 'man'}}, 
{name:'jianyiqingfeng', age:28, detail:{height:170, weight:120}});
console.log(obj.detail.man); // undefined

jQuery.fn.extend(object)，用来扩充 jQuery 对象，查看源码可以看出jQuery.fn = jQuery.prototype，这个方法就是在jQuery对象的原型上扩展方法（通常用来***插件）。

eg4

// myPlugin.js
/*(function ($) {
    $.fn.myPlugin = function () {
        this.fadeOut('normal');
    }
})(jQuery)*/
(function ($) {
    $.fn.extend({
        myPlugin: function () {
            this.fadeOut('normal');// 这里的this指的是jQuery对象，而非DOM对象，一定要牢记
        }
    });
})(jQuery) // 两种写法皆可以

ok，插件的写法就简单的介绍到这，具体的应用，如果有需要，就会更新的。

具体的可以参考jQuery插件开发全解析