本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh)

本文作者: 苏洋

创建时间: 2013年01月25日
统计字数: 211字
阅读时间: 1分钟阅读
本文链接: https://soulteary.com/2013/01/25/write-js-lib.html

-----


# 从写自己的小脚本库说起

文章比较浅显，高手勿入。

感谢**@樱花坡道_CZT**同学纠错，文章已于<ins datetime="2013-05-21T10:30:00+00:00">2013-05-21</ins>更新，
添加了简单的选择器支持，以及新的隐式遍历操作元素。


DEMO页面(2013/05/25更新)：

- http://thecdn.sinaapp.com/page/demo/fakelib/

```js
                var length = elms.length;
                if (length) {
                    var tmp = {}
                    for(var i=0;i<elms.length;i++){
                        that = elms;
                    }
                    tmp.length = elms.length;
                    that = tmp;
                    delete tmp;
                } else {
                    return clear(that);
                }
```

对于IE6,7,8看DEMO就知道是没有打算支持的，对于非标浏览器做兼容支持的话，参考类似属性和方法多写一点判断就好了。


常常写小页面自己玩的同学有没有发现，偶尔需要的一些功能，如果引用JQ,PROTOTYPE,MOOTOOLS这些著名JS库的话，代价略大，感觉略重了点。

如果你也纠结这些，想让自己的小项目略完美一些，那么为什么不写一个自己的小脚本库呢。

可能有的同学写过很多了。像是下面的这种：

```js

	function toolDoSomeThingA(){
		//code...
	}
	function toolDoSomeThingB(){
		//code...
	}
	function toolDoSomeThingC(){
		//code...
	}
	function toolDoSomeThingD(){
		//code...
	}

```

这样是可以称作脚本库，比较简单直接，但是通常情况这不一定是一个最佳实践。

如果考虑到扩充不发生冲突的话，你的函数应该有一个命名空间，或者挂载在一个非WINDOW的对象之下。(特殊需求特殊考虑)

那么如果完成一个类似JQ，自己完全可以掌握，可以控制的脚本库呢？如果你感兴趣，那么就继续看下去吧:D

首先我们希望创建一个共有的元素来包装或者说来代理所有的操作，可以简化我们的重复操作，以及进行一些必要的变量保存。

然后我们希望这个元素的使用方法和JQEURY一样，可以JQUERY(ANY)来选择操作某个元素;

那我们不妨这样做，具体看注释：

```js
// 防止重复定义,函数重载
var soulteary = soulteary ||
function(e) {
	// 例子就限定带ID的元素,比较简单
	// 你可以根据你的项目对浏览器的支持
	// 扩展浏览器支持和方法,比如:document.querySelector
	// 或者自己写兼容IE的XPATH等...
	var target = document.getElementById(e) || target;
	return target;
}

```

接着, 我们开始扩充这个对象,把我们的工具函数都挂载上去.这里我们使用稳妥构造创建的方法,好处详见设计模式.


接下来我们要搞一个比较简单的,**仅支持webkit**的mini库,支持jquery的bind,unbind,创建callback,创建ajax.

至于其他浏览器，感兴趣的童鞋可以看完本文后扩充。

我们先来说说jquery的bind和unbind,

jquery代理了我们的绑定和解除绑定, 尤其是解除绑定,我们知道 removeEventListener这个函数需要传入相同的函数, 言简意赅的说就是, 你的函数的handle要一样。

文章开始说的那种定义式的函数，很容易解决，全局的名字就是他的句柄，但是闭包内的函数呢，函数内的函数呢，callback回来的函数呢。
这个时候，我们使用对象内部空间就有了用武之地。

我们可以先设计一个数据仓库，来存放我们在这个文档中的元素和元素下绑定的事件，以及事件下的函数们。
转换成伪代码就是这样。

```js

var funcList = {}; // 想想之中,这货该是这样的... { HTML_ELEMENT_ID: { EVENT: [ FUNCTION, ...] }, ... }, ... }

	funcList = {
		'a#click-me':{
			'click':[function A(){},function A(){}],
			'dbclick':[function A(){},function A(){}]
		}
	}

```

然后因为我们的句柄和原始函数都存在了这个对象中，解除绑定的时候，我们就也可以指定某个元素的某类事件，或者指定某元素，或者什么都不传入，卸载所有的事件了。

bind和unbind简单实现如下:


