$.fn.extend()和$.extend()的区别以及JQ插件开发

目录：

  1.  $.fn.extend()和$.extend()的区别

  2. 插件开发的实例

  3.插件开发一步一步完美

        3.1 满足链式调用

        3.2 防止$污染

        3.3  $.fn.extend()定义插件的使用

  1.  $.fn.extend()和$.extend()的区别

        描述：我们可以把jQuery看成一个对象来理解 ，其实   $.extend()就是让我们可以为JQuery类本身添加静态方法，而 $.fn.extend() 其中 $.fn=    jQuery.fn = jQuery.prototype  ( prototype  属性使我们有能力向对象添加属性和方法 ) 其实是让我们可以为  JQuery的类实例添加方法 ，比如：var obj=$("#btn")  表示一个jQuery获取的实际对象实例，这个时候 obj就可以调用 $.fn.extend()实现的方法 。

        ps：用Java类的思想来理解就是， $.fn.extend()实现的非静态方法，必须要有对象实例才能调用；而 $.extend()实现的是静态方法，在类初始化的时候就以及调用了。

        so:  $.fn.extend()实用于定义插件， $.extend()实用于扩展全局通用的JQuery函数，应用于全局。

2. 插件开发的实例

   2.1)插件代码：

1. /**
2. * Created by Andy Lau on 2017/8/7.
3. */
4. (function($) {
5. $.fn.btnStyle = function (options) {
6. var defOption = {
7. "backgroundColor": "#000",
8. "fontSize": 14,
9. "color": "#fff",
10. "border": "none",
11. "borderRadius": "5px",
12. "width": "120px",
13. "height": "48px",
14. "textAlign": "center",
15. "lineHeight": "48px"
16. };
18. //如果用户输入参数为空，我们添加默认值
19. $.each(defOption, function (k, v) {
20. if (options[k] == null) {
21. options[k] = v;
22. }
23. });
25. //设置按钮颜色
26. this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
28. return this;
31. };
32. })(jQuery);

    2.2)插件的使用

2. charset="utf-8">
5. type="application/javascript" src="jquery-3.2.1.js">
6. type="application/javascript" src="plugin.js">
11. style="width: 100%;margin: 60px auto 0;padding-left: 60px">
12. class="custom-btn">按钮

    2.3)实现效果

  3.插件开发一步一步完美

        3.1 满足链式调用

              什么是链式调用呢，比如我们前面实例实例中的代码 

1. this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px")

            因为有时候我们在定义插件以后，开发者可能需要添加其他的jq方法，如何能实现开发者链式添加就很方便了，比如代码如下：

      

        我们还想添加一个class类或者其他操作，开发者就可以x像上面那样使用

       

        3.2 防止$符号污染

             $符号污染的关键点在于作用域的问题，其实一开始那个插件我们可以这么些：

1. $.fn.btnStyle = function (options) {
2. var defOption = {
3. "backgroundColor": "#000",
4. "fontSize": 14,
5. "color": "#fff",
6. "border": "none",
7. "borderRadius": "5px",
8. "width": "120px",
9. "height": "48px",
10. "textAlign": "center",
11. "lineHeight": "48px"
12. };
14. //如果用户输入参数为空，我们添加默认值
15. $.each(defOption, function (k, v) {
16. if (options[k] == null) {
17. options[k] = v;
18. }
19. });
21. //设置按钮颜色
22. this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
24. return this;
27. };

    上面这样写插件的问题在于$符号没有局限于本插件中，可能你的工程下还引用了其他的jq插件，这个时候就有可能影响该插件中的$符号的使用，如果不是很理解"作用域"，可以单独去学习了解一下。

         3.3 $.fn.extend()定义插件的使用

       前面我们使用的是  $.fn.方法名=function(params) 来定义插件,他的局限在于只能定义一个方法，但是我们一开始是说用 $.fn.extend()来定义插件方法的，下面就是用这种形式来定义的，你可以看见他的优势在于你可以在内部定义多个方法（ 注意：方法用"，" 分割 ）。

        

1. (function ($) {
2. $.fn.extend({
4. //方法一
5. btnStyle:function (options) {
6. var defOption = {
7. "backgroundColor": "#000",
8. "fontSize": 14,
9. "color": "#fff",
10. "border": "none",
11. "borderRadius": "5px",
12. "width": "120px",
13. "height": "48px",
14. "textAlign": "center",
15. "lineHeight": "48px"
16. };
18. //如果用户输入参数为空，我们添加默认值
19. $.each(defOption, function (k, v) {
20. if (options[k] == null) {
21. options[k] = v;
22. }
23. });
25. //设置按钮颜色
26. this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
28. return this;
29. },
31. //方法二
32. newMethod:function () {
34. }
35. })
36. })(jQuery);

    其实你还可以用对象的概念来设计你的插件比如像下面这样：

1. (function ($) {
2. $.fn.extend({
3. initBtn:function(opt) {
5. //判断传入参数类型是否为object类型
6. if (typeof opt != "object") {
7. alert('参数错误!');
8. return;
9. }
11. //判断是否和button设置了id
12. var id = $(this).attr("id");
13. if(id==null||id==""){
14. alert("要设定一个id!");
15. }
17. //将默认参数和传入参数合并，没有设定的参数以默认值为标准
18. $.each(btnTool.getDefaultData(id), function (key, value) {
19. if (opt[key] == null) {
20. opt[key] = value;
21. }
22. });
24. //设置button的样式
25. btnTool.btnStyle(opt)
26. }
27. });
28. })(jQuery);
31. /*
32. * 定义一个btnTool的类
33. * 其中定义getDefaultData(id)和btnStyle(options)两个方法
34. * */
35. var btnTool={
37. "getDefaultData":function (id) {
38. var defOption = {
39. "obj":id,
40. "backgroundColor": "#000",
41. "fontSize": 14,
42. "color": "#fff",
43. "border": "none",
44. "borderRadius": "5px",
45. "width": "120px",
46. "height": "48px",
47. "textAlign": "center",
48. "lineHeight": "48px"
49. };
51. return defOption;
52. },
54. "btnStyle":function (options) {
56. //设置按钮颜色
57. $("#"+options.obj).css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
59. return this;
60. }
61. };

    调用方式类似，代码如下：

1. <script>
3. $("#customBtn").initBtn(
4. {
5. "backgroundColor":"#6f00d2",
6. "color":"yellow"
7. });
9. script>