Jquery 插件开发的一点知识

//根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种：

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

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

//而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。
//所以我们调用通过$.extend()添加的函数时
//直接通过$符号调用（$.myfunction()）
//而不需要选中DOM元素($('#example').myfunction())。请看下面的例子。

$.extend({
    sayHello:function(name){
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
});

$.extend({
   log:function(message){
       var now = new Date(),
           y = now.getFullYear(),
           m = now.getMonth() + 1,// jquery 中月份是从 0 开始的
           d = now.getDay(),
           h = now.getHours(),
           m = now.getMinutes();
           s = now.getSeconds(),
           time = y + '/' + m + '/' + d + '/' + h + ':' + m + ':' + s;
           console.log(time + ' My App: ' + message);
   }
});


$.fn.myPlugin = function(options){
    var defaults = {
            'color':'red',
            'fontSize':'12px'
    };
    //当给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。
    //同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
    //利用这一点，我们可以在插件里定义一个保存插件参数默认值的对象，
    //同时将接收来的参数对象合并到默认对象上，
    //最后就实现了用户指定了值的参数使用指定的值，
    //未指定的参数使用插件默认值。
    
   // var settings = $.extend(defaults,options);
    
    //一个好的做法是将一个新的空对象做为$.extend的第一个参数，
    //defaults和用户传递的参数对象紧随其后，
    //这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
    var settings = $.extend({},defaults, options);
    
    return this.css({
        'color':settings.color,
        'fontSize':settings.fontSize
    });
};

//面向对象的插件开发

//定义Beautifier的构造函数
var Beautifier = function(ele,opt){
    this.$element = ele,
    this.defaults = {
            'color':'red',
            'fontSize':'12px',
            'textDecoration':'none'
    },
    this.options = $.extend({},defaults,opt);
};
//定义Beautifier的方法
Beautifier.prototype = {
        beautify:function(){
            return this.$ellement.css({
                'color':this.options.color,
                'fontSize':this.options.fontSize,
                'textDecoration':this.options.textDecoration
            });
        }
};
//在插件中使用Beautifier对象
$.fn.beautifyPlugin = function(options){
    var beautifier = new Beautifier(this,options);
    return beautifier.beautify();
};

//一个好的做法是始终用自调用匿名函数包裹你的代码，
//这样就可以完全放心，安全地将它用于任何地方了，绝对没有冲突。
//我们知道JavaScript中无法用花括号方便地创建作用域，
//但函数却可以形成一个作用域，域内的代码是无法被外界访问的。
//如果我们将自己的代码放入一个函数中，那么就不会污染全局命名空间，
//同时不会和别的代码冲突。
;(function($, window, document,undefined) {
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt);
    };
    //定义Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    };
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function(options) {
        //创建Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier.beautify();
    };
})(jQuery, window, document);

//关于变量定义及命名

//现在谈谈关于变量及方法等的命名，没有硬性规定，但为了规范，遵循一些约定还是很有必要的。

//变量定义：好的做法是把将要使用的变量名用一个var关键字一并定义在代码开头，变量名间用逗号隔开。原因有二：

//一是便于理解，知道下面的代码会用到哪些变量，同时代码显得整洁且有规律，也方便管理，变量定义与逻辑代码分开；
//二是因为JavaScript中所有变量及函数名会自动提升，也称之为JavaScript的Hoist特性，即使你将变量的定义穿插在逻辑代码中，在代码解析运行期间，这些变量的声明还是被提升到了当前作用域最顶端的，所以我们将变量定义在一个作用域的开头是更符合逻辑的一种做法。当然，再次说明这只是一种约定，不是必需的。
//变量及函数命名 一般使用驼峰命名法（CamelCase），即首个单词的首字母小写，后面单词首字母大写，比如resultArray，requestAnimationFrame。
//对于常量，所有字母采用大写，多个单词用下划线隔开，比如WIDTH=100，BRUSH_COLOR='#00ff00'。
//当变量是jQuery类型时，建议以$开头，开始会不习惯，但经常用了之后会感觉很方便，因为可以很方便地将它与普通变量区别开来，
//一看到以$开头我们就知道它是jQuery类型可以直接在其身上调用jQuery相关的方法，比如var $element=$('a'); 之后就可以在后面的代码中很方便地使用它，并且与其他变量容易区分开来。

//引号的使用：既然都扯了这些与插件主题无关的了，这里再多说一句，
//一般HTML代码里面使用双引号，而在JavaScript中多用单引号，比如下面代码所示：

var name = 'Wayou';
document.getElementById('example').innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持双引号，JavaScript中保持单引号

//一方面，HTML代码中本来就使用的是双引号，
//另一方面，在JavaScript中引号中还需要引号的时候，
//要求我们单双引号间隔着写才是合法的语句，除非你使用转意符那也是可以的。
//再者，坚持这样的统一可以保持代码风格的一致，不会出现这里字符串用双引号包着，另外的地方就在用单引号。