Besoin de critique sur mon code

Bonjour !

Je présente mon mini-framework, un Jquery-like en plus léger, qui a pour but de me faire évoluer en JavaScript et à terme d’être utiliser dans mes projets.

Le code

var parser =
{
	init : function(string)
	{
		if(typeof string === 'string' && string !== '')
		{
			if(string.indexOf(',') !== -1)
			{
				var tmp = string.split(','), returned = [], reBuild;
				for(var i = 0, tmpLength = tmp.length; i < tmpLength; i++)
				{
					reBuild = this.init(tmp[i]);
					for(var a = 0, reBuildLength = reBuild.length; a < reBuildLength; a++)
					{
						returned.push(reBuild[a]);
					}
				}
				return returned;
			}

			var numberOfElement = string.split(' '), parent = document;
			for(var i = 0, numberOfElementLength = numberOfElement.length; i < numberOfElementLength; i++)
			{
				parent = this.initSearch(numberOfElement[i], parent);
			}
			return parent;
		}
		else if(typeof string === 'object')
		{
			return Array(string);
		}
		else
		{
			return undefined;
		}
	},
	initSearch : function(string, parent)
	{
		var firstChar = string.charAt(0);
		var idToSearch = (firstChar === '.' || firstChar === '#') ? string.substring(1, string.length) : string;

		if(firstChar === '#') // id
		{
			return this.searchId(idToSearch, parent);
		}
		else if(firstChar === '.') // class
		{
			return this.searchClass(idToSearch, parent);
		}
		else // tag
		{
			return this.searchTag(idToSearch, parent);
		}
	},
	searchId : function(string, parent)
	{
		var tmp = Array();
		if(parent.length === undefined)
		{
			tmp.push(parent.getElementById(string));
			return tmp;
		}
		else
		{
			for(var i = 0, parentLength = parent.length; i < parentLength; i++)
			{
				tmp.push(parent[i].getElementById(string));
			}
			return tmp;
		}
	},
	searchClass : function(string, parent)
	{
		var tmp = Array();
		if(parent.length === undefined)
		{
			var pattern = new RegExp("(^| )" + string + "( |$)"), e = parent.getElementsByTagName('*');
			for(var i = 0, eLength = e.length; i < eLength; i++)
			{
				if(pattern.test(e[i].className))
				{
					tmp.push(e[i]);
				}
			}
			return tmp;
		}
		else
		{
			for(var i = 0, parentLength = parent.length; i < parentLength; i++)
			{
				var pattern = new RegExp("(^| )" + string + "( |$)"), e = parent[i].getElementsByTagName('*');
				for(var i = 0, eLength = e.length; i < eLength; i++)
				{
					if(pattern.test(e[i].className))
					{
						tmp.push(e[i]);
					}
				}
			}
			return tmp;
		}
	},
	searchTag : function(string, parent)
	{
		var tmp = Array();
		if(parent.length === undefined)
		{
			var allChildren = parent.getElementsByTagName(string);
			for(var i = 0, allChildrenLength = allChildren.length; i < allChildrenLength; i++)
			{
				tmp.push(allChildren[i]);
			}
			return tmp;
		}
		else
		{
			for(var i = 0, parentLength = parent.length; i < parentLength; i++)
			{
				/*if(parent[i].length !== undefined)
				{
					tmp.push(parent[i][0].getElementsByTagName(string));
				}
				else
				{*/
					var allChildren = parent[i].getElementsByTagName(string);
					for(var i = 0, allChildrenLength = allChildren.length; i < allChildrenLength; i++)
					{
						tmp.push(allChildren[i]);
					}
				//}
			}
			return tmp;
		}
	}
};

// engine

function allFunction()
{
	this.elements = new Array();
	this.fctEvt = new Array();
	this.puts = function(toPuts)
	{
		this.elements.length = 0;
		for(a in toPuts)
		{
			this.elements.push(toPuts[a]);
		}
	};
};

//basical function

allFunction.prototype.each = function(callback)
{
	for(a in this.elements)
	{
		callback.call(this.elements[a]);
	}
	return this;
};

//dom

allFunction.prototype.append = function(node)
{
	for(a in this.elements)
	{
		this.elements[a].appendChild(node);
	}
	return this;
};

//event

allFunction.prototype.click = function(callback, fctName)
{
	return this.attachEvent('click', callback, fctName);
};

allFunction.prototype.dblclick = function(callback, fctName)
{
	return this.attachEvent('dblclick', callback, fctName);
};

allFunction.prototype.mousedown = function(callback, fctName)
{
	return this.attachEvent('mousedown', callback, fctName);
};

allFunction.prototype.mouseup = function(callback, fctName)
{
	return this.attachEvent('mouseup', callback, fctName);
};

allFunction.prototype.change = function(callback, fctName)
{
	return this.attachEvent('change', callback, fctName);
};

