jQuery源码探索之路（2）--init初始化

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

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

init方法

先看看之前写的代码

var Ye = function(selector){
  return Ye.prototype.init(selector);
}
Ye.prototype = {
  //....
  init:function(selector){
  }
  //....
}

所以我们要在init中获取传进来的selector,来构造对象。在JQ实际的源码中，这部分是很复杂的，要根据传进来的selector来做不同的处理，分为下面几种情况。

1. selector为无意义的值，如false,undefined,空字符串，null等，这时候我们就直接返回this，这里的this为一个空的Ye对象,length为0.
2. selector是一个DOM元素，我们只需将其封装为JQ对象即可
3. 参数selector为body字符串
4. 参数selector为其他字符串，这里要分几种情况

• 是单独标签，如$("<div>")，这就需要用document.createElement()来创建DOM，然后封装成JQ对象返回
• 是一段复杂的HTML代码，如$("<div id="haha"><div id="hehe"></div></div>")，这个我们可以利用利用innerHTML来创建个DOM，实际JQ中的方法更加复杂
• 参数selector为"#id"，直接调用document.getElementById()来查找DOM
• 参数selector为选择器表达式，如：$(".test")

5. 参数selector是一个函数，如$(function)，我们这时候应该把它当成一个ready事件来处理
6. 参数selector是一个JQ对象
7. 参数selector是任意其他值

因为有些情况比较少见，所以我们自己写的话就不考虑那么多，我写下1，2，4，5几种情况，其他的大家也可以去尝试，遇到问题可以交流哈

自己写

{
  init:function(selector){
    //1.无意义，返回空JQ
    if(!selector) return this;

    //2.如果有nodeType属性，则认为是DOM
    if(selector.nodeType){
      this[0] = selector;
      this.length  = 1;
      return this;
    }

    //4.字符串
    var elm;
    if(typeof selector === "string"){
      //首字符为#,且无空格
      if(selector.chatAt(0) == "#" !selector.match('\\s')){
        elm = document.getElementById(selector);
        this[0] = elm;
        this.length = 1;
        this.selector = selector;
        return this;
      }else{
        elm = document.querySelectorAll(selector);
        for(var i = 0; i < elm.length; i++){
          this[i] = elm[i];
        }
        this.length = elm.length;
        this.selector = selector;
        return this;
      }
    }    

    //5.给ready调用，后续会写ready()
    if(typeof selector == 'function'){
      Ye.ready(selector);
      return;
    }
  }
}

附：既然看完了，麻烦各位看官老爷点个赞，给个star呗，源码地址：https://github.com/LY550275752/my-js-plug/blob/master/Ye.js