`
devil13th
  • 浏览: 43410 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自己的js框架

框架jQueryCSSprototype正则表达式 
阅读更多

 模仿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 ! ");
				}
			}else{
				if(arguments.length == 1){
					return CurrentStyle(this.el)[arguments[0]];
				}else{
					this.el.style[arguments[0]] = this._preFormCallBack(arguments[1]);
					return this;
				}
			}
		},
				
		/*
		*如果是无参调用 .hasClass()
		*@return className属性值 
		*-----------------------------------
		*如果是.hasClass(v)
		*@param v className,
		*@return 判断DOM element是否含有名为@param v的className属性
		*/		
		hasClass : function(v){
			if(v == undefined){
				return this.el.className;
			}else{
				if(this.el.className != undefined){
					var classStr = " " + this.el.className + " ";
					var rep = new RegExp(" " +v+ " ","gi");
					return rep.test(classStr);
				}else{
					return false;
				}
			}
		},
		
		/*
		*为DOM element添加className属性值
		*@param v 要添加的className属性值
		*@return this用于链式调用
		*/
		addClass : function(str){
			var v = this._preFormCallBack(str);
			if(this.hasClass(v)){
				return this;
			}else{
				if(this.el.className){
					this.el.className += (" "+v);
					return ;
				}else{
					this.el.className = v;
				}
			}
		},
		
		/*
		*为Dom element删除className属性值
		*@param v 要删除的className属性值
		*@return this用于链式调用
		*/
		removeClass : function(v){
			if(this.hasClass(v)){
				var classStr = " " + this.el.className + " ";				
				var rep = new RegExp(" " + v + " ","gi");
				this.el.className = classStr.replace(rep," ");
			}else{
				return this;
			}
		},

		/*
		*为DOM element 添加/删除一个className属性值，有则删除，无则添加
		*@param str className的属性值也可以是一个回调函数，返回className的属性值
		*@return this 用于链式调用
		*/
		toggleClass : function(str){
			var v = this._preFormCallBack(str);
			if(this.hasClass(v)){
				this.removeClass(v);
			}else{
				this.addClass(v);
			}
			return this;
		},
		
		/*
		*如果无参调用 .scrollTop()
		*@return DOM element scrollTop属性值
		*----------------------------------------------
		*一个参数调用 .scrollTop(x)
		*@param x DOM element scrollTop属性值
		*@return this 用于链式调用
		*/
		scrollTop : function(){
			if(arguments.length == 1){
				this.el.scrollTop = arguments[0];
			}else{
				return this.el.scrollTop;
			}
		},

		/*
		*如果无参调用 .scrollLeft()
		*@return DOM element的scrollLeft属性值
		*----------------------------------------------
		*一个参数调用 .scrollLeft(x)
		*@param x DOM element scrollLeft属性值
		*@return this 用于立案时调用
		*/
		scrollLeft : function(){
			if(arguments.length == 1){
				this.el.scrollLeft = arguments[0];
			}else{
				return this.el.scrollLeft;
			}
		},
		
		/*
		*为DOM element添加事件
		*@param act : 事件名 click,mouseover,mouseout ....
		*@param cb : Function类型的回调函数
		*@param pObj : json格式的参数,回调函数中调用
		*/
		on : function(act,cb,pObj){
			var _this = this;
			if(window.addEventListener){//FF ...
				this.el.addEventListener(act,function(e){
					var e = e ? e : event;					
					//e.stopPropagation();//清冒泡
					cb.call(_this.el,e,_this.el,pObj)},false);
			}else if(window.attachEvent){//IE
				this.el.attachEvent("on"+act,function(e){
				var e = e ? e : event;
				//window.event.cancelBubble = true;//清冒泡
				cb.call(_this.el,e,_this.el,pObj)});
			}
			return this;
		},
		
		/*
		*把DOM element添加到this.el对象中
		*@param obj 可以是ThirdteenDevil对象 也可以是id字符串 或者是DOM element本身
		*@return this 用于链式调用
		*/
		append : function(obj){
			//把obj转成ThirdteenDevil对象后操作
			this.el.appendChild(new _T(obj).el);
		},		

		/*
		*把this.el对象添加到DOM element中
		*@param obj 可以是ThirdteenDevil对象 也可以是id字符串 或者是DOM element本身
		*@return this 用于链式调用
		*/
		appendTo : function(obj){
			//把obj转成ThirdteenDevil对象后操作
			new _T(obj).el.appendChild(this.el);
		},
		
		/*
		*getElementsByTagName实现
		*@param tag 元素标签名
		*@return 获取子元素标签是@param tag的所有子元素(已转成数组类型)
		*/
		getElementsByTagName : function(tag){
			var childs = this.el.getElementsByTagName(tag);
			var childArray = []
			for(var i = 0 , j = childs.length ; i < j ; i++){
				childArray.push(childs[i]);
			}
			return childArray;
		},
		
		/*
		*获取ThirdteenDevil中el对象的子对象有name属性为形参的对象集合
		*@param nameStr name属性的值
		*@return ThirdteenDevil中el对象的子对象有name属性为形参的对象集合(已转成数组)
		*/
		getElementsByName : function(nameStr){
			var els = []
			this.getElementsByTagName("*").each(function(o,i){
				if(nameStr == new _T(o).attr("name")){
					els.push(o);
				}
			})
			return els;
		},

		/*
		*如果是无参调用 .data()
		*@return Dom Element的data属性
		*----------------------------------
		*如果是一个字符串类型的参数 .data(str)
		*@param str data的属性名
		*@return data中@param str的属性值
		*----------------------------------
		*如果是一个对象类型的参数 .data(obj)
		*@param obj 拷贝obj的所有属性刀data中
		*@return this 用于链式调用
		*----------------------------------
		*如果是2个参数 .data(str,obj)
		*@param str 设置data中的属性
		*@param obj data中名为@param str的值
		*@return this 用于链式调用
		*/
		data : function(){			
			if(this.el.getAttribute("data") == undefined){
				this.el.setAttribute("data",{});
			}
			if(arguments.length == 1){
				if(typeof(arguments[0]) == "string"){
					return this.el.getAttribute("data")[arguments[0]];
				}else if(typeof(arguments[0]) == "object"){
					for(var pro in arguments[0]){
						this.el.getAttribute("data")[pro] = arguments[0][pro];
					}
					return this;
				}
			}
			if(arguments.length == 2){
				this.el.getAttribute("data")[arguments[0]] = arguments[1];
				return this;
			}
			if(arguments.length == 0){
				return this.el.getAttribute("data");
			}
		}
	}//_T.prototype end

	
	/*
	*扩展_T方法
	*
	*如果是一个参数 .extend(obj)
	*@param obj 封装好将要扩展的属性或方法集合
	*------------------------------------------
	*如果是二个参数 .extend(str,v)
	*@param str 扩展的属性名
	*@param v 扩展的属性名@param str的值或方法
	*
	*如果自定义的属性和_T中的属性重名 不会覆盖原有属性
	*/
	ThirdteenDevil.extend = function(){
		if(arguments.length == 1){
			for(var pro in arguments[0]){
				_T.prototype[pro] = arguments[0][pro];
			}
		}
		if(arguments.length == 2){
			_T.prototype[arguments[0]] = arguments[1];
		}
	}


	//插件
	ThirdteenDevil.plugs = {};

	
})()

//数组循环执行
Array.prototype.each = function(cb){
	for(var i = 0 , j = this.length ; i < j ; i++){
		cb.call(this[i],this[i],i);
	}
}


//数组移除某个值
Array.prototype.remove = function(obj){
	var r = null;
	for(var i = 0 , j = this.length ; i < j ; i++){
		if(obj == this[i]){
			r = this.splice(i,1);
			break;
		};
	}
	return r;
}

//得到数组中某个元素在数组中的索引值
Array.prototype.index = function(obj){
	for(var i = 0 , j = this.length ; i < j ; i++){
		if(obj == this[i]){
			return i;
		};
	}
}

//字符串去除前后空格
String.prototype.trim= function(){
    return this.replace(/(^\s*)|(\s*$)/g, "");  
}

 

 

 

方法的扩展：

t.extend("tt",function(){
	alert(this.el.value)
})

t("a").on("keyup",function(e,o){
	t(this).tt();
})




t.extend({
	t1: 1,
	t2: 2,
	id : "a",
	el : "1",//属性相同不会被覆盖
	m1 : function(){
		alert(this.el)
		alert(this.el.id);
		alert(this.t1);
	}
})


t("b").on("click",function(e,o){
	t(this).m1();
	alert("t1 :" + t(this).t1)
})

 

插件的编写：

(function(t){

	t.plugs.ScrollDoor = function(obj){
		this.menus = obj.menus;
		this.contents = obj.contents;
		this.hoverClass = obj.hover;
		this.blurClass = obj.blur;
		this.focusClass = obj.focus;
		this.evt = "click" || obj.evt;
	}

	t.plugs.ScrollDoor.prototype = {
		_clear : function(){
			var _this = this;
			this.menus.each(function(m,i){
				t(m).removeClass(_this.hoverClass);
				t(m).removeClass(_this.focusClass);
			})
			if((this.contents != undefined) && (this.contents.length != 0)){
				this.contents.each(function(m,i){
					t(m).css("display","none");
				})
			}
		},

		_hasContents : function(){
			if((this.contents != undefined) && (this.contents.length != 0)){
				return true;
			}else{
				return false;
			}
		},
		
		focus : function(index){
			this._clear();
			t(this.menus[index]).addClass(this.focusClass);
			if((this.contents[index] != undefined) && (this.contents.length != 0)){
				t(this.contents[index]).css("display","block");
			}
		},

		run : function(){
			var _this = this;
			this.menus.each(function(m,i){
				t(m).on(_this.evt,function(e,o){
					_this.focus(i);
				})
			})
		},

		add : function(){
			this.menus.push(arguments[0]);
			if(this._hasContents()){
				this.contents.push(arguments[1]);
			}
			this.run();
			this.focus(this.menus.length - 1);
		}

		
	}
	
})(ThirdteenDevil)


var sd = new t.plugs.ScrollDoor({
	menus : ["m01","m02","m03"],
	contents : ["c01","c02","c03"],
	hover : "hover",
	focus : "focus",
	blur : "blur",
	evt : "click"
})

sd.run();
sd.add("m04","c04");

 

所有文件都在附件中，详细例子见附件

 

0
顶
0
踩
分享到：
| 悟透JavaScript
评论
2 楼 devil13th 2010-11-19  
谢谢 兄弟 ，学js的时候jquery还没有出。。。 一点一点学的 呵呵
1 楼 87399126 2010-11-18  
JS没啥实际经验，但平时挺喜欢看这种书籍，发下我的读后感吧
1，append 函数跟appendTo貌似忘记返回this了
2 , 为什么不添加个each函数，这样可以把你的包装器T函数扩展为接受一个dom对象数组(比如以常见的“,”分割接受多个id值)，反正只是自己用的方便库总共也就10几20个函数  每个函数利用个each函数为包装器中的所有dom对象做一次操作比如（挑个简单的）
append : function(var){
      this.each(function(eli){
             eli.appendChild(new _T(var));
      })
}
关于each函数（each：function(fn){..............}）的实现无非就是对包装器对象里的对象数组的一次遍历，有个关键点就是类似你这个事件添加函数的做法用fn.call(this,this.le[i])，使之fn第一个参数指向当前遍历到的dom对象。
而且既然你在后面已经添加了byTagName等返回Dom数组的方法，有了each函数就可以返回一个包装器对象了，这样在形式上也统一一点。
3，事件添加函数，没那个json参数会好读非常多。可能看的书还不够深入，但是我还是觉得这个参数在实际应用中出现的概率不会太大。
4，看了你整理的库还是学到了很多东西，你是直接看的jquery的库学习javascript的吗？
你的博客写的很好，不想别的人东西基本都是挪来挪去的。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    10大js框架 javaScript框架

    在探讨“十大JavaScript框架”这一主题时，我们深入解析了多个关键框架，这些框架在现代Web开发中扮演着至关重要的角色。以下是对每个框架的详细分析： ### 1. Prototype Prototype是最早一批的JavaScript库之一，...

    CSS框架与JS框架结合

    书籍作者Stephen Radford通过构建自己的Web应用，深入介绍了Bootstrap和AngularJS的最新技术，让开发者可以学习如何利用这两个框架来构建现代的网页应用。书籍中可能包含了Bootstrap的栅格系统、排版、表格、表单、...

    JS框架实例

    在"JS框架实例"中，我们将主要关注JavaScript框架如何提升开发效率和用户体验。首先，框架如React、Angular和Vue.js等，它们各自具有独特的特性和用途。React是由Facebook维护的库，它以组件化开发著称，允许开发者...

    JavaScript框架资源整合.part2

    JavaScript框架资源整合.part2

    图片展示js框架

    "图片展示js框架"是指使用JavaScript编写的用于处理图片展示的库，它提供了丰富的API和预设样式，使得开发者能够快速集成到项目中。常见的图片展示JS框架有Fancybox、Magnific Popup、Viewer.js等。这些框架通常具有...

    比较几个流行的JavaScript框架的性能

    本篇文章将深入探讨几个流行的JavaScript框架——React、Angular、Vue.js和Ember.js的性能差异，旨在为开发者提供决策参考。 首先，React是由Facebook开发并维护的库，主要用于构建用户界面，特别是单页面应用（SPA...

    自定义JS类框架

    "自定义JS类框架"指的是开发者根据自身需求，利用JavaScript语言特性（如原型链、闭包、模块化等）和jQuery库，构建的一种自定义的框架。这个框架可能是为了简化DOM操作、提供更高级别的API、优化性能或者实现特定的...

    简易javascript框架

    仿照 jquery源码编写的 简易框架的源码 出自的妙味课堂远程课

    相册框架--百度图片JS框架

    其中，“百度图片JS框架”就是一个专门为创建相册功能设计的JavaScript库，它旨在简化图片展示和管理的复杂性，帮助开发者快速构建出具有专业级体验的相册应用。 **一、框架核心功能** 1. **图片加载优化**：百度...

    很好js后台框架,很不错哦

    4. **NestJS框架**：NestJS是一个渐进式的企业级JavaScript框架，它受到了Angular的影响，引入了依赖注入和模块化等概念。NestJS旨在提高代码的可测试性和可维护性，适用于构建大型、复杂的Web应用。 5. **Total.js...

    javascript框架

    一个javascript框架

    JavaScript框架

    JavaScript框架如React、Vue.js和Angular都提供了构建高效、响应式和交互式导航条的方法。 1. **React**：由Facebook开发的React是一个用于构建用户界面的库，特别擅长构建组件化的应用。React Navigation是一个...

    Ext框架JavaScript开源框架

    Ext框架JavaScript开源框架Ext框架JavaScript开源框架

    javascript常见的7个框架

    "JavaScript 框架详解" 在 JavaScript 开发中，框架扮演着非常重要的角色。选择合适的框架可以提高开发效率，简化代码编写，提高应用程序的性能。在面试中，框架也是常被问到的题目之一。下面我们将详细介绍七个...

    JQuery框架 JS框架 JS javascript

    在标题和描述中提到的“JQuery框架 JS框架 JS javascript”表明我们将探讨JQuery如何作为JS的一个强大工具，帮助开发者创建功能丰富且视觉效果出色的网页系统。 1. **JQuery的核心概念** - **选择器**：JQuery的...

    基于鸿蒙js框架实现的wearable五子棋软件.rar

    1. **组件化开发**：鸿蒙JS框架支持组件化开发模式，开发者可以将应用拆分为多个可复用的组件，每个组件都有自己的生命周期和属性，便于维护和扩展。 2. **事件处理**：JavaScript语言的事件驱动特性在鸿蒙JS框架中...

    国产js框架 带中文+实例API 堪比jquery

    在当前的Web开发领域，JavaScript框架扮演着至关重要的角色，它们为开发者提供了高效、便捷的工具，以简化前端开发过程。"国产js框架"是针对这个市场需求而诞生的一类框架，旨在提供与国际知名框架如jQuery类似的...

    8大流行JS框架 10大新的最具潜力JS框架

    JavaScript框架在Web开发中起着至关重要的作用，它们简化了前端开发，提供了丰富的交互性和高效性能。以下是对8个流行JavaScript框架和10个新晋潜力框架的详细说明： 1. **Dojo**：Dojo Toolkit是一个全面的...

    来自人家公司的JS框架

    【标题】"来自人家公司的JS框架"所提及的是一个专门针对JavaScript和CSS设计的框架，这类框架通常是为了简化Web开发，提高效率并提供统一的代码规范。JavaScript是一种广泛用于前端和后端开发的动态编程语言，而CSS...

    js框架组件代码

    JavaScript框架组件代码是Web开发中的重要组成部分，它们用于构建交互性强、用户体验良好的前端应用。JavaScript是一种广泛使用的客户端脚本语言，常用于实现网页的动态功能和数据交互。在这个压缩包中，我们有三个...

Magicbox
Global site tag (gtag.js) - Google Analytics