先看看之前写的代码
var Ye = function(selector){ return Ye.prototype.init(selector); } Ye.prototype = { //.... init:function(selector){ } //.... }所以我们要在init中获取传进来的selector,来构造对象。在JQ实际的源码中,这部分是很复杂的,要根据传进来的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