原型 - 实现自己的jQuery
每個(gè)第一次使用jq的開(kāi)發(fā)者都感到驚嘆,jq的$太神奇了,究竟是怎么做到的使用$控制dom
贊嘆前人之余,探究其本源才是前端開(kāi)發(fā)者應(yīng)該做的事,社區(qū)常常說(shuō),不要重復(fù)造輪子,
可是啊,連輪子都造不出來(lái),又怎么去了解在什么環(huán)境下用什么輪子,怎么樣才可以造成更加優(yōu)秀的輪子,
不同階段對(duì)前端有不同的理解,作為一名程序員,本就是沒(méi)有盡頭,靜下心來(lái),和別人比一比,多借鑒前人的發(fā)展,取其精
華去其糟粕,不要閉門造車,做一名不斷學(xué)習(xí)的前端開(kāi)發(fā)者
? 回頭看來(lái)jq已經(jīng)逐漸在不斷的學(xué)習(xí)中揭開(kāi)了他神秘的面紗,讓我想看看美麗的$是怎么出生的
- jQuery只有一個(gè)全局變量$ 那一定是掛載在window上面的
可愛(ài)的$就指向JQuery的實(shí)例了當(dāng)我們$("#id")就相當(dāng)于 jQuery("#id")
那么現(xiàn)在就要處理獲取到的dom元素
(function (window) {function jQuery(selects) {return new jQuery.fn.init(selects)}jQuery.fn = {} //創(chuàng)建掛載函數(shù)jQuery.fn.init = function (selects) {var dom = [].slice.call(document.querySelectorAll(selects))var i = 0;var len = dom ? dom.length : 0for (i = 0; i < len; i ) {this[i] = dom[i]}this.length = lenthis.selects = selects || ' ';}window.$ = jQuery; //注意這里jQuery指向window })(window)現(xiàn)在我們就已經(jīng)將$()里面的dom捕捉到了,請(qǐng)轉(zhuǎn)化成為數(shù)組,利于后面的操作
下一步就是在原型鏈上面創(chuàng)建jquery的方法了
(function (window){var jQuery = function (selector){return new jQuery.fn.init(selector) //這里必須構(gòu)造函數(shù)要不放怎么去獲取節(jié)點(diǎn)信息}jQuery.fn = {val(){return this[0].innerHTML}//.......等等方法}var int = jQuery.fn.init = function (selector) {var dom = [].slice.call(document.querySelectorAll(selector)) var i,len = dom?dom.length:0for (i = 0; i < len; i ) {this[i] = dom[i]}console.log(len,selector);this.length = len;this.selector = selector || ' '}int.prototype = jQuery.fnwindow.$ = jQuery; })(window)我們實(shí)現(xiàn)了類似jq的val()方法了
試驗(yàn)一下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>title</title> </head><body><p>jquery test 1</p><script src="./MYjquery.js"></script><script>//插件拓展$.fn.getNodeName = function () {return this[0].tagName;}</script><script>var p = $('p');console.log(`p的標(biāo)簽名為${p.getNodeName()}`); //獲取節(jié)點(diǎn)名稱console.log(p.val());</script> </body></html>最關(guān)鍵的一點(diǎn)使用
jQuery.fn的方式利于拓展,上面代碼體現(xiàn)了這一點(diǎn),假如我們現(xiàn)在jq上面創(chuàng)建自己的方法,就把方法掛在jQuery.fn上面相當(dāng)于在原型上面加方法這里可以看到j(luò)query一切都是基于原型,所以呀,講原型,我用jquery來(lái)說(shuō)明,感受到原型的強(qiáng)大
本文轉(zhuǎn)載于:猿2048→https://www.mk2048.com/blog/blog.php?id=h22k11j&title=原型 - 實(shí)現(xiàn)自己的jQuery
總結(jié)
以上是生活随笔為你收集整理的原型 - 实现自己的jQuery的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： CSS3景深-perspective
- 下一篇： react实现多行文本超出加省略号