手写jQuery框架

雨点打透心脏的1/2处 2022-06-16 12:21 206阅读 0赞

***功能的实现只是机械地调用，框架的编写才是代码的升华***

;
    (function(window) {
    	function jQuery(option) {
    		this.event=[];
            switch(typeof option){
            	case "function":addEvent(window,"load",option);
            	break;
            	case "string":switch(option.charAt(0)){
            		case "#":
            		  var obj=document.getElementById(option.substring(1));
            		  this.event.push(obj);
            		  break;
            		case ".":
            		  this.event=getClass(document,option.substring(1));
            		  break;
            		default:
            		break;	
            		
            	}
            	break; 
            	default:
            	break;
            }
    	}
    	jQuery.prototype={
    		click:function(fn){
    			/*
    			 *this是运行时绑定，指向的调用该方法的对象
    			 *this.event是一个数组，不能直接添加事件绑定，这里用到for循环 
    			 */
    			for(var i=0;i<this.event.length;i++){
    				addEvent(this.event[i],"click",fn);
    			}
    		},
    		css: function(){
    			
    		},
    		animate:function(){
    			
    		},
    		//……………………………各种方法
    	}
        function addEvent(obj,event,fn){//绑定事件
    		//console.log("nihao");
    		obj.addEventListener(event,fn,false);//采用addEventListener可以同时绑定多个事件
    		//console.log(event); 
    		      
    	}
        function getClass(ohtml,oclass){
        	var elementArr=ohtml.getElementsByTagName("*");
        	var result=[];
        	for(var i=0;i<elementArr.length;i++){
        		if(elementArr[i].className===oclass){
        			result.push(elementArr[i]);
        		}
        		
        	}
        	return result;
        }
    	function $(option) {
    	   return new jQuery(option);
    	}
    	
        window.jQuery=window.$=$;
    })(window)