JS#4 jQuery初探

作者: Yixi_Li | 来源:发表于2018-12-05 22:00 被阅读8次

JS#4 jQuery初探
初探jQuery
jQuery 初探
初探jQuery
jQuery初探
jQuery初探
Jquery初探
初探jQuery
JQuery初探
jQuery初探

初探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>