仿jquery 编写自己的js库_javascript 写一个类似 jquery 的类库-优快云博客

本文介绍了一个简单的自制JavaScript库mJS的设计与实现过程。该库模仿jQuery风格，提供了基本的选择器功能及事件绑定方法。文章详细解释了如何通过mJS加载页面、选择DOM元素并绑定点击事件。

先思考alert(typeof $)的结果中的$，它是一个对象，也是一个函数。
所以美元符字面上是jquery，其实就是一个jq对象，里面可以接受函数，字符串（#xxx,.xxx,xxx... 分别表示ID、样式类名和标签名称），还有一种是对象（比如this）。

直接上代码（mJS文件）：

window.mjs = null; //创建全局对象，整个window就一个对象不需要分页面创建对象
//可重复调用的加载函数
function myAddEvent(obj,sEv,fn){
    if(obj.attachEvent){
        //如果加上函数，那么直接监听，否则添加函数
        obj.attachEvent('on' + sEv,fn);
    }else{
        obj.addEventListener(sEv,fn,false);
    }
}

//class选择器调用函数
function getByClass(oParent,sClass){
    var aEle=oParent.getElementsByTagName('*');//选择父元素的所有元素
    var aResult=[];
    var re=new RegExp('\\b'+sClass+'\\b','i');//正则边界
    var i=0;
    for(i=0;i<aEle.length;i++){
        if(re.test(aEle[i].className)){
            aResult.push(aEle[i]);
        }
    }
    return aResult;
}

//定义mJS对象
function mJS(vArg){//参数是变体变量
    this.elements=[];//选择器选择的元素扔到这个数组中
    switch(typeof vArg){
        //如果参数是函数
        case 'function':
            myAddEvent(window,'load',vArg);
            break;
        //如果参数是字符串
        case 'string':
            switch(vArg.charAt(0)){
                case '#'://id选择器参数应该为#号之后的字符段
                    var obj=document.getElementById(vArg.substring(1));
                    this.elements.push(obj);
                break;

                case '.'://class
                    this.elements=getByClass(document,vArg.substring(1));
                    break;

                default://标签
                    this.elements=document.getElementsByTagName(vArg);
            }
            break;
        //如果参数是对象。
        case 'object':
            this.elements.push(vArg);

    }

    if(window.mjs == null)
    {
       window.mjs = new mJS(vArg); 
    }

    return window.mjs;
}

//mjs对象最终 指向的是mJS
//对选择器函数绑定click事件
mJS.prototype.click=function(fn){
    var i=0;
    //对于返回器数组的内容
    for(i=0;i<this.elements.length;i++){
        myAddEvent(this.elements[i],'click',fn);
    }
}

function $m(vArg){

    if(window.mjs == null)
    {
       window.mjs = new mJS(vArg); 
    }

    return  window.mjs;
}

HTML调用实例：

<!DOCTYPE html>
<html>
<head>
	<title>lxl</title>
	<script type="text/javascript" src="./mJS.js">
	
		$m(function(){
			$m("p").click(function(){
		alert("点击我了哈");
		});
	});
	
	</script>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>

<p>点击我</p>
   
</body>
</html>