原生js封装jquery

来源:互联网 发布:xp系统cpu优化工具 编辑:程序博客网 时间:2024/05/28 11:28

原生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,设计模式和面向对象一定要掌握好

原创粉丝点击