实现一个jQuery的API心得

作者: 钢笔与橡皮 | 来源:发表于2018-02-05 14:43 被阅读0次

初探jQuery
如何实现一个jQuery的api
实现一个jQuery的API心得
实现一个 jQuery 的 API
前端基础入门五（掌握jQuery的常用api，实现动态效果）
用原生DOM实现一个jQuery的API
实现一个 jQuery 的 API
Angularjs选项卡
2018-08-22
实现jQuery的API

<!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>Document</title>
    <style>
        .red{ background:red; } 
        .blue{ background:blue }
    </style>
</head>
<body>
    <div id='xxx'>nihao</div>
    <div>nihao</div>
    <div>nihao</div>
    <div>nihao</div>
    <div>nihao</div>
<script> 
window.jQuery = function (nodeOrSelector) { 
    var node
    if(typeof nodeOrSelector==='string'){
        node=document.querySelector(nodeOrSelector)
    }else{
        node=nodeOrSelector
    }
    var allChildren = node.parentNode.children
    return{
        addClass:function(color){
            for (let i = 0; i < allChildren.length; i++) {
                allChildren[i].classList.add(color)   
            }
        },
        text:function(text){
            if(text===undefined){
                var texts=[]
                for (let i = 0; i < allChildren.length; i++) {
                    texts.push(allChildren[i].textContent)
                }
                return texts
            }
            else{
                for (let i = 0; i < allChildren.length; i++){ 
                    allChildren[i].textContent=text 
                }
            }
            
        }               
    }   
} 
window.$ = jQuery
var $div = $('div')
$div.addClass('blue') // 可将所有 div 的 class 添加一个 red
$div.text('hi') // 可将所有 div 的 textContent 变为 hi
</script>
</body>
</html>

1.通过在window.jQuery上添加一个函数声明命名空间，从而防止全局变量的产生。

考虑到用户可能传入的是一个节点或者是字符串，用 typeof nodeOrSelector==='string'进行判断。(这里很容易把typeof打成typeOf)
取到用户输出的节点后用node.parentNode.children来选择所有兄弟节点(包括自己)（如果要只选择兄弟节点可以对其遍历，剔除自身）
返回两个方法，调用对象的方法传入必要参数。
调取方法时先判断是否传入了参数从而将设置text和获取功能合二为一。