jQuery源码探索之路（4）-- .eq(), .first(), .last(), .find(), .get()的实现

1. 自己最近在学习一些js的插件的写法，那么当然就绕不开jquery，于是自己就学习中遇到的一些问题做些总结和记录

2. 自己也是在学习过程中，有问题请各位指出，希望大伙能多多支持，给给star，点点赞呗，github地址

这次增加五个方法,.eq(), .first(), .last(), .find(), .get()，不明白这个几个方法作用的可以去看下JQ的使用文档，先放代码

Ye.prototype = {
//....
 find: function(selector) {
     if (!selector) return;
     var context = this.selector;
     return new Ye(context + ' ' + selector);
 },
 first: function() {
     return new Ye(this[0]);
 },
 last: function() {
     var len = this.length - 1;
     return new Ye(this[num]);
 },
 eq: function(num) {
     var num = num < 0 ? (this.length - 1) : num;
     return new Ye(this[num]);
 },
 get: function(num) {
     var num = num < 0 ? (this.length - 1) : num;
     return this[num];
 },
//...
}

这几个方法都很类似，都是需要返回只有指定的那个DOM的JQ对象。

我们就可以有两种思路，一种是将那个JQ对象中除了那个指定DOM外其他的DOM都去掉，另一种思路就是用那个DOM构造一个新的JQ对象，再将其返回就好了。

在JQ源码中其实也是利用的第二种思路，只是它专门封装了一个.pushStack()方法来构造新的JQ对象，其中涉及到修改selector，上下文context等。

我们就偷偷懒，直接利用new Ye(selector)来构造就好了。

get方法只需返回DOM对象，其他eq,first,last都需要封装。

find()方法实际上是比较复杂的，但我们也可以偷下懒，利用selector属性可以拿到当前JQ对象的选择器，再和.find(selector)里的selector拼接起来就可以得到一个新的selector。
然后就可以构造新的JQ对象了。return new Ye(context + ' ' + selector);

例如$("ul").find("li"),我们拼接成"ul li"传过去return new Ye("ul li")

 find: function(selector) {
     if (!selector) return;
     var context = this.selector;
     return new Ye(context + ' ' + selector);
 },

这几个方法就大功告成啦。

---

附：
既然您看都看完了，麻烦您点个赞，给个star呗，谢谢您的支持
源码地址：https://github.com/LY550275752/my-js-plug/blob/master/Ye.js

如果您不知道我在说什么的话，推荐您从头开始看我的这个系列文章:

• jQuery源码探索之路（1）-- 一个开始
• jQuery源码探索之路（2）-- init初始化
• jQuery源码探索之路（3）--extend的实现