allFunction.prototype.attachEvent = function(action, callback, fctName)
{
	if(fctName !== '') { this.fctEvt[fctName] = callback; }
	if(this.elements[0].addEventListener)
	{
		for(a in this.elements)
		{
			this.elements[a].addEventListener(action, callback, false);
		}
	}
	else if(this.elements[0].attachEvent)
	{
		for(a in this.elements)
		{
			this.elements[a].attachEvent('on' + action, callback);
		}
	}
	return this;
};

allFunction.prototype.un = function(action, fctName)
{
	if(this.elements[0].removeEventListener)
	{
		for(a in this.elements)
		{
			this.elements[a].removeEventListener(action, this.fctEvt[fctName], false);
		}
	}
	else 
	{
		for(a in this.elements)
		{
			this.elements[a].detachEvent('on' + action, this.fctEvt[fctName]);
		}
	}
	return this;
};

//effect

allFunction.prototype.hide = function()
{
	for(a in this.elements)
	{
		this.elems[a].style.display = 'none'; 
	}
	return this;
};
allFunction.prototype.show = function()
{
	for(a in this.elements)
	{
		this.elements[a].style.display = ''; 
	}
	return this;
};
allFunction.prototype.toggle = function()
{
	for(a in this.elements)
	{
		this.elements[a].style.display = (this.elements[a].style.display === 'none' || '') ? 'block' : 'none'; 
	}
	return this;
};
allFunction.prototype.morph = function(css)
{
	for(a in this.elements)
	{
		this.elements[a].style.display = (this.elements[a].style.display === 'none' || '') ? 'block' : 'none'; 
	}
	return this;
};

// style

allFunction.prototype.css = function(css)
{
	for(a in this.elements)
	{
		for(b in css)
		{
			this.elements[a].style[b] = css[b];
		}
	}
	return this;
};

allFunction.prototype.addClass = function(className)
{
	var old = '', newClass = '';
	for(a in this.elements)
	{
		old = this.elements[a].className;
		newClass = (old != '')  ? old + ' ' + className : className;
		this.elements[a].setAttribute('class', newClass);
		old = '', newClass = '';
	}
	return this;
};

allFunction.prototype.removeClass = function(className)
{
	for(a in this.elements)
	{
		if(className != '*')
			this.elements[a].setAttribute('class', this.elements[a].className.replace(' ' + className, ''));
		else
			this.elements[a].setAttribute('class', '');
	}
	return this;
};

// form

allFunction.prototype.checked = function(bol)
{
	for(a in this.elements)
	{
		if(this.elements[a].nodeName.toLowerCase() === 'input' && (this.elements[a].getAttribute('type') == 'checkbox' || this.elements[a].getAttribute('type') == 'radio'))
		{
			this.elements[a].checked = bol;
		}
	}
	return this;
};

allFunction.prototype.val = function(val)
{
	if(this.elements.length == 1)
	{
		if(val !== undefined)
		{
			for(a in this.elements)
			{
				this.elements[a].value = val;
				return this.elements[a].value;
			}
		}
		else
		{
			for(a in this.elements)
			{
				return this.elements[a].value;
			}
		}
	}
	else
	{
		if(val !== undefined)
		{
			var tmp = Array();
			for(a in this.elements)
			{
				tmp.push(this.elements[a].value);
			}
			return tmp;
		}
		elsec
		{
			var tmp = Array();
			for(a in this.elements)
			{
				this.elements[a].value = val;
				tmp.push(this.elements[a].value);
			}
			return tmp;
		}
	}
};

function $(id)
{
	var toReturn = new Array();
	toReturn[0] = parser.init(id);

	var newObject = new allFunction();

	newObject.puts(toReturn[0]);
	for(a in newObject)
	{
		toReturn[a] = newObject[a];
	}
	return toReturn;
}

Le code n'a aucune prétention et n'est certainement pas fini (manque de fonction, de sélecteur, d'event etc...) je le présente juste pour avoir un avis/citique sur le fondement du code. Il est fait de cette manière.

01. l'argument de la fonction "$" est passé au parser.
02. le parser découpe est cherche toujours les enfants des arguments précédents (sauf si un "," est rencontré il repart a la base du document).
03. les résultats sont renvoyés a la fonction "$" qui crée un objet "allFunction" puis "$" renvoie "this".

Quelques exemples :

var class_test = $('.test').each(function() // each parcourt les éléments sélectionner donc nous ajouter la couleur blue au text et "je passe la :)" aux blocs
{
	this.style.color = 'blue';
	this.innerHTML += ' Je passe la :)';
}).addClass('test_02').removeClass('*'); // ajoute la class "test_02" puis enlève toutes les class

$('#click').click(function() // au click de id="click"
{
	$(this).val('J\'ai changer mon value'); // on suppose que click est un input est on change sont value a "J'ai changer mon value"
});

$('.super_class,.ma_class').css({ width : '500px'});

$('input').addClass('inputs'); // ajoute la class inputs a tous les tag "input"

class_test.each(function() // parcourt l'objet class_test est change sont font-weight
{
	this.style.fontWeight = 'bold';
}).click(function()// au click...
{
     $(this).hide();// je disparais !
});

Merci d'avance

pour un mini-framework maison

Besoin de critique sur mon code

Supprimer

Modérer

Signaler le message aux modérateurs