基于jQuery的封装函数

封装tab栏切换功能

    // 第一种封装：
    // btns 点击某个选项
    // cons 对应的显示内容
    // active 点击后的样式
    function table(btns, cons, active) {
      $(btns).click(function () {
        $(this).addClass(active).siblings().removeClass(active);
        $(cons).eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
      });
    }
    //调用传参
    table()
    
    // 第二种封装：
    function table(options) {
      options = Object.assign({
        btns: '',
        cons: '',
        active: ''
      }, options);

      $(options.btns).click(function () {
        $(this).addClass(options.active).siblings().removeClass(options.active);
        $(options.cons).eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
      });
    }
    //调用传参 对象形式
    table({ })
    
 //第三种：面向对象jq插件开发
      $.fn.tab = function (opt) {
        //ES6 class
        class Tab {
          constructor(data) { //属性
            this.defaults = {
              active: '.active'
            };
            //替补方案：
            $.extend(this.defaults, data);
          }
          init() {
            //查找节点，绑定事件
            this.btns = $(this.defaults.btns);
            this.cons = $(this.defaults.cons);
            let that = this.defaults;
            let cons = this.cons;
            $(this.btns).click(function () {
              $(this).addClass(that.active).siblings().removeClass(that.active);
              $(cons).eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
            });
          }
        }
        let t = new Tab(opt);//创建一个实例
        t.init();
      }

      //使用插件
      $('#box').tab({
        btns: '#box input',
        cons: '#box .conbox',
        active: 'active'
      });
      
//第四种：狗哥的逼格封装
//封装一个选择卡切换功能
//参数：对象的形式 options
// 参数1：tab 参数2：con 
// 参数3：tab_active =>（tab的活跃的类） tab_def(tab默认带有的类，要么为"")
// 参数4：con_active =>（con的活跃的类） con_def(tab默认带有的类，要么为"")
function tab(options) {
  //设置默认的配置参数
  options = Object.assign({
    tab: "",
    con: "",
    tab_active: "",
    tab_def: "",
    con_active: "",
    con_def: ""
  }, options)
  var sel_tab = $(options.tab);
  var sel_con = $(options.con);

  sel_tab.each((i, item) => {
    $(item).on("click", function () {
      sel_tab.each((i, item) => {
        item.className = options.tab_def;
        // console.log(options.con_def, sel_con[i]);
        sel_con[i].className = options.con_def;
      })
      item.className = options.tab_active;
      sel_con[i].className = options.con_active
    })
  })
}
//调用模板
// tab({
//   tab: ".makeUp-con-tab-item",
//   con: ".makeUp-con-con-box",
//   tab_active: "makeUp-con-tab-item active",
//   tab_def: "makeUp-con-tab-item",
//   con_active: "makeUp-con-con-box conActive",
//   con_def: "makeUp-con-con-box"
// })

继续封装中。。。。。