对于jquery的调用,我们一般都会传入参数
html: <div></div> js: console.log($('<a />')); console.log($('div'));
仔细观察返回的jquery对象,感觉像是对dom节点进行封装,并将其保存在jquery上
//获取到传入的参数 var jquery = function(selector, content) { return new jquery.prototype.init(selector, content); } jquery.prototype = { length: 0, init: function(selector, content) { content = content || document; var match; //match 用来保存selector; if(typeof selector === 'string') { // 判断selector传入的是一个html标签; if(selector.charat(0) === '<' && selector.charat(selector.length-1) === '>' && selector.length >= 3 ) { match = [selector]; } if (match) { //创建一个jquery对象。 } } } }
var reg = /^<(\w+)\s*\/?>(?:<\/\1>|)$/; jquery.extend({ parsehtml: function(data, content) { if (!data && typeof data != 'string') { return null; } var parse = reg.exec(data); return [content.createelement(parse[1])] //ok,这里是将创建的一整个dom节点保存在了数组中。 } })
if(match) { for(; i < match.length; i++) { var opt = match[i] this[i]=jquery.parsehtml(opt, content)[i] } }
好了,现在我们就可以看下代码的执行结果了。
ok,勉强可以实现,但好像还是有点不对的样子, 让我们来看下jquery的源码。
可以看出是调用了merge方法。跳转到merge方法查看一下,一般来说,merge用于合并两个数组, 也可以用于将数组合并在有length属性的对象上。
// push.apply(_, arraylike) throws on ancient webkit merge: function (first, second) { var len = +second.length, j = 0, i = first.length; for (; j < len; j++) { first[i++] = second[j]; } first.length = i; return first; }了解的区别后,我们来优化代码吧,
优化
var ele, i = 0; if(match) {} else { ele = document.queryselectorall(selector); for(; i < ele.length; i++) { this[i] = ele[i] } this.length = ele.length; }
var rootjquery; init = jquery.fn.init = function(selector, context, root) { ... root = root || rootjquery; if(typeof selector === 'string') { ... } else if (isfunction(selector)) { return root.ready !== undefined ? root.ready(selector) : selector(jquery); } } rootjquery = jquery(document);
代码可以看出,其实js是可以传递三个参数的,且root默认为document,如果root.ready没有初始话的话就立刻执行传入的方法,否则调用root.ready方法。关于root,从代码可以看出,是个全局,那么root.ready == jquery.ready。
function completed() { document.removeeventlistener('domcontentloaded',completed); window.removeeventlistener('load', completed); jquery.ready(); } if(document.readystate === 'complete' || (document.readystate !== "loading" && !document.documentelement.doscroll)) { window.settimeout(jquery.ready); } else { //dom加载完毕后,调用complate移除监听事件。 document.addeventlistener('domcontentloaded', complete); window.addeventlistener('load', completed); }
jquery.extend({ // dom是否已经准备好要使用了,发生更改,则修改为true; isready: false, //跟踪就绪事件触发前要等待的项目数计数器 readywait: 1, ready: function(wait) { if(wait === true ? --jquery.readywait : jquery.isready) { return ; } //dom节点已经准备好了 jquery.isready = true; if(wait !== true && --jquery.readywait > 0) { return } //如果有函数绑定,立即执行。 readylist.resolvewidth(document, [jquery]) } })
从2.的时候可以看出,在dom节点加载完的时候,调用了一次ready,此时没有传入wait,ready中第一个判断直接跳过,记录jquery.isready = true,然后再看下一句执行,调用readylist.resolvewidth方法,此时dom节点已经加载完毕,可以执行绑定的函数了,
关于这个readylist是什么,我们在代码中找一下看下,
var readylist = jquery.deferred(); jquery.fn.ready = function(fn) { ready.then(fn).catch(error) { jquery.readyexception(error); } return this; }
从以上代码可以看出,readylist是deferred函数的返回值,且从下面的调用,可以推测defferred函数应该是个promise对象。对于defferred函数,下次再仔细研究一下。
现在让我们来回顾整个函数流程:
上面的内容只是我自己的理解,如果有什么不对的地方,希望大家帮忙指出啊!
如对本文有疑问, 点击进行留言回复!!
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法(不用jQuery)
网友评论