• jq 插件写法


    1.一次声明一个函数 

    $.fn.函数名 = function([options]){}

    $.fn.red=function(options){
    var defaults = {
    'color': 'red'
    };
    var settings = $.extend(defaults, options);
    this.css(settings);

    return this;

    }

    2.一次声明多个函数   

    $.fn.extend({
    函数名:function(){}
    });

    $.fn.extend({
    big:function(options){
    var defaults = {
    'fontSize': '22px'
    };
    var settings = $.extend({},defaults, options);

    this.css(settings);

    return this;


    },
    normal:function(options){
    var defaults = {
    'fontSize': '12px'
    };
    var settings = $.extend({},defaults, options);

    this.css(settings);

    return this;


    }
    });

    3.通常是结合命名空间搭配使用,将需要用到的功能块整合进来,然后确定好输入与输出,同时保证传入参数的可扩展性(有默认值,复合对象),和传出的链式调用(return this);

    4. 扩展

    4.1

    面向对象思维编辑插件

    //定义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();
    }
    
    
    
    $(function() {
        $('a').myPlugin({
            'color': '#2C9929',
            'fontSize': '20px'
        });
    })
    View Code

    4.2   

    jquery extend实现原理

  • 相关阅读:
    NET 获取实例所表示的日期是星期几
    NET npoi 保存文件
    快速排序
    JAVA poi 合并单元格
    JAVA poi 帮助类
    JAVA 字符串编码转换
    NET npoi 合并单元值处理
    NET npoi帮助类
    Task的暂停,继续,取消
    .net ref与out之间区别
  • 原文地址:https://www.cnblogs.com/justSmile2/p/9470479.html
Copyright © 2020-2023  润新知