标签：style blog color io 使用 java ar div sp
接触jQuery很久了，深深的被其强大的选择器和众多的插件特效所折服，而在实际的项目中为了项目进度，常常都是从网上搜索各种急需的插件。
突然有一天，静静的坐下来，沉淀知识时总是没有太多的惊喜。尤其是提到插件的使用，总是一味的照搬照抄必然得不到成长。避开项目业务中可能会遇到复杂繁琐的项目功能不说，许多简单的功能完全可以自己封装成一个插件，毕竟自己动手产生的乐趣才最有意义。
对于这次jQuery插件的编写，我打算用三篇随笔来完成，尽量总结到方方面面，还希望各位多多拍砖（各位拍砖也是我学习的动力^_^）
首先是开始学习jQuery插件的开发，总结了前人的经验以及网上搜索到的各种教程，下面便是我对插件开发的体会：
1、插件开发遵循常规的框架
这都是布道者们勤劳、智慧的结晶，使用一套经过验证的框架足可避免出现各种奇葩bug，也让二次开发变得更加容易（这会在第三篇随笔中有体现），而我们需要做的便是能在开发工程中体会框架设计中的智慧。就像一个刚建好的空房间，我们只要知道房间的构造、承重墙、管道布线，掌握之后就是开始合理运用其框架开始精装修了。。。
2、插件代码全部放在闭包里面
用了许多插件，大多都能看到这样一段相同的代码
(function($){
//input your code
})(jQuery);
上面定义了一个jQuery函数，形参是$，函数定义完成后，把jQuery这个实参传递进去，立即调用执行。
这样的好处是，我们在写jQuery插件时，也可以使用这个$别名，而不会与prototype引起冲突。
同时插件里的代码只为自己的插件服务，闭包外的方法则不能调用。
优点：
a)避免全局依赖；
b)避免第三方破坏；
c)兼容jQuery操作符‘$‘和‘jQuery‘
3、提供插件默认选项
插件默认的设置很有必要，而让开发者能够自定义设置，只需要通过jQuery的extend 功能来设置这些选项。
var options = $.extend(defaults,options);
当开发者在调用的时候写了新的参数，插件就会调用新的参数；如果没有写，就会用默认的参数。
4、区别jQuery.fn.extend(object)和jQuery.extend(object)
jQuery为开发插件提供了两个方法：
jQuery.fn.extend(object);//对jQuery.prototype进行扩展，给jQuery对象添加方法（成员函数）
jQuery.extend(object);//扩展jQuery类本身，为类添加新的静态方法
（由于初次尝试自己开发jQuery插件，总结会有许多不足和失误，但随笔内容会随着个人的积累而不断修改更新。还是那句话，欢迎各位拍砖^_^）
-------------------------------------------------------------------------^_^我是分割线----------------------------------------------------------------------
接下来就是开始这次插件开发的设计，这也是非常重要的第一步。确定好合适的功能，对于初学不是很难，但也不能简单到一无是、处派不上场，那也不是我们学习的目的。
最终确定的功能是：
a)图片能每隔一个确定的时间就滚动交替；
b)图片交换，对应的图片标记或编号能及时改变；
c)默认图片从右向左滚动，开发者可自定义滚动方向：左->右、上->下、下->上。
带扩展功能：
a)添加touch事件；
b)点击图片对应标记或编号时，能对应展示相应的图片；
c)添加“上一张”、“下一张”按钮
-----------------------------------------------------------^_^分割线君----------------------------------------------------------------------
有这个写插件的想法也是不久前写的一个图片交换效果产生的（话说，那效果写出来，感觉就是一个字---“真搓”），把代码贴出来，刺激一下自己（求拍砖）：
1 <script type="text/javascript"> 2 $("#rotate .pack .left").hover( 3 function(){ 4 $("#rotate .pack .left .prot").show(); 5 }, 6 function(){ 7 $("#rotate .pack .left .prot").hide(); 8 } 9 ); 10 11 $("#rotate .pack .right").hover( 12 function(){ 13 $("#rotate .pack .right .next").show(); 14 }, 15 function(){ 16 $("#rotate .pack .right .next").hide(); 17 } 18 ); 19 20 $("#rotate .pack .left").click( 21 function(){ 22 var id = $("#rotate .pack img").attr("id"); 23 var n = parseInt(id.substr(1)); 24 n = n == 0 ? 4 : (n-1); 25 $("#rotate .pack img").attr({"src":Imgs[n],"id":"p"+n}); 26 $("#rotate .pack .rotate_btn .btns").css({"background-color":"yellow","color":"#000"}); 27 $("#rotate .pack .rotate_btn .btn_"+n).css({"background-color":"red","color":"#fff"}); 28 } 29 ); 30 31 $("#rotate .pack .right").click( 32 function(){ 33 var id = $("#rotate .pack img").attr("id"); 34 var n = parseInt(id.substr(1)); 35 n = n == 4 ? 0 : (n+1); 36 $("#rotate .pack img").attr({"src":Imgs[n],"id":"p"+n}); 37 $("#rotate .pack .rotate_btn .btns").css({"background-color":"yellow","color":"#000"}); 38 $("#rotate .pack .rotate_btn .btn_"+n).css({"background-color":"red","color":"#fff"}); 39 } 40 ); 41 42 $("#rotate .pack .rotate_btn .btns").click( 43 function(){ 44 var text = parseInt($(this).text())-1; 45 $("#rotate .pack img").attr({"src":Imgs[text],"id":"p"+text}); 46 $("#rotate .pack .rotate_btn .btns").css({"background-color":"yellow","color":"#000"}); 47 $("#rotate .pack .rotate_btn .btn_"+text).css({"background-color":"red","color":"#fff"}); 48 } 49 ); 50 </script>
虽然能实现点击按钮切换图片，最然能点击标号切换图片，最然。。。。。但是，哎，这代码搓的！！！太简单了，html代码就不贴了，我去反思，脑补下。
下一篇随文将推到之前的一切，将确定的功能封装成一个jQuery插件。
标签：style blog color io 使用 java ar div sp
原文地址：http://www.cnblogs.com/bikeway/p/3971561.html
