每個第一次使用jq的開發者都感到驚嘆,jq的$太神奇了,究竟是怎麼做到的使用\$控制dom 贊嘆前人之餘,探究其本源才是前端開發者應該做的事,社區常常說,不要重覆造輪子, 可是啊,連輪子都造不出來,又怎麼去瞭解在什麼環境下用什麼輪子,怎麼樣才可以造成更加優秀的輪子, 不同階段對前端有不同的理解,作為 ...
每個第一次使用jq的開發者都感到驚嘆,jq的$太神奇了,究竟是怎麼做到的使用$控制dom
贊嘆前人之餘,探究其本源才是前端開發者應該做的事,社區常常說,不要重覆造輪子,
可是啊,連輪子都造不出來,又怎麼去瞭解在什麼環境下用什麼輪子,怎麼樣才可以造成更加優秀的輪子,
不同階段對前端有不同的理解,作為一名程式員,本就是沒有盡頭,靜下心來,和別人比一比,多借鑒前人的發展,取其精
華去其糟粕,不要閉門造車,做一名不斷學習的前端開發者
回頭看來jq已經逐漸在不斷的學習中揭開了他神秘的面紗,讓我想看看美麗的$是怎麼出生的
- jQuery只有一個全局變數$ 那一定是掛載在window上面的
(function (window){
var jQuery = function (selects) {
}
window.$ = jQuery;
}
)(window)可愛的$就指向JQuery的實例了當我們$("#id")就相當於 jQuery("#id")
那麼現在就要處理獲取到的dom元素
(function (window) {
function jQuery(selects) {
return new jQuery.fn.init(selects)
}
jQuery.fn = {} //創建掛載函數
jQuery.fn.init = function (selects) {
var dom = [].slice.call(document.querySelectorAll(selects))
var i = 0;
var len = dom ? dom.length : 0
for (i = 0; i < len; i++) {
this[i] = dom[i]
}
this.length = len
this.selects = selects || ' ';
}
window.$ = jQuery; //註意這裡jQuery指向window
})(window)現在我們就已經將$()裡面的dom捕捉到了,請轉化成為數組,利於後面的操作
下一步就是在原型鏈上面創建jquery的方法了
(function (window){
var jQuery = function (selector){
return new jQuery.fn.init(selector) //這裡必須構造函數要不放怎麼去獲取節點信息
}
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:0
for (i = 0; i < len; i++) {
this[i] = dom[i]
}
console.log(len,selector);
this.length = len;
this.selector = selector || ' '
}
int.prototype = jQuery.fn
window.$ = jQuery;
})(window)我們實現了類似jq的val()方法了
試驗一下
<!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的標簽名為${p.getNodeName()}`); //獲取節點名稱
console.log(p.val());
</script>
</body>
</html>
最關鍵的一點使用jQuery.fn的方式利於拓展,上面代碼體現了這一點,假如我們現在jq上面創建自己的方法,就把方法掛在jQuery.fn上面相當於在原型上面加方法
這裡可以看到jquery一切都是基於原型,所以呀,講原型,我用jquery來說明,感受到原型的強大
