面向对象的插件开发

让人想犯罪 __ 提交于 2020-03-20 05:12:45

我们新建一个对象命名为Beautifier,然后我们在插件里使用这个对象来编码

//定义 Beautifier的构造函数,然后我们在插件里使用这个对象来编码

var Beautifier=function(ele,opt){

  this.$element=ele,

  this.defaults={

    'color':red,

    'font-size':'12px',

    'text-Decoration':'none'

  },

  this.options=$.extend({},this.defaults,opt)

}

//定义Beautifier的方法

Beautifier.prototype={

  beautify:function(){

    return this.$element.css({

      'color':this.options.color,

      'font-size':this.options.fontSize,

      'text-Decoration':this.options.textDecoration

    });

  }

}

//在插件中使用Beautifier对象

$.fn.myPlugin=function(options){

  //创建Beautifier的实体

  var beautifier=new Beautifier(this,options);

  //调用其方法

  return beautifier.beautify();

}

 

//插件的调用

$(function(){

  $('a').myPlugin({

    'color':'#2C9929',

    'font-Size':'20px'

  });

})

//指定文字带下划线的调用

$(function(){

  $('a').myPlugin({

    'color':'#2C9929',

    'font-Size':'20px',

    'text-Decoration':'underline'

  });

})

关于命名空间

不仅仅是jQuery插件的开发,我们在写任何JS代码时都应该注意的是不要污染全局命名空间,因为随着你代码的增多,如果有意无意的在全局定义一些变量的话,最后很难维护,也容易跟比别人写的代码有冲突。

一个好的做法是始终用自调用匿名函数包裹你的代码,这样就可以完全放心,安心的将它用于任何地方了,绝对没有冲突。

 

用自调用匿名函数调用你的代码

 我们知道JS中无法用花括号方便的创建作用域,但函数却可以形成一个作用域,域内的代码是无法别外界访问的。如果我们将自己的代码放入一个函数中,那么就不会污染全局命名空间,同时不会和别的代码冲突。

 如上面我们定义了一个Beautifier全局变量,他被赋到全局的window对象上,为了防止这种事情发生,我们将所有代码用自调用匿名函数包裹。

(function(){

  //定义Beautifier的构造函数

  var Beautifier=function(ele,opt){

    this.$element=ele,

    this.defaults={

      'color':'red',

      'font-Size':'12px',

      'text-Decoration':'none'

    },

    this.options=$.extend({},this.defaults,opt);

  }

  //定义Beautifier的方法

  Beautifier.prototype={

    beautify:function(){

      return this.$element.css({

        'color':this.options.color,

        'font-Size':this.options.fontSize,

        'text-Decoration':this.options.text-Decoration

      });

    }

  }

  //在插件中使用Beautifier对象

  $.fn.myPlugin=function(options){

    //创建Beautifier的实体

    var beautifier=new Beautifier(this,options);

    //调用其方法

    return beautifier.beautify();

  }

})();

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!