jQuery 的多库共存

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天 jQuery 的多库共存

• 我们一直在使用 jQuery，都没有什么问题

• 但是如果有一天，我们需要引入一个别的插件或者库的时候

• 人家也向外暴露的是 $ 获取 jQuery

• 那么，我们的 jQuery 就不能用了

• 那么这个时候，jQuery 为我们提供了一个多库并存的方法 // 这个方法可以交还 jQuery 命名的控制权 jQuery.noConflict()

  // 上面代码执行完毕以后 $ 这个变量就不能用了
  // 但是 jQuery 可以使用
  console.log($) // undefined
  console.log(jQuery) // 可以使用
  

• 完全交出控制权 // 这个方法可以交并且传递一个 true 的时候，会完全交出控制权 jQuery.noConflict(true)

  // 上面代码执行完毕以后 $ 这个变量就不能用了
  // jQuery 这个变量也不能用了
  console.log($) // undefined
  console.log(jQuery) // undefined
  

• 更换控制权 // 可以用一个变量来接受返回值，这个变量就是新的控制权 var aa = jQuery.noConflict(true)

  // 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了
  aa('div').click(function () { console.log('我被点击了') })
  

JQuery 的插件扩展

• jQuery 确实很好很强大
• 但是也有一些方法是他没有的，我们的业务需求中有的时候会遇到一些它里面没有的方法
• 那么我们就可以给他扩展一些方法

扩展给他自己本身

• 扩展给自己本身使用 jQuery.extend 这个方法
• 扩展完后的内容只能用 $ 或者 jQuery 来调用 // jQuery.extend 接受一个参数，是一个对象，对象里面是我们扩展的方法 jQuery.extend({ max: function (...n) { return Math.max.apply(null, n) }, min: function (...n) { return Math.min.apply(null, n) } })
• 扩展完毕我们就可以使用了 const max = $.max(4, 5, 3, 2, 6, 1) console.log(max) // 6 const min =$.min(4, 5, 3, 2, 6, 1) console.log(min) // 1

扩展给元素集

• 扩展完毕以后给元素的集合使用
• 也就是我们用 $('li') 这样的选择器获取到的元素集合来使用
• 使用 jQuery.fn.extend() 方法来扩展 // jQuery.fn.extend() 接受一个参数，是一个对象，对象里面是我们扩展的方法 jQuery.fn.extend({ checked: function () { // return 关键字是为了保证链式编程 // 后面的代码才是业务逻辑 return this.each(function() { this.checked = true }) } })
• 扩展完毕我们就可以使用了 // 靠元素集合来调用 $('input[type=checkbox]').checked() // 执行完毕之后，所有的 复选框 就都是选中状态了