面试：封装DOM

目录

架构：

封装添加class 和修改text 的方法：写在$ 函数下面

优化：第二个版本

for换成each优化的点：

第三个版本：

---

架构：

匿名自执行函数：

( function( window ){

        window.$ = jquery = function(nodeSelector){

             

        }

}) (window)

好处：

1. 自执行 -> 单例模式
2. 防止变量污染

封装添加class 和修改text 的方法：写在$ 函数下面

(function(window) {
	window.$ = jquery = function(nodeSelector) {
		let nodes = {};
		if (typeof nodeSelector === "string") {
			let temp = document.querySelectorAll(nodeSelector)
			for (let i in temp) nodes[i] = temp[i]
			//temp 伪数组，nodes 类数组
			nodes.length = temp.length
		} else {
			throw new Error('必须输入字符串')
		}
 
		//添加方法
		nodes.addClass = function(classes) {
			let className = classes.split(' ');
			//循环class
			className.forEach(value => {
				for (let i = 0; i < nodes.length; i++) {
					nodes[i].classList.add(value)
				}
			})
		}
 
		// 修改 text
		nodes.setText = function(text) {
			for (let key of nodes) {
				key.textContent = text
			}
		}
		return nodes
	}
})(window)

优化：第二个版本

call ：语法 call(obj,p1,p2) 

obj 是更改之后 this 指向的对象（必选），p1,p2是原始函数要传的参数（可选）

dom2.js 代码：

let $ = jQuery = (function(window){

        let jquery = function(nodeSelector){

                //真数组

                this.nodes = document.querySeletorAll(nodeSelector)

        }

        //原型方法包装

        jquery.prototype = {

                each: function(callback){

                       for (let i = 0; i < nodes.length; i++) {

                                callback.call(this, i, this.nodes[i])

                        }

                },

                //添加方法
                addClass:  function(classes){

                        let className = classes.split(' ');

                        className.forEach(value => {

                               this.each(function(index, obj){ obj.ClassList.add(value) })

                        })

                }

        }

        return function(nodeSelector){

                return new jquery(nodeSelector)

        }

})()

let $ = jQuery = (function(window) {
	let jquery = function(nodeSelector) {
		//真数组
		this.nodes = document.querySelectorAll(nodeSelector)
	}
	//原型方法包装
	jquery.prototype = {
		each: function(callback) {
			for (let i = 0; i < nodes.length; i++) {
				callback.call(this, i, this.nodes[i])
			}
		},
		//添加方法
		addClass: function(classes) {
			let className = classes.split(' ');
			className.forEach(value => {
				this.each(function(index, obj) {
					obj.classList.add(value)
				})
			})
		}
	}
	return function(nodeSelector) {
		return new jquery(nodeSelector)
	}
})()

for换成each优化的点：

将每个相似又独立的for循环，抽取出来，在架构上更加便于管理

第三个版本：

let $ = jQuery = (function(window){
	//dom 存储
	function Query(dom, selector){
		let i, len = dom ? dom.length : 0
		for(i = 0; i < len; i++) this[i] = dom[i]
		this.length = len
		this.selector = selector || ''
		return this
	}
	
	//生成 jQuery 对象
	function Z(elements, selector){
		return Query.call(this, elements, selector)
	}
	
	//具体的 dom 查找
	function qsa(element, selector){
		return element.querySelectorAll(selector)
	}
	
	Z.prototype = {
		//中央集权
		each(callback){
			[].every.call(this, function(el, index){
				return callback.call(el, index, el) !== false
			})
		},
		
		//查找的方法
		find(selector){
			let doms = []
			this.each(function(index, el){
				let childs = this.querySelectorAll(selector)
				doms.push(...childs)
			})
			return new Z(doms, selector)
		},
		eq(i){
			let doms = []
			this.each(function(index, el){
				if(i == index) doms.push(this)
			})
			return new Z(doms, this.selector)
		},
		remove(){
			this.each(function(index, el){
				this.remove()
			})
		}
	}
	//全局方法
	function isFunction(value) { return typeof value == 'function' }
	
	function $(nodeSelector){
		let doms = qsa(document, nodeSelector)
		return new Z(doms, nodeSelector)
	}
	
	$.isFunction = isFunction;
	
	return $
})(window)