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            ，
//                   ，              。
//  ，                  ，               ，           。