jQuery中的设计模式

XUZE
618 阅读2分钟

链式风格

也叫jQuery风格

  • window.jQuery()是我们提供的全局函数

特殊函数jQuery

  • jQuery（选择器）用于获取对应的元素
  • 但它却不返回这些元素
  • 相反，它返回一个对象，称为jQuery构造出来的对象
  • 这个对象可以操作对应的元素

查

jQuery('#xxx')返回值并不是元素，而是一个api元素

jQuery('#xxx').find查找#xxx里的.red元素

jQuery('#xxx').parent()获取爸爸

jQuery('#xxx').children()获取儿子

jQuery('#xxx').siblings()获取兄弟

jQuery('#xxx').index()获取排行老几(从0开始)

jQuery('#xxx').next()获取弟弟

jQuery('#xxx').prev()获取哥哥

jQuery('.red').each(fn)遍历并对每个元素执行fn

** window.$ =window.jQuery**

$('#xxx')返回值并不是元素，而是一个api元素

$('#xxx').find('.red')查找#xxx里的.red元素

$('#xxx').parent()获取爸爸

$('#xxx').children()获取儿子

$('#xxx').siblings()获取兄弟

$('#xxx').index()获取排行老几(从0开始)

$('#xxx').next()获取弟弟

$('#xxx').prev()获取哥哥

$('.red').each(fn)遍历并对每个元素执行fn

增

$('<div><span>1</span></div>')

等下，你刚刚不是说$(选择器)吗？

怎么又可以传标签内容？

这是JS的函数[重载]

一个函数可以接受不同的参数

$('<div><span>1</span></div>')

返回值并不是新增的元素，而是API对象

$('<div><span>1</span></div>').appendTo(...)

appendTo可以把新增的元素放在另一个元素里
  • 这感觉DOM是不可见的
  • 你不需要知道DOM的任何细节
  • 只需要使用简洁的API即可
  • 一个好的封装，能让使用者完全不知道内部细节
  • 这是通过闭包实现的

我就是想知道细节咋办

** 举例1**

  • const $div =$('div#test')
  • $div并不是DOM对象，而是jQuery构造的API对象
  • 我现在就是想从$div得到div元素

满足你

  • $div.get(0)获取第0个元素//div
  • $div.get(1)获取第1个元素//undefined
  • $div.get(2)获取第2个元素//undefined
  • $div.size()得到元素的个数
  • $div.length也可以得到元素的个数
  • $div.get获取所有元素组成的数组//[div]

我就是想知道细节咋办2

** 举例2**

  • const $div =$('.red')//假设有3个div.red
  • $div并不是DOM对象，而是jQuery构造的API对象
  • 我现在就是想从$div得到3个div元素

满足你

  • $div.get(0)获取第0个元素//div
  • $div.get(1)获取第1个元素//div
  • $div.get(2)获取第2个元素//div
  • $div.size()得到元素的个数
  • $div.length也可以得到元素的个数
  • $div.get获取所有元素组成的数组//[div，div，div] 
觉得$div.get(0)太麻烦了

再改简单点！

$div[0]获取第一个div

链式风格

增

$('body')获取document.body

$('body').append($('<div>1</div>')添加小儿子

$('body').append('<div>1</div>')更方便

$('body').prepend(div/$div）添加大儿子

$('#test').after(div /$div) 添加弟弟

$('#test').before(div/ $div) 添加哥哥

删

$div.remove()
$div.empty()

改

$div.text(?)读写文本内容

$div.html(?)读写HTML内容

$div.attr('title',?)读写属性

$div.css({color:'red'})读写style //$div.style更好

$div.addClass('blue') /removeClass /hasClass

$div.on('click',fn)

$div.off('click',fn)

后续

** 使用原型**

把共有属性（函数）全都放到$.prototype

$.fn =$.prototype //名字太长不爽

然后让api.__proto__指向$.fn

jQuery 设计模式

jQuery 用到了哪些设计模式

不用new的构造函数，这个模式没有专门的名字

$(支持多种参数)，这个模式叫做重载

用闭包隐藏细节，这个模式没有专门的名字

$div.text()即可读也可写，getter/setter

$.fn是￥。prototype的别名，这叫别名

jQuery针对不同的浏览器使用不同代码，这叫适配器
avatar
文章
阅读
粉丝