黑马程序员技术交流社区

标题: 【上海校区】jQuery框架解析 - 第二篇 - 简易封装完成 [打印本页]

---

作者: SH_Jepson    时间: 2018-1-2 10:01
标题: 【上海校区】jQuery框架解析 - 第二篇 - 简易封装完成


好了, 上一篇我们实现了 jQuery 框架的基本架子, 那么接下来我们就要实现功能辣,
是不是很期待呢 ?




实现选择器功能
我们这里是实现选择器功能, 不考虑兼容性, 所以直接通过 querySelectorAll 来获取页面中的元素, 并挂载在实例上


通过 apply 方法, 借调 push, 将 elements 的每一项, 以下标的方式挂载在当前实例上

extend 方法实现 jQuery 模块划分
在原型上实现 extend 方法, 将来就可以通过调用 extend 来扩展 jQuery 的各种方法辣




而jQuery 中是分模块的, 所以我们可以通过 jQuery.fn.extend 来实现模块划分, 这步的完成也可以让我们以后在阅读 jQuery 源码时更加清晰
比如:
css 模块,  有 css, addClass, removeClass, toggleClass, hasClass 等方法



筛选选择器模块:
     (1) siblings() next() nextAll() prev() prevAll()
     (2) children() find()
     (3) parent() parents()



类样式操作模块封装
我们可以通过 html 新增的 classList 属性对象来很方便的操作元素的类
    (1) 添加类 dom.classList.add("aa")
    (2) 移除类 dom.classList.remove("aa")
    (3) 判断类 dom.classList.contains("aa")
    (4) 切换类 dom.classList.toggle("aa")



其实 jQuery 的隐式迭代就是在方法内部帮我们进行了 遍历而已,  而链式调用的原理, 也就是在方法的最后, return 了 this, 将 jQuery 对象又返回了, 所以可以接着调用 jQuery 方法, 哈哈, so easy吧
我们依葫芦画瓢, 再实现几个方法




功能测试





隐式迭代操作到了所有的 div, 而且可以链式调用, 哈哈 ! 是不是很爽, 说起来, 咱也是封装过一个小型 jQuery 的人辣! 粗去面试又可以装 b 了, 嘿嘿

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2