jq插件写法

现在作web开发，jQuery 几乎是必不可少的，同时jquery插件也是不断的被你们所熟知，以及运用。最近在搞这个jquery插件，发现它的牛逼之处，因此讲一讲jQuery插件的写法以及使用 

(function($){
    $.fn.extend({
        color:function(options){
            var defaults = {color:'blue', size: "30px"};
            options = $.extend({},defaults, options);
            return $(this).each(function(){
                $(this).css({'color':options.color});
                $(this).css({'font-size':options.size});
            });
        }
    });

})(window.jQuery);//此处也可写成(jQuery);

这里你们也许会抱怨，这根本看不懂，别急，看下去会让你明白

 

首先能够告诉你们，这个插件实现的功能是对一个标签的字体大小以及颜色设置。

下图是显示在网页上的代码：

如上的代码获得的效果以下图：

如此，你们不要疑惑，就将color()这个函数当作系统给你提供的函数便可。

在这里首先要和你们讲解自执行的匿名函数/闭包的运用

1.解释什么事闭包，下面这种形式的就是自执行的匿名函数/闭包

 

(function($){
    //Code
})();

 

 

2.坑爹的报错代码

 

//这个代码放在javascript代码中不会报错
(function($){
    //Code
})();
//而下面的代码会报错
function($){
    //Code
}();

3.解释表达式和函数声明

 

表达式：

 

(function($){
    //Code
})

 

 

函数声明：

 

function($){
    //Code
}

如此你们能够大概猜测到对象的使用方法，首先是要建立一个对象:new C()

 

其中C就是至关于(function($){//Code})，()即是后面的()了。

以上是一种理解方式， 实际状况以下：

js在"预编译"阶段, 会解释函数声明, 但却会忽略表达式。

 

当JavaScript执行到function() {//Code}()d时因为function() {//code}在"预编译"阶段已经被解释过,javascript会跳过function(){//code}试图去执行()故会报错;
当javascript执行到(function {// Code})()时因为(function {// code})是表达式, javascript会去对它求解获得返回值, 因为返回值是一 个函数, 故而遇到()时, 便会被执行。

另外,函数转换为表达式的方法并不必定要靠分组操做符()咱们还能够用!操做符等操做符，只要是表达一个表达式的便可。

 

如此你们大概知道插件得书写为何要加个().

而后就是写插件得步骤了：基本格式以下

 

(function($){
    //插件书写部分
})(jQuery);

接下来有两种插件书写的形式

 

一种是一个函数：$.fn.函数名 = function([options]){}

另一种天然是能够多个函数：$.fn.extend({函数名:function(){}});

第一种真能一次搞一个函数，而第二个能够一次声明多个函数

接下来说解$.extend()的用法

有两种

一种$.extend(defaults, options);

其中defaults为默认设置，options为传入的参数

这个函数的做用是用后面的参数与第一个参数进行合并而后返回它的值

代码实现以下：

用chrome显示的效果以下：

 

看到如上的结果，你们可能已经知道了，defaults被改变了，居然变成了options的值，同时你们能够注意到$.extend(defaults, options)返回值是被覆盖的值

这就形成了通常的插件不会用$.extend(defaults, options)缘由就是他改变了默认的值

接下来就是另一种方法

$.extend({},defaults, options);

效果以下图：

你们能够注意到用这个函数的话不会致使defaults被替代，因此通常的插件书写是用$.extend({}, defaults, options);

至于插件得调用，很简单

$("").函数名

便可。

接下是讲解一下书写插件时的一些细节部分

看以下代码

这里的return有什么做用

对于通常的插件代码，若是没有加一个return 回到一个问题：那就是只能用一次

$(".afters").color().css({})这就会报错，由于没有返回自己这个对象，因此使用完color()是没有返回值得话，那么css调用时是undefined，因此会报错，所以当咱们写完插件代码时，最后要返回jQuery对象自己，不然就只能调用一次就不能调用了。

 

若是讲解有误，请你们进行纠正。