2017年第一篇

2017年2月8号，今天是年后第一天班，暂无任务，闲来无事，想想去年也写过几个插件，却说不上原理。。。写过CSS，也记忆不是很清晰。。。；了解过node，socket等，也需要进一步学习。再翻翻之前写的几篇博客，竟有些庆幸，还好有部分烂笔头的记录，不然以我的脑瓜子，早抛到九霄云外去了。今年一定定期记录些，用于复习回忆。

首先，还是复习一下插件的知识！

插件开发，我们一般运用面向对象的思维方式，为什么采用面向对象？

（function($){

})(jQuery);

解析为 

var jq=function($);

jq(jQuery);

首先我们来看一种不是采用面向对象的思路。

以下内容摘自：https://www.codePRoject.com/articles/291290/how-to-write-plugin-in-jquery

Write Your First jQuery Plugin

(function( $ ) {  $.fn.myPlugin = function() {      // Do your awesome plugin stuff here
 this.fadeOut('normal');  };})( jQuery );  
Plugin for Multiple Elements
(function ($) {   $.fn.hoverElement = function () {     return  this.each(function () {         $(this).hover(                           function () {                                  $(this).addClass('hoverTextSel');                           },                           function () {                                   $(this).removeClass('hoverTextSel');                           }                       ); // end of Hover event       }); // end for each   }; // end of functions})(jQuery);
Now you can perform multiple actions in one series.
$(".hoverText2").hoverElement().css({'color':'red'});
Customization
(function ($) {    $.fn.textHover = function (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();            var oldBgColor = selObject.css("background-color");            var oldColor = selObject.css("color");            selObject.hover(function () {                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);    
参考链接：http://www.111cn.net/wy/jquery/71895.htm
为什么要有面向对象的思维，因为如果不这样，你可能需要一个方法的时候就去定义一个function，当需要另外一个方法的时候，再去随便定义一个function，同样，需要一个变量的时候，毫无规则地定义一些散落在代码各处的变量。不方便维护，也不够清晰。当然，这些问题在代码规模较小时是体现不出来的。
如果将需要的重要变量定义到对象的属性上，函数变成对象的方法，当我们需要的时候通过对象来获取，一来方便管理，二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。
参考链接：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
接下来列举一种面向对象的插件开发框架模板
/* * tableUI 0.1
* Date: 2010-03-30 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示 */ 
;(function($){var Guide = function(elem,ops){this.options = $.extend({//默认的showTab:true,back:function(){ return true;                       next:function(){                 return true;                    },                   finish:function(){                            }            },ops);            this.$elem = $(elem);            this._init();}var fn = {_init: function () {}}Guide.prototype = fn;$.guide = function(pelem,ops){var guide = new Guide(pelem,ops);return guide;}})(jQuery);
问题1：为什么使用prototype???