JS插件入门-高亮插件

1.定一个闭包区域，防止插件污染

//闭包限定命名空间
(function(){

})(window.jQuery)

2.jQuery.fn.extend(object)扩展jquery选择器方法，制作插件

//闭包限定命名空间
(function(){
  $.fn.extend({
    "highLight":function(optons){
        //todo  
    }  
  });
})(window.jQuery)

3.给插件默认参数，实现插件功能

//闭包限定命名空间
(function(){
  $.fn.extend({
    "highLight":function(options){
        //覆盖默认参数
        var opts = $.extend({},defaults,options);
        //这里的this就是jQuery对象,遍历所有要高亮的dom，当调用的是一个集合时
        this.each(function(){
          //获取当前dom的jQuery对象，这里的this时当前循环的dom
          var $this = $(this);
          $this.css({backgroundColor: opts.background});
        });   
    }  
  });
  var defaults = {
    background: 'red'
  }
})(window.jQuery)

4.插件的调用

$(function(){
  $("p").highLight();//调用自定义 高亮插件
})

这里只能直接调用，不能链式调用的。

5.添加链式调用

//闭包限定命名空间
(function(){
  $.fn.extend({
    "highLight":function(options){
        //覆盖默认参数
        var opts = $.extend({},defaults,options);
        //这里的this就是jQuery对象,遍历所有要高亮的dom，当调用的是一个集合时
        this.each(function(){
          //获取当前dom的jQuery对象，这里的this时当前循环的dom
          var $this = $(this);
          $this.css({backgroundColor: opts.background});
        });   
        return this;//返回jQuery对象
    }  
  });
  var defaults = {
    background: 'red'
  }
})(window.jQuery)

6.插件共有方法和私有方法定义和使用

//闭包限定命名空间
(function(){
  $.fn.extend({
    "highLight":function(options){
        //检测参数是否合法
        if(!isValid(options)){
           return this;
        }
        //覆盖默认参数
        var opts = $.extend({},defaults,options);
        //这里的this就是jQuery对象,遍历所有要高亮的dom，当调用的是一个集合时
        this.each(function(){
          //获取当前dom的jQuery对象，这里的this时当前循环的dom
          var $this = $(this);
          $this.css({backgroundColor: opts.background});
          //格式化高亮文本
          var markup = $this.html();
          markup = $.fn.highLight.format(markup);
          $this.html(markup);
        });   
        return this;//返回jQuery对象
    }  
  });
  var defaults = {
    background: 'red'
  }
  //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
  $.fn.highLight.format = function (str) {
      return "" + str + "";
  }
//私有方法，检测参数是否合法
function isValid(options){
  return !options || (options && typeof options == "object")?true:false;
}
})(window.jQuery)

调用

//调用者覆盖 插件暴露的共公方法
        $.fn.highLight.format = function (txt) {
            return "" + txt + ""
        }
        $(function () {
            $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
        });