jq-插件制作

1 插件基本要点

  1.1 jQuery 插件命名 jquery.[插件名].js 如jquery.color.js

  1.2 所有对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象上

  1.3 插件内部 this指向jQuery对象

  1.4 可以通过 this.each()遍历所有元素

　1.5 前面加；避免别人的坑

　1.6 插件应该返回一个jQuery对象，除非返回的是一些需要获取的量，如字符串或数组

　1.7 避免在插件内部使用$作为jQuery对象的别名 ,应该使用jQuery，可以通过使用闭包来这么做

2 jQuery提供了两种用来扩展对象的方法 : 都接收一个键值对的对象

　　jQuery.fn.extend() 

　　jQuery.extend() 　除了可以扩展jquery对象,还可以用来扩展已有的Object对象--设置插件的一系列默认参数　

<script>
        //$.extend();
        /*$.extend({
            'log': function(message){
                var nowDate = new Date(),
                    y = nowDate.getFullYear(),//获取年
                    m = nowDate.getMonth()+1, //获取月
                    d = nowDate.getDate(), //获取日
                    w = nowDate.getDay(), //获取星期
                    h = nowDate.getHours(), //获取小时
                    min = nowDate.getMinutes(), //获取分
                    s = nowDate.getSeconds(); //获取秒
                //数字转换为汉字简体数字
                switch(w){
                    case 1:
                        w = '一';
                        break;
                    case 2:
                        w = '二';
                        break;
                    case 3:
                        w = '三';
                        break;
                    case 4:
                        w = '四';
                        break;
                    case 5:
                        w = '五';
                        break;
                    case 6:
                        w = '六';
                        break;
                    default:
                        w = '日';
                };
                time = y +'/'+ m +'/'+ d +'/星期'+ w +' '+ h +':'+ min +':'+ s; 
                console.log(time +' My App: '+message);
            }
        });
        $.log('正常运行'); //调用*/

        //$.fn.plugName = function(){}格式
        /*$.fn.myPlugn1 = function(){
            this.css('color', 'red'); //这里this指调用插件时的jquery对象
            this.each(function(){
                //each里面的this指dom对象
                $(this).append(' '+ $(this).attr('href')); //$(this) 变成为jquery对象
            });
        };*/
        //让插件支持链式调用
        /*$.fn.myPlugn1 = function(){
            this.css('color', 'red'); //这里this指调用插件时的jquery对象--jquery的对象集合
            return this.each(function(){  //让插件支持链式调用
                //each里面的this指dom对象 $(this)将这个this变成jquery对象
                $(this).append(' '+ $(this).attr('href')); //$(this) 变成为jquery对象
            });
        };
        $('a').myPlugn1(); //使用插件*/
        //让插件接受参数
        /*$.fn.myPlugn2 = function(options){
            var defaults = {  //defaults 是指定变量
                'color': 'red',
                'fontSize': '12px'
            };
            var settings = $.extend(defaults, options);
            return this.css({
                'color': settings.color,
                'fontSize': settings.fontSize
            })
        };
        //$('a').myPlugn2({'color': '#2c9929'}); 
            //调用未指定字体大小的时候，会运用插件里的默认值12px
        //$('a').myPlugn2({'color': '#2c9929', 'fontSize': '20px'}); 
        //保护好参数
        $.fn.myPlugn2 = function(options){
            var defaults = {  //defaults 是指定变量名称
                'color': 'red',
                'fontSize': '12px'
            };
            var settings = $.extend({},defaults, options);
            debugger;
            return this.css({
                'color': settings.color,
                'fontSize': settings.fontSize
            })
        };*/
        //保护参数做法1
        /*$.fn.myPlugn2 = function(options){
            var defaults = {  //defaults 是指定变量名称
                'color': 'red',
                'fontSize': '12px'
            };
            var settings = $.extend({}, defaults, options); //将一个空对象作为第一个参数
            debugger;
            return this.css({
                'color': settings.color,
                'fontSize': settings.fontSize
            })
        };
        ;(function($, window, document, undefined){
            $.fn.myPlugn2 = function(options){
                var defaults = {  //defaults 是指定变量名称
                    'color': 'red',
                    'fontSize': '12px'
                };
                var settings = $.extend({}, defaults, options); //将一个空对象作为第一个参数
                //debugger;
                return this.css({
                    'color': settings.color,
                    'fontSize': settings.fontSize
                })
            };
        })(jQuery, window, document);
        $('a').myPlugn2({'color': '#2c9929', 'fontSize': '20px'}); */

        //面向对象的插件开发
            // 为什么要使用面向对象方式：如果不这样，你可能需要一个方法的时候就去定义一个function，当需要另外一个方法的时候，再去随便定义一个function，
            // 同样，需要一个变量的时候，毫无规则地定义一些散落在代码各处的变量。
            // 还是老问题，不方便维护，也不够清晰。当然，这些问题在代码规模较小时是体现不出来的。
            // 如果将需要的重要变量定义到对象的属性上，函数变成对象的方法，当我们需要的时候通过对象来获取，一来方便管理，
            // 二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。
        /*var MyFun = function(ele, opt){ //定义一构造函数
            this.$element = ele,
            this.defaults = {
                'color': 'red',
                'fontSize': '12px',
                'textDecoration': 'none'
            },
            this.options = $.extend({}, this.defaults, opt);
        };
        MyFun.prototype = {
            beautify : function(){
                return this.$element.css({
                    'color': this.options.color,
                    'fontSize': this.options.fontSize,
                    'textDecoration': this.options.textDecoration
                })
            }
        };
        //在插件中使用 MyFun
        $.fn.myPlugin = function(options){
            var myfun = new MyFun(this, options);
            return myfun.beautify();
        };*/
        //$('a').myPlugin({'color': '#2c9929', 'fontSize': '20px'});    //调用
        //$('a').myPlugin({'color': '#2c9929', 'fontSize': '20px', 'textDecoration': 'line-through'});
        
        //再考虑到其他一些因素，比如我们将这段代码放到页面后，前面别人写的代码没有用分号结尾，
        //或者前面的代码将window, undefined等这些系统变量或者关键字修改掉了，正好我们又在自己的代码里面进行了使用，那结果也是不可预测的
        //为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的'undefined'了*/
        ;(function($, window, document, undefined){
            'use strict';
            var MyFun = function(ele, opt){ //定义一构造函数
                this.$element = ele; //保存调用这个方法的jquery对象--dom组成的数组
                this.defaults = {
                    'color': 'red',
                    'fontSize': '12px',
                    'textDecoration': 'none'
                };
                this.options = $.extend({}, this.defaults, opt);
            };
            MyFun.prototype = {
                beautify: function(){
                    return this.$element.css({
                        'color': this.options.color,
                        'fontSize': this.options.fontSize,
                        'textDecoration': this.options.textDecoration
                    })
                },
                addlink: function(){
                    //return this.$element.append(' '+ this.$element.attr('href'));
                    //this.$element; //jquery对象 --dom对象组成的数组
                    return this.$element.each(function(){
                        $(this).append(' '+ $(this).attr('href'));
                    })
                }
            };
            //在插件中使用 MyFun
            $.fn.myPlugin = function(options){
                var myfun = new MyFun(this, options);
                return myfun.beautify();
            };
            $.fn.myPlugin2 = function(options){
                var myfun = new MyFun(this, options);
                return myfun.addlink();
            }
        })(jQuery, window, document);
        //$('a').myPlugin({'color': '#2c9929', 'fontSize': '20px'});    //调用
        $('a').myPlugin({'color': '#2c9929', 'fontSize': '20px', 'textDecoration': 'underline'}).myPlugin2();
        $('p').append('<span>你好</span>').css('color', 'red');
    </script>