zoukankan      html  css  js  c++  java
  • jquery 插件扩展方法

    一般在xxx行中编写自己的代码

    ;(function($, window, document, undefined) {
    //xxxxx
    })(jQuery, window, document);

    例子:

    ;(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);

    调用:

    $(function() {
        $('a').myPlugin({
            'color': '#2C9929',
            'fontSize': '20px'
        });
    })
    一些说明:
    面向对象的插件开发
    
    11保护好默认参数
    一个好的做法是将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。
    面向对象的插件开发
    所以我们新建一个对象命名为Beautifier,然后我们在插件里使用这个对象来编码。
    
    22于命名空间 应该注意的一点是不要污染全局命名空间
    我们知道JavaScript中无法用花括号方便地创建作用域,但函数却可以形成一个作用域,域内的代码是无法被外界访问的。如果我们将自己的代码放入一个函数中,那么就不会污染全局命名空间,同时不会和别的代码冲突。
    用自调用匿名函数包裹你的代码,自调用匿名函数里面的代码会在第一时间执行,页面准备好过后,上面的代码就将插件准备好了,以方便在后面的代码中使用插件
    即:(function() {});
    
    33将系统变量以变量形式传递到插件内部
    比如我们将这段代码放到页面后,前面别人写的代码没有用分号结尾,或者前面的代码将window, undefined等这些系统变量或者关键字修改掉了,正好我们又在自己的代码里面进行了使用,那结果也是不可预测的
    即:
    ;(function($, window, document, undefined) {
    //xxxxx
    })(jQuery, window, document);
    
    在代码开头加一个分号,这在任何时候都是一个好的习惯
    
    而至于这个undefined,稍微有意思一点,为了得到没有被修改的undefined,我们并没有传递这个参数,但却在接收时接收了它,因为实际并没有传,所以‘undefined’那个位置接收到的就是真实的'undefined'了。
  • 相关阅读:
    小程序注册
    Webpack
    npm总结1
    js事件
    js高级程序2
    js高级程序
    索引
    将数据渲染到页面的方法
    前后端分离后,通讯问题 springboot + vue
    axios post 请求后端参数为null解决方案
  • 原文地址:https://www.cnblogs.com/rdchen/p/14024928.html
Copyright © 2011-2022 走看看