```js


var soulteary = soulteary ||
function(e) {

	var target = document.getElementById(e) || target;
	// 内部对象
	var me = new Object();
	var funcList = {}; // 想想之中,这货该是这样的... { HTML_ELEMENT_ID: { EVENT: [ FUNCTION, ...] }, ... }, ... }
	me.bind = function(type, func) {
		if(!target) {
			return this;
		}
		if(typeof func !== 'function') {
			return this;
		}

		// 例子就先管潮流浏览器 和非冒泡情况
		target.addEventListener(type, func, false);
		// 例子就先管单一事件 不进行不同类型的事件叠加管理
		funcList = funcList || {};
		funcList[e] = funcList[e] || [];
		funcList[e][type] = funcList[e][type] || [];
		if(!(func in funcList)) {
			funcList[e][type].push(func);
		};

		// V8太快了, 连续绑定, 基本感觉和写一起一样，
		// 莫非是V8的语句优化, 除非timeout设置特别大的时间.
		// 区别的话,有测试的同学知道 :D
		console.log(this, '@:', funcList)

		return this;

	}
	me.unbind = function(any) {
		var mode = arguments.length;
		switch(mode) {

		case 1:
			// 偷懒就先支持某类型吧
			for(var func in funcList) {
				for(var obj in funcList[func]) {
					if(obj == any) {
						for(var e in funcList[func][obj]) {
							if(typeof funcList[func][obj][e] == 'function') {
								target.removeEventListener(obj, funcList[func][obj][e], false);
							}
						}
					}
				}
			}
			break;
		case 0:
		default:
			for(var func in funcList) {
				for(var obj in funcList[func]) {
					for(var e in funcList[func][obj]) {
						if(typeof funcList[func][obj][e] == 'function') {
							target.removeEventListener(obj, funcList[func][obj][e], false);
						}
					}
				}
			}
		}
		return this;
	}




	return target?target:me;
}

```


看到上面的处理，有的同学会提问，什么叫做不处理事件叠加。

是这样的，之前元素可能绑定了事件，我们需要枚举和保存下来，等处理完我们的事件后，再把事件叠加上去。
这里有一个额外的处理，就是针对在元素内写死onclick之类的事件情况，我们要保存属性事件到自己的函数变量中，
然后obj.removeAttribute('onclick')来完全解除绑定...


我们接着来说下callback，我写的很简单，你可以扩充一下。

```js

me.callback = function(params){
	if (!params.url || !params.id) {return this;}
	params.id+='__cb';
	var dom = document.getElementById(params.id);
	if (dom) {dom.parentNode.removeChild(dom);}
	var dom = document.createElement('script');
		dom.type = 'text/javascript';
		dom.src = params.url;
		dom.id = params.id;
	var body = document.getElementsByTagName('body')[0];
		body.appendChild(dom);
	return this;
}

```

大概思路就是创建元素，把你的url请求的元素添加文档,之前的体验都是加在head中,但是实际上不算是太友好,IE head元素有个小坑,感兴趣的童鞋可以搜索一下,题外话了,就不说了,body尾部算是一个不错的选择.

接着我们来看看AJAX,同样很简单,随便写的.

```js


me.ajax = function(params) {
	if(!params.url) {return this;}

	// 这里做个最简单的实现
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) {
			params.callback = params.callback ||
			function(data) {
				eval(data);
				return true;
			}

			params.callback(xhr.responseText);
		}
		return false;
	}
	var r = new Date();
		r = r.getMilliseconds();
		r*=r;
	params.url += '?c=' + r;
	params.mode = params.mode || 'GET';
	xhr.open(params.mode, params.url, true);
	xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
	xhr.send();

	return this;
}


```

ajax回调的话，自定义比较多，这个参考jq或者mootools都可以...

然后是常见的属性赋值，这里少写一个获取，大家懂的。
如果你只是使用一般的标签和textarea的话...
至于多什么，自己判断type和浏览器，分别获取一下就好了，推荐做成list。

```js
me.text = function(str){
	// 这个可以自己补全
	if ('textarea' == target.type) {
		target.value = str;
	}else{
		target.textContent = str;
	}
	return this;
}
```

然后这个对象或许名字长了点，和楼主的英文名都撞一起了。
那么我们给他个alias
```js
var $ = soulteary;
```


然后我们就可以简单的使用下面的方法来进行便捷操作了.

```js
$('test-me').bind('click', function(){}).unbind('click').text('内容');
$('test-me').unbind();
$.ajax({url:'/?a=1'});
$.callback({url:'/?a=2'});
```

这个脚本的扩展还有很多，这里没有把全局的工具方法用prototype超类重写挂载到原型上,你可以在对象外部再来一层,把对象挂载上去,看起来会更加的美观.

感谢你耐心看完这篇浅显的渣文，欢迎吐槽，欢迎留言讨论。

最后，把上面的不完整版本的完整版本（绕嘛）贴一下。

