闭包＆链式操作（1）index.html main.js jQuery.html闭包＆链式操作闭包＆链式操作

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写jquery</title>
</head>

<body>
    <div class="test">你好1

    </div>
    <div class="test">你好2

    </div>
    <div class="test">你好3

    </div>
    <script src="jquery.js"></script>
    <script src="main.js"></script>
</body>

</html>

main.js

const api = jQuery('.test')//不返回元素们，返回一个api对象，我们可以拿到这个api
//这个api可以提供什么呢
//api.addClass('red')遍历刚才所有获取的元素率，添加.red的元素
api.addClass('red')
api.addClass('blue')
api.addClass('green')//链式操作
//链式操作//你用api调用了一个函数，这个函数返回了前面那个东西，于是可以继续再后面添加，return那个对象

//因为目前的api只用了一次，所以其实可以省略
//    jQuery('.test')
//     .addClass('red')
//     .addClass('blue')//链式操作
//     .addClass('green')//链式操作

//所谓高级的代码只是把那些过程省略，删掉了无用的代码


// obj.fn(p1)//函数里的this就是obj
// obj.fn.call(obj,p1)

jQuery.html

window.jQuery = function (selector) {//(selector)指的是接收一个选择器
    //window.jQuery()是我们提供的全局函数
   console.log('你好jquery')
   const elements = document.querySelectorAll(selector)//然后我们要找到对应的元素（找到所有的元素）
   //api 可以操作 elements
   //return 一个对象， 不 return  elements
   const api = {
       //闭包：函数访问外部的变量  例子：（elements）就是被访问的外部的变量
       addClass(className) {  // 相当于 "addClass" :function(){console.log(elements)}
        //最新的语法ES6把function去掉  addClass() {console.log(elements)}

        //这个函数可以在elements里面添加一些东西
        //我们需要在给每个element添加一个className
         //elements是个数组，所以我们要遍历数组
           for(let i=0;i<elements.length;i++){
               elements[i].classList.add(className)
           }
        //或者是
        // for(let i=0;i<elements.length;i++){
        //     const elements = elements[i]
        //     elements.classList.add(className)
        // }



           return api //也可以 return this
       }
   }
   return api //这里是不可以return this 这个this是window
}

闭包 ＆ 链式操作（1）

闭包＆链式操作（1）