面向对象 #

class Person(){
	consrtuctor(name,age){
		this.name = name
		this.age = age
		this.sayName = function(){
			console.log(this.name)
		}
	}
}
let p = new Person("kkb",8)

__ptoto__ === constructor(构造函数).prototype

<div id="box" data-kkb="8">box</div>
let box = document.querySelector("#box")
box.dataset.kkb = 20;
box.onclick = function(e){
	let {target} = e
	console.log(target)
}

let f1 = function(){
	console.log(this)
}
let f2 = ()=>{
	console.log(this)
}
document.onclick = f1
document.body.onclick = f2

class Drag{
	constructor(f){
		this.f = f
	}
}

f1();  //windows
f2();  //windows
document.onclick();  //document
document.body.onclick();  //windows
new Drag(f1).f();  //drag{}
new Drag(f2).f();  //windows

class Person{
	constructor(name,age){
		this.name = name
		this.age = age
	}
}
class Teacher extends Person{
		constructor(name,age){
			//如果在子类中定义constructor，一定在这里调用super
			super(name,age)
			this.speciality = "讲课"
	}
}

class baseDrag{
        //元素起始的位置
        startEl= {}
        //鼠标起始的位置
        startMouse = {}
        //将该元素设置为私有属性，可实现不同元素多次复用
        #el = null
        //构造函数
        constructor(el) {
            this.#el = el  //将传进来的元素进行赋值
            this.start()
        }
        //摁下时要做的事
        start(){
            let move = (e)=>{
                // console.log(e)
                this.move(e)
            }
            //监听鼠标按住的事件
            this.#el.addEventListener("mousedown",(e)=>{
                //记录鼠标开始位置
                this.startMouse={
                    x:e.clientX,
                    y:e.clientY
                }

                //自定义内容
								this.onDragStart&&this.onDragStart()

                //监听鼠标移动事件，调用move事件
                document.addEventListener("mousemove",move)
                document.addEventListener("mouseup",()=>{
                    document.removeEventListener("mousemove",move)
										this.end()
                },{once:true})
            })

        }
        //移动时要做的事，对元素位置进行改变
        move(e){
            //记录鼠标当前位置
            let nowMouse = {
                x:e.clientX,
                y:e.clientY
            }
            //计算出当前移动的距离
            let disMouse = {
                x: nowMouse.x - this.startMouse.x,
                y: nowMouse.y - this.startMouse.y
            }
						//自定义内容
						this.ondragmove&&this.ondragmove()
        }
				end(){
					//自定义内容
					this.ondragend&&this.ondragend()
				}
    }

class Event {
        events = {}  //事件池

        on(eventName, Fn) {  //添加一个事件处理
            if (!this.events[eventName]) {
                this.events[eventName] = []
            }
            if (!this.events[eventName].includes(Fn)) {
                this.events[eventName].push(Fn)
            }
        }

        off(eventName, Fn) {  //删除一个事件处理
            if (!this.events[eventName]) {
                return
            }
            this.events[eventName] = this.events[eventName].filter(item => item != Fn)
        }

        dispatch(eventName, ...arg) {  //触发事件
            if (!this.events[eventName]) {
                return
            }
            this.events[eventName].forEach(item => {
                item.call(this, ...arg)  //重新指向
            })
        }
    }

class JQuery {
        constructor(arg, root) {
            root = root || $(document, {}) //把上次的操作对象存入this的prevObject
            this["prevObject"] = root
            if (typeof arg === "string") {
                //如果是一个字符串类型，就先获取元素然后通过setElement把元素绑定在this上
                let ele = document.querySelectorAll(arg)
                this.setElement(ele)
            } else if (typeof arg === "object") {
                //如果是一个对象类型，就通过setElement把元素都绑定在this上
                this.setElement(arg)
            } else if (typeof arg === "function") {
                //如果传入是一个函数，在文档读完之后执行这个函数
                //DOMContentLoaded 文档读完
                //onload 资源也加载完
                window.addEventListener("DOMContentLoaded", arg)
            }
            this.cssHooks = {}  //设置css代理
        }
        eq(index) {
            //当用户调用eq方法后，这会使操作对象进行改变，返回把上一次的this传入
            return $(this[index], this)  //加上$()实现链式操作，返回一个JQuery对象
        }

        //调用end方法，返回我们上一次的操作对象
        end() {
            return this["prevObject"]
        }

        setElement(eles) {
            if (eles.length === undefined) {
                //如果传进去的是一个元素，则把length设为1，方便后续进行循环操作
                this[0] = eles
                this.length = 1
            } else {
                for (let i = 0; i < eles.length; i++) {
                    this[i] = eles[i]
                }
                this.length = eles.length
            }
        }

        click(fn) {
            //依次添加事件
            for (let i = 0; i < this.length; i++) {
                this[i].addEventListener("click", fn)
            }
            return this //将这个实例化对象接着返回
        }

        //添加事件
        on(eventNames, fn) {
            //eventNames eventNames可以存放多个事件名称，每个事件名称用空格隔开
            eventNames = eventNames.trim().split(" ");
            eventNames = eventNames.filter(item => item)
            for (let i = 0; i < this.length; i++) {
                for (let j = 0; j < eventNames.length; j++) {
                    this[i].addEventListener(eventNames[j], fn)
                }
            }
        }
        //添加样式
        css(...arg) {
            if (typeof arg[0] === "string") {  //string不是String
                if (arg.length > 1) {
                    //两个参数设置样式
                    for(let i = 0;i < this.length;i++){
                        JQuery.setStyle(this[i],arg[0],arg[1])
                    }
                } else {
                    //一个参数获取样式
                    return JQuery.getStyle(this[0],arg[0])  //默认获取第一个元素
                }
            } else if (typeof arg[0] === "object") {  //object不是Object
                //批量设置样式
                for(let i = 0;i<this.length;i++){
                    for(let s in arg[0]){
                        //s:key值   arg[0][s]:value值
                        JQuery.setStyle(this[i],s,arg[0][s])
                    }
                }
            }
            return this //链式操作
        }
        setStyle(el,attr,val){
            if(attr in this.cssHooks){
                //如果attr这条是一个样式，用户设置hooks，直接调用hooks把设置权交还给用户
                $.cssHooks[attr].set(el,val)
            }else {
                el.style[attr] = val
            }
        }
        getStyle(el,attr){
            if(attr in this.cssHooks){
                return $.cssHooks[attr].get(el)
            }
            return getComputedStyle(el)[attr]
        }
    }
    function $(...arg) {
        return new JQuery(...arg)
    }