如何写jQuery插件


 在这里我们借助LightingWeight Start 模式实现一个简单的高亮的jQuery插件。

LightingWeight Start模式使用了下列内容:

  • 常见最佳实践,例如,放在函数之前的分号
  • window、document 和undefined作为参数传入
  • 基本的默认对象
  • 简单的插件构造函数,用于初始化创建相关的逻辑,以及用于所使用元素的赋值
  • 扩展有默认值的选项
  • 构造函数周围的lightingWeight 包装器,帮助避免多实例等问题

//函数调用之前的分号是为了安全的目的,防止其他插件没有正常的关闭
;(function($,window,document,undefined){
//这里使用的undefined是ECMAScript 3里的全局变量undefined,是可以修改的。undefined没有真正传过来,以便保证该值为真正的undefined。
    //ES5里,undefined是不可以修改的
    //window和document作为局部变量,而非全局变量,因此可以加快解析流程以及影响最小化
    //创建默认值
    var defaults = {
        background : "#CCC",
        color:"#FFF"
        },
        //真正的插件构造函数
        Plugin = function(element , options){
            this.element = element;
            //传入的参数覆盖默认值
            this.options = $.extend({},defaults,options);
            this.init();
        };
    Plugin.prototype.init = function(){
        //初始化的逻辑
        //通过实例访问DOM元素,this.element,this.options
        $(this.element).css({'background':this.options.background,'color':this.options.color});
    };
//真正的插件包装,防止出现多实例
    $.fn.highLight=function(options){
        return this.each(function(){
            if(!$.data(this,"plugin")){
                $.data(this,"plugin",new Plugin(this,options));
            }
        });
    };

})(jQuery,window,document);
调用:
$("p").highLight();
$("h3").highLight({background:"black"})





你可能感兴趣的:(jquery插件)