```js
var soulteary = soulteary || function(e) {

    //这里添加你的选择器
    var me = function(e) {
        var that = this;
        //存储选择器选中的元素
        //这里添加你的选择器方法,DEMO仅支持简单的选择器 
        // h1#title      #title
        // .normal       li.normal       li
        //选择器不正确的时候清理对象
        var clear = function(e) {
            for (var o in e) {
                if (typeof o == "number") {
                    delete e[o];
                }
            }
            e.length = 0;
            return;
        }
        if (e && typeof e == 'string') {
            that.selector = e;
            if (e.indexOf('#') != -1) {
                var worker = e.toLowerCase().split('#');
                if (worker.length != 2) {
                    return clear(that);
                }
                var tagType = worker[0];
                var tagID = worker[1];
                var elem = document.getElementById(tagID);
                if (elem) {
                    if (tagType) {
                        if (elem.nodeName.toLowerCase() != tagType) {
                            that.content.length = 0;
                        }
                    } else {
                        that[0] = elem;
                        that.length = 1;
                    }
                } else {
                    return clear(that);
                }
            } else if (e.indexOf('.') != -1) {
                var worker = e.toLowerCase().split('.');
                if (worker.length < 2) {
                    return clear(that);
                }
                if (!document.getElementsByClassName) {
                    alert('如果你要支持古老的浏览器，请手动添加支持函数 :)');
                    return clear(that);
                }
                var tagType = worker[0];
                var tagClass = [];
                for (var i = 1; i < worker.length; i++) {
                    tagClass.push(worker[i]);
                }
                var elms = document.getElementsByClassName.apply(document, tagClass);
                var length = elms.length;
                if (length) {
                    if (tagType) {
                        var match = [];
                        for (var i = 0, j = elms.length; i < j; i++) {
                            if (elms[i].nodeName.toLowerCase() == tagType) {
                                match.push(elms[i]);
                            }
                        }
                        length = match.length;
                        if (length) {
                            elms = match;
                            for (var i = 0, j = elms.length; i < j; i++) {
                                that[i] = elms[i];
                                that.length = length;
                            }
                        } else {
                            return clear(that);
                        }
                    } else {
                        for (var i = 0, j = elms.length; i < j; i++) {
                            that[i] = elms[i];
                            that.length = length;
                        }
                    }
                } else {
                    return clear(that);
                }
            } else {
                var elms = document.getElementsByTagName(e);
                var length = elms.length;
                if (length) {
                    for (var i = 0, j = elms.length; i < j; i++) {
                        that[i] = elms[i];
                        that.length = length;
                    }
                } else {
                    return clear(that);
                }
            }
        } else {
            return clear(that);
        }
        //这里是支持的方法
        //设置内容方法
        that.text = function(str) {
            if (str) {
                for (var i = 0, j = that.length; i < j; i++) {
                    if ('textarea' == that[i].type) {
                        that[i].value = str;
                    } else {
                        that[i].textContent = str;
                    }
                }
                return that;
            } else {
                str = [];
                for (var i = 0, j = that.length; i < j; i++) {
                    if ('textarea' == that[i].type) {
                        str.push(that[i].value);
                    } else {
                        str.push(that[i].textContent);
                    }
                }
                return str;
            }
        }
        //保存一份函数列表
        that.funcList = that.funcList || [];
        //绑定函数
        that.bind = function(type, func) {
            if (!that.length || (typeof func !== 'function') || (typeof type !== 'string')) {
                return that;
            }
            for (var i = 0, j = that.length; i < j; i++) {
                that[i].addEventListener(type, func, false);
                funcList[type] = funcList[type] || [];
                funcList[type].push({
                    'rel': that[i],
                    'func': func
                })
            }
            return that;
        }
        //解除绑定
        that.unbind = function(any) {
            var mode = arguments.length;
            switch (mode) {
                case 1:
                    for (var i = 0, j = that.length; i < j; i++) {
                        for (var func in funcList) {
                            if (func == any) {
                                for (var j = 0, k = funcList[func].length; j < k; j++) {
                                    if (funcList[func][j]['rel'] == that[i]) {
                                        if (typeof funcList[func][j]['func'] == 'function') {
                                            that[i].removeEventListener(func, funcList[func][j]['func'], false);
                                        }
                                    }
                                }
                            }
                        }
                    }
                    return that;
                    break;
                case 0:
                default:
                    for (var i = 0, j = that.length; i < j; i++) {
                        for (var func in funcList) {
                            for (var j = 0, k = funcList[func].length; j < k; j++) {
                                if (funcList[func][j]['rel'] == that[i]) {
                                    if (typeof funcList[func][j]['func'] == 'function') {
                                        that[i].removeEventListener(func, funcList[func][j]['func'], false);
                                    }
                                }
                            }
                        }
                    }
                    return that;
                    break;
            }
        }
        return that;
    }
    return me.apply(null, [e]);
}
soulteary.callback = function(params) {
    if (!params.url || !params.id) {
        return false;
    }
    params.id += '__cb';
    var dom = document.getElementById(params.id);
    if (dom) {
        dom.parentNode.removeChild(dom);
    }
    var dom = document.createElement('script');
    dom.type = 'text/javascript';
    dom.src = params.url;
    dom.id = params.id;
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(dom);
    return true;
}

soulteary.ajax = function(params) {
    if (!params || !params.url ) {
        return false;
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            params.callback = params.callback || function(data) {
                data = JSON.parse(data);
                console.log(data);
                return true;
            }
            params.callback(xhr.responseText);
        }
        return false;
    }
    var r = new Date();
    r = r.getMilliseconds();
    r *= r;
    params.url += '?c=' + r;
    params.mode = params.mode || 'GET';
    xhr.open(params.mode, params.url, true);
    xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
    xhr.send();

    return true;
}


var $ = soulteary;
```