原生js封装jquery

原生js封装jquery

由于本人经验优先，对有些解释也是含糊不清，模棱两可，大家在借鉴的同时可以深思一下
1. 如何封装$符

// 1.把$挂载在window对象上
(function (window) {//这个是参数
// body...
//构造函数使用
function Jquery(){

    }
function $(){
new Jquery(); //jquery实例
    }
    window.Jquery=window.$=$;
})(window)//这个是window对象那

在js中，所有的操作都是基于对对象的方法的使用，例如function，其实就是一个Function对象的实例化，很多js api方法都是基于对象方法的使用，alert()，弹出对话框，其实就是window对象下的方法，可谓说是，js是一门基于原型的面向对象语言,像其他后台语言一样，有封装 继承 多态，但是它不像java语言一样，有那么强的特征

class person{//定义人这一个类
    属性
    行为
}

这是一个java的类，一眼就可以看出来这是定义了一个person的类

function Person(){ //普通函数function对象 构造函数->类
this.name="max";
this.sun=function(){}
}
//function 通过字面量的行式Function创建的实例
var a = new Person();
console.log(a.name); //max

通过构造函数方式，定义一个person类，在类中定义属性和方法，通过new字符一个Person对象的实例，其中，a继承person的所有方法和属性,在构造函数时，this指向实例化对象a
2. 封装的部分jquery,id,class,标签，以及事件

// 1.把$挂载在window对象
function Jquery(arguments) { //本质就是Functoion的实例对象 prototype arguments this
// body...
this.event=[];   //在构造函数时，this指向实例化对象 复制对象（继承）
switch(typeof arguments){
case "function": //代表传进来是函数
            myAddEvent(window,"load",arguments);
break;
case "string":
switch(arguments.charAt(0)){
case "#":
var obj=document.getElementById(arguments.substring(1)); // 去掉第一个#
this.event.push(obj);
break;
case ".":
this.event=getClass(document,arguments.substring(1));
break;
default:
this.event=getTags(document,arguments);
break;
            }
break;
case "object":
break;
    }
}
//给函数绑定事件
function myAddEvent(obj,sev,fn){
if(obj.addachEvent){
        obj.addachEvent("on"+sev,fn);
    }else{
        obj.addEventListener(sev,fn,false);
    }   
}
//遍历所有的元素，找到所有相同的class名称元素
function getClass(ohtml,oclass){ //解决兼容性问题
var myElement=ohtml.getElementsByTagName("*");//查找到所有元素
var result=[]; //element元素
for(var i=0;i<myElement.length;i++){
if(myElement[i].className==oclass){
            result.push(myElement[i])
        }
    }
return result;
}
//找到dom节点下的所有标签元素
function getTags(ohtml,otag){
var myElement=ohtml.getElementsByTagName("*");//查找到所有元素
var result=[];
for(var i=0;i<myElement.length;i++){
if(myElement[i].tagName==otag.toUpperCase()){
            result.push(myElement[i])
        }
    }
return result;
}
Jquery.prototype={
    click:function(fn){
for(var i=0;i<this.event.length;i++){
            myAddEvent(this.event[i],"click",fn)
        }
    }
}
function $(arguments){
return new Jquery(arguments);
}

一切基于js的操作，都是基于对象的操作，如果想要学好js,设计模式和面向对象一定要掌握好