jQuery

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ae477b2518825671d205384

文章标签：

#javascript #ViewUI

封装一个函数

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
     <ul>
         <li id="item1">code<li>
         <li id="item2">code<li>
         <li id="item3">code<li>
         <li id="item4">code<li>
         <li id="item5">code<li>
    </ul> 
</body>
</html>


' 获取兄弟元素的 api'
function getSiblings(node){  
var allChild=node.parentNode.children  //获取所有的children

var array={length:0}  //创建可以空数组
for(let i=0;i<allChild.length;i++){
    if(allChild[i]!==item3){  
      array[array.length]=allChild[i]
      array.length+=1
    }
}
  return array
  
}
console.log(getSiblings(item3))

复制代码

var classes=['a','b','c'];	

 '给 item3 添加class'
	// var classes=['a','b','c'];	  //用数组存储样式名字
	// classes.forEach((value)=>item3.classList.add(value))  //遍历数组并将value 添加item3的class中
	
    '既能添加又能删除'
//	var classes={'a':true,'b':false,'c':true};
//		for( key in classes){
//			var value=classes[key]
//			if (value) {
//				item3.classList.add(key)
//			} else{
//				item3.classList.remove(key)
//			}
//		}
	'封装' 
	function addClass(node,classes){
		for( key in classes){
		var value=classes[key]
		if (value) {
			node.classList.add(key)
				   } else{
			node.classList.remove(key)
		     }
	    	}
	}
    addClass(item3,{'a':true,'b':false,'c':true})
复制代码

如果出现类似的代码就存在优化的可能

addClass函数优化后

	function addClass(node,classes){
		for( key in classes){
		var value=classes[key]
		 var methodName=value?'add':'remove'
		    //对象调一种方法  1.obj.x()  2. object['x']
			node.classList[methodName](key)  // add/remove
				  
	    	}
	}
复制代码

命名空间

	function getAllNode(node){
			var allChildren=node.parentNode.children
			//           item3  父节点   下的所有儿子	
		var box={length:0}  	
			//创建一个哈希
		for (let i=0;i<allChildren.length;i++) {
			if (allChildren[i]!==item3) {
				box[box.length]=allChildren[i]  //这样可以给一个维数组传值
				box.length+=1	  //
				} 
			}	
			return box
		}
		
    function addClass(node,classes){
		for( key in classes){
		var value=classes[key]
		 var methodName=value?'add':'remove'
		    //对象调一种方法  1.obj.x()  2. object['x']
			node.classList[methodName](key)  // add/remove
				  
	    	}
	}
    '命名空间'	
    window.cfdom={}
    cfdom.getAllNode=getAllNode
    cfdom.allClass=addClass
    
    cfdom.getAllNode(item3)
    cfdom.allClass(item3,{'a':true,'b':false,'c':true})	
	
复制代码

给共有属性添加方法

Node.prototype.getAllNode=function getAllNode(node){
		var allChildren=this.parentNode.children
		var box={length:0}  	
		for (let i=0;i<allChildren.length;i++) {
			if (allChildren[i]!==this) {
				box[box.length]=allChildren[i] 
				box.length+=1	  
				} 
			}	
			return box
		}
	console.log(item3.getAllNode())
	等同于
	console.log(item3.getAllNode.call(item3))


Node.prototype.addClass=function addClass(classes){  '括号内会默认传入item3'
		for( key in classes){
		var value=classes[key]
		 var methodName=value?'add':'remove'
		    //对象调一种方法  1.obj.x()  2. object['x']
			this.classList[methodName](key)  // add/remove
				  
	    	}
	}
	item3.addClass({'a':true,'b':false,'c':true})
	等同于
	item3.addClass.call(item3,{'a':true,'b':false,'c':true})

复制代码