jQuery插件开发初步练习

看了下，前面的bootstrap的carousel.js源码分析好像还没有补充完整，现在想想算了。每月计划还是要做的，carousel.js（轮播）虽然没说完，但我知道自己底细，对bootstrap插件源码不够了解，对jQuery插件缺乏必要认知。所以5月计划便是捣鼓jQuery插件开发，然后进一步完成对bootstrap框架的探索以及利用，对待知识就是要挖掘他的闪光点，学会它。

bootstrap拥有相当大的局限性，说真的。两个月过去，从一头雾水到能够使用API，使用基础less，移动端布局等等，都是依靠bootstrap来学会，不得不说这是个好框架！你想想看，我从移动端开始搜索百度，谷歌，然后到rem，然后得到bootstrap，然后慢慢会使用，然后慢慢发现bootstrap主题样式什么的都是固定好的，而且还是西方那一套扁平化，很多外包公司压根不会采用这个样式。可能或许大概后台会用，但这就是问题，一股脑引用bootstrap.min.css就是最大错误！

不彻底的css重置（可能是我个人项目经验不够），大量代码覆盖，你想要重新定义样式，你会发现你想要写更多样式！

如果引用bootstrap.min.js感觉好鸡肋，食之无味弃之可惜的赶脚！它里面的轮播，导航栏，模态框等等！当真应了网友评论的那样，bootstrap设计初衷就不是给前端工程师用的，给那些需要模板的人用的，拿来就用！之前分析过它的几个独立插件，全是一个套路，功能单一，动态效果单一，而且还把js调用那一块直接封装好，连js调用代码都不用。有木有很坑的，是的，太多的坑！

不过我还是从中得到很多知识，处于对jQuery插件开发的欠缺，加紧练习jQuery插件的封装。目的依旧，彻底搞懂bootstrap框架，想着中高级web前端迈进。

从网络上搜索得到，jQuery插件开发有三种方式：

1. 通过$.extend()来扩展jQuery
2. 通过$.fn 向jQuery添加新的方法
3. 通过$.widget()应用jQuery UI的部件工厂方式创建

但有个前提，jQuery的传参，既然是jQuery插件就得使用jQuery是不？来来来，给它加个壳！

(function ($) {
    //你自己的插件代码
})(jQuery);

简单说下三种方法的区别：

第一种仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。是的，你不能使用jQuery选择器，当然很多人说不是引用的jQuery吗？那个不是同个意思，自己百度去。

第二种利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。

第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心，这里不细说。

+function($){
	$.extend({
		sayhello:function(){
			console.log('hello word!');
		}
	});

}(jQuery);

第一种因为是扩展jQuery的静态类$上，所以使用时候

$.sayhello();

第二种方式，通过增加扩展jQuery原型，$.fn指代的是jQuery的原型链。

(function ($) {
    $.fn.myPlugin = function () {
        //你自己的插件代码
    };
})(jQuery);

第二种方式涉及到javascript的this指代问题，在JavaScript中，this是当前执行函数的上下文。在jQuery插件中，他指代的就是jQuery对象本身。但这里特别说名，如果有回调函数，那这时候的this则表示DOM元素

(function ($) {
    $.fn.myPlugin = function () {

        //此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
        //$(this)等同于 $($('#element'));

        this.fadeIn('normal', function () {

            //此处callback函数中this关键字代表一个DOM元素

        });

    };
})(jQuery);

$('#element').myPlugin();

上面内容从jQuery中文网上得到，是不是有点理解了。插件中，this就代表jQuery，你可以this.show()等等jQuery内置API，但就像上面例子那样，如果包含回调函数callback，那么this就会发生变化，指代原生DOM元素

$.widget( "custom.superDialog", {} );

上面是通过部件库（Widget Factory）创建小部件是通过向 $.widget() 传递小部件名称和一个原型对象来完成的。下面的实例是在 "custom" 命名空间中创建一个 "superDialog" 小部件。

好了，以上是简单的jQuery开发方式，接下来一个月估计都要琢磨jQuery插件开发，然后再回过头来对bootstrap的js插件进行全面的研究。加油！