JavaScript插件开发

当JS代码达到一定的规模或者预期中js代码会很庞大复杂的时候，就需要考虑将js代码做成插件，

把代码模块化封装。这样做的目的和普通编程的OOP其实是一个道理，就是封装和继承多态。

我记得ecma7中已经明确支持面对对象了。

规范：
1.插件的推荐命名方法为：jquery.[插件名].js
2.所有的对象方法都应当附加到JQuery.fn对象上面，而所有的全局函数都应当附加到JQuery对象本身上。
3.在插件内部，this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样，内部的this指向的是DOM元素。
4.可以通过this.each 来遍历所有的元素
5.所有方法或函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题。为了更加保险写，可以在插件头部添加一个分号（；），以免他们的不规范代码给插件带来 影响。
6.插件应该返回一个JQuery对象，以便保证插件的可链式操作。
7.避免在插件内部使用$作为JQuery对象的别名，而应当使用完整的JQuery来表示。这样可以避免冲突。

普通的方式写插件

var Haorooms= function(el, opt) {
    this.$element = el,
    this.defaults = {
        'color': 'red',
        'fontSize': '12px',
        'textDecoration':'none'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定义haorooms的方法
haorooms.prototype = {
    changecss: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize,
            'textDecoration': this.options.textDecoration
        });
    }
}

这是普通的oop思想的方法写的插件，使用到了prototype 原型

jQuery下的插件编写

添加全局的方法

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

 

JQuery提供了2个用于扩展JQuery功能的方法。即：
1.jQuery.fn.extend()
2.jQuery.extend()

jQuery.extend

先来说说jQuery.extend这个神奇的函数

它的扩展方法原型如下：
extend(dest,src1,src2,src3...);

 

含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。
如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)

 

其实这个也很好理解，就是构造一个空的对象来保存这个修改，但返回值依旧是合并的结果

当然 这个dest参数也可以忽略，但此时只能有一个参数。并且方法的动作发生改变

例如：$.extend({ hello:function(){alert('hello');} });

执行后hello方法被合并到jquery的全局对象中。

 

 

 

$.extend({net:{}});

在jquery全局对象中扩展一个net命名空间

$.extend($.net,{ hello:function(){alert('hello');} })

将hello方法扩展到之前扩展的Jquery的net命名空间中去

 

 

第三个原型

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致

这个原型挺有用的，有时候想要复制一个object，但这个object是动态的，但我需要所有的不同状态下的这个object对象。

普通的复制都只是引用对象。虽然自己也可以写个递归复制它的属性。。。。但有了这个方法就简单多了

OK ，jQuery.extend差不多就先说这些。

 

 

使用命名空间

为了避免自己写的函数或者对象名称和jquery原有的产生冲突，建议将所有的代码写到自己的命名空间下面

jQuery.myPlugin = {
        foo:function() {
        alert('This is a test. This is only a test.');
         },
        bar:function(param) {
          alert('This function takes a parameter, which is "' + param + '".');
          }
   };

调用 ：
$.myPlugin.foo();
$.myPlugin.bar('baz');

第一个Jquery插件

(function ($) {
   $.fn.myPlugin = function () {
    this.fadeOut('normal');
};
})(jQuery);

自己写的代码放在一个闭包里面保护自己的代码

代码的使用

< /pre> 在上面编写JQuery插件需要注意的地方的第四点，写道 如果要遍历 则可以用this.each方法。 $("ID").each 可以遍历jquery对象、数组以及集合。 增强版的代码

(function ($) {
  $.fn.hoverElement = function () {
   this.each(function () {
   $(this).hover(
function () {
   $(this).addClass("Add");
  },
function () {
   $(this).removeClass("Remove");
    }
 );
 })
}
})(jQuery);

HTML代码

 

 

链式操作

举例：$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000);

那我们要怎么才能实现这种效果呢？很简单，我能只需要把对象回去就可以了。
请注意上面的第六点：插件应该返回一个JQuery对象，以便保证插件的可链式操作。

(function ($) {
$.fn.hoverElement = function () {
return this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);

代码调用方法

$(document).ready(function () {
$(".hoverText").hoverElement().css("color","yellow");
});

开发自己的插件

$.fn.YouPlugin = function (options) {...}

定义默认值

var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};

合并用户传过来的参数和默认值
var obj = $.extend(defaultVal, options);

插件代码

(function ($) {
$.fn.textHover = function (options) {//options 经常用这个表示有许多个参数。
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
　　　　　　//默认值
var obj = $.extend(defaultVal, options);
return this.each(function () {
var selObject = $(this);//获取当前对象
var oldText = selObject.text();//获取当前对象的text值
var oldBgColor = selObject.css("background-color");//获取当前对象的背景色
var oldColor = selObject.css("color");//获取当前对象的字体的颜色
selObject.hover(function () {//定义一个hover方法。
selObject.text(obj.Text);//进行赋值
selObject.css("background-color", obj.BackColor);//进行赋值
selObject.css("color", obj.ForeColor);//进行赋值
},
function () {
selObject.text(oldText);
selObject.css("background-color", oldBgColor);
selObject.css("color", oldColor);
}
);
});
}
})(jQuery);

html

 

调用方法

$(document).ready(function () {
$('#div1').textHover({
Text: 'I am going to over..',
ForeColor: 'yellow',
BackColor: 'Red'
});
$('#div2').textHover({ Text: 'I am second div...' });
});