日期:2014-05-16 浏览次数:20469 次
?模仿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 ! "); }