日期:2014-05-16  浏览次数:20461 次

自己的js框架

?模仿jquery,写了自己的框架,只不过jquery的选择器是css的选择器功能没有实现,这个感觉有点困难,毕竟都是正则表达式,在写自己的框架的同时,也能了解一下jquery的工作原理,更好的进行开发

?

事先声明:此js比不了jquery只是在编写的过程中以个人的思路模仿jquery的部分功能 - 插件是怎么开发的,扩展是如何实现的,等等。jquery有自己强大的类似于css的选择器,我只做了id的功能


最外层的是通过
(function(){
......... //代码
})()
包装起来,为了防止和其他js声明的变量冲突

构造函数 _T = function(obj){........} 封装了DOM Element 对象,以便可以使用自己定义的方法(函数)去对这个对象进行各种原生js的操作. obj这个参数可以是DOM element的id 也可以是DOM element本身 或者是 _T创建的对象。

通过 window.t = window.ThirdteenDevil = function(obj){return new _T(obj)} 来返回由_T封装的对象,把window.t定义成返回一个由_T创建的对象的函数,使用的时候类似于t("id"),就是jquery中的$("#id"),这样可以获取到_T类创建的对象,以便使用自定义的各种方法

通过prototype属性为_T添加各种方法
_T.prototype={
? ? css:function(){},
? ? attr:function(){},
? ? data:function(){},
? ? ...
? ???
}
这样一来,通过t(obj)得到的对象就可以使用以上css,attr,data....等各种方法操作obj对象了。方法可以由使用此js的人自己扩展,类似于jquery的方法扩展。这个扩展功能依然是使用prototype来实现的。
至于插件,同jquery的插件扩展
扩展格式:
(function(t){
? ? t.plugs.自定义的插件名称 = function(){
? ?? ?? ? ......
? ?? ?? ? ......
? ?? ?? ? .....//内容
? ? }
})(t)
使用上面的格式依然是防止和其他变量冲突可以在(function(){....})()的作用域中定义自己的变量。
t.plugs是已经定义好的一个空的对象,通过给这个对象赋属性来扩展插件。


以下是代码??源文件和例子在附件中

/*
* thd-simple.js
* begin : 2010-11-12
* author : ThirdteenDevil
* e-mail : thirdteendevil@163.com
* qq : 181907667
*/

(function(){
	var _T = function(obj){

		//原生DOM element
		this.el = null;

		//ThirdteenDevil对象的标记
		this.constructor = "ThirdteenDevil";

		//如果是ThirdteenDevil对象则返回形式参数
		if(obj.constructor == "ThirdteenDevil"){
			return obj;
		}
		
		
		if(typeof(obj) == "string"){
			if(document.getElementById(obj)){
				this.el = document.getElementById(obj);
			}
		}else{
			this.el = obj;
		}
	}

	window.t = window.ThirdteenDevil = function(obj){return new _T(obj)}

	_T.prototype = {
		
		/*
		*回调函数,用于处理所有方法中function类型的参数
		*@param obj 任何类型
		*@return 如果@param obj是一个函数类型的对象,则返回这个函数的返回值,如果是其他类型则直接返回@param obj
		*/
		_preFormCallBack : function(obj){
			var _this = this;
			var ret = obj;
			if(typeof(obj) == "function"){
				ret = obj.call(_this.el,_this.el);
			}
			return ret;
		},
		
		/*
		*如果是无参数调用 .html()
		*@return 对象的innerHTML属性
		*---------------------------------------
		*如果是.html(str)
		*@param str 设置对象的innerHTML值
		*@return this 用于链式调用
		*/		
		html : function(v){
			if(v == undefined){
				return this.el.innerHTML;
			}else{
				var v = this._preFormCallBack(v);
				this.el.innerHTML = v;
				return this;
			}
		},		
		
		/*
		*如果是一个参数调用 .attr(str)
		*@param str DOM element的属性名
		*@return Dom element名为@param str属性的值
		*----------------------------------------
		*如果是二个参数 .attr(str,v)
		*@param str DOM element的属性名
		*@param v Dom element @param str 属性的值
		*@return this 用于链式调用
		*/
		attr : function(){
			if(arguments.length == 1){
				return this.el.getAttribute(arguments[0]);
			}
			if(arguments.length == 2){
				this.el.setAttribute(arguments[0],arguments[1]);
				return this;
			}
		},
		
		/*
		*除去DOM element的属性
		*@param str DOM element的属性名称
		*@return this 用于链式调用
		*/
		removeAttr : function(str){
			this.el.removeAttribute(str);
			return this;
		},

		/*
		*如果是无参调用 .css()
		*@return DOM element 的所有css属性
		*-----------------------------------------
		*如果是.css(str)
		*@param str css属性名 可以根据.css()方法来查询
		*@return 获取参数对应的css属性
		*----------------------------------------
		*如果是.css(str,value)
		*@param str css属性名  可以根据.css()方法来查询
		*@value 设置@param str的值为@value
		*@return this 用于链式调用
		*/
		css : function(){
			var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);}
			if( (arguments.length < 1) || (arguments.length > 2) ){
				if(arguments.length == 0){
					var cssAttrMap = [];
					for(var pro in CurrentStyle(this.el)){
						cssAttrMap.push([pro,CurrentStyle(this.el)[pro]]);
					}
					return cssAttrMap;
				}else{
					throw new Error("css function arguments must be between 1 and 2 ! ");
				}