JS#4 jQuery初探
2018-12-05 本文已影响8人
Yixi_Li
初探jQuery简单源码
1.封装两个函数
function getSiblings(node){}
function addClass(node, classes){}
2.命名空间
var dom = {}
dom.getSiblings(node)
dom.addClass(node, {a: true, b: false})
3.能不能把 node 放在前面
node.getSiblings()
node.addClass()
(1)方法一：扩展 Node 接口
直接在 Node.prototype 上加函数
(2)方法二：新的接口 BetterNode
function Node2(node){
return {
element: node,
getSiblings: function(){ },
addClass: function(){ }
}
}
let node =document.getElementById('x')
let node2 = Node2(node)
node2.getSiblings()
node2.addClass()
4.把 Node2 改个名字吧
function jQuery(node){
return {
element: node,
getSiblings: function(){ },
addClass: function(){}
}
}
let node =document.getElementById('x')
let node2 =jQuery(node)
node2.getSiblings()
node2.addClass()
5.再给个缩写吧 alias
window.$ = jQuery
例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.red{
color:red;
}
</style>
</head>
<body>
<div id="item">111</div>
<script>
window.jQuery=function(nodeOrSelector) {
let nodes = {};
if (typeof nodeOrSelector === 'string') {
let temp = document.querySelectorAll(nodeOrSelector);
console.log(temp);
for (let i = 0; i < temp.length; i++) {
nodes[i] = temp[i];
}
nodes.length = temp.length;
console.log(nodes);
}
else if (nodeOrSelector instanceof Node) {
nodes = {
0: nodeOrSelector,
length: 1
}
}
nodes.addClass=function(value){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value);
}
}
nodes.setText= function (value) {
for(let i=0;i<nodes.length;i++){
nodes[i].textContent=value;
}
}
return nodes;
}
window.$ = jQuery;
var $div = $('div');
$div.addClass('red'); // 可将所有 div 的 class 添加一个 red
$div.setText('hi'); // 可将所有 div 的 textContent 变为 hi
</script>
</body>
</html>
