Weblabor

Néhányszor belefutottam abba a problémába JavaScriptnél, hogy csak nehezen lehet létrehozni objektum kulcsos mapeket ill. seteket. Ezért úgy döntöttem, hogy írok egy kis bejegyzést ennek a mikéntjéről. Ez a probléma többek között abban az esetben merül fel, amikor van két objektumokat tartalmazó gyűjteményünk, és a kettő metszetére van szükségünk úgy, hogy az nem tartalmazhatja kétszer ugyanazt az objektumot. Erre a leghétköznapibb példa, ha több CSS kiválasztót használunk egy lekérdezésben.

<p class="red underlined">
piros és aláhúzott
</p>
<p class="red">
piros
</p>
<p class="underline">
aláhúzott
</p>

Először dobjunk össze egy nagyon egyszerű parsert a CSS kiválasztókhoz. Annyit kell tudnia, hogy elemnév és osztálynév alapján ki tudjon választani elemeket, és ezeket egy setben dobja vissza. Egyelőre set helyett elég a tömb használata:

var Set=Array;

(function ()
{
	var parseMultiSelectorText=function (multiSelectorText)
	{
		var selectors=[];
		multiSelectorText.split(",").forEach(function (selectorText)
		{
			selectors.push(parseSelectorText(selectorText));
		});
		return createMultiSelector(selectors);
	};
	
	var parseSelectorText=function (selectorText)
	{
		var selectorPattern=new RegExp("^([\\w]+)\\.([\\w]+)$");
		var match=selectorText.match(selectorPattern);
		var tagName=match[1];
		var className=match[2];
		return createSelector(tagName,className);
	};
	
	var createMultiSelector=function (selectors)
	{
		return function (context)
		{
			var selectedNodes=new Set();
			selectors.forEach(function (selector)
			{
				selectedNodes.push.apply(selectedNodes,selector(context));
			});
			return selectedNodes;
		};
	};
	
	var createSelector=function (tagName,className)
	{
		return function (context)
		{
			var selectedNodes=[];
			Array.prototype.forEach.call(context.getElementsByTagName(tagName),function (node)
			{
				if (String(" "+node.className+" ").indexOf(" "+className+" ")!=-1)
				{
					selectedNodes.push(node);
				}
			});
			return selectedNodes;
		};
	};

	$=function (multiSelectorText)
	{
		return parseMultiSelectorText(multiSelectorText)(document);
	};
	
})();

Felhasználtam az Array.forEach()-et.

if (!Array.prototype.forEach)
{
  Array.prototype.forEach = function(fun)
  {
    if (this === void 0 || this === null)
      throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in t)
        fun.call(thisp, t[i], i, t);
    }
  };
}

Ha teszteljük most a selectorokat,

window.onload=function ()
{
	alert($("p.red,p.underlined"));
};

akkor látszik, hogy egy négy elemű tömböt ad vissza a $ függvény. Ez azért van, mert a piros és aláhúzott paragrafus kétszer lett kiválasztva; egyszer mint piros, és egyszer mint aláhúzott. A dupla bejegyzéseket az új elemek felvételekor érdemes szűrni.

A szűrést kétféleképpen lehet megoldani:

1. Végigmegyünk a teljes gyűjteményen, és minden elemet összehasonlítunk az újonnan hozzáadandó elemmel. Ha találunk egyezést, akkor nem adjuk hozzá a gyűjteményhez az elemet, mert már benne van.
2. Az új elemhez lekérünk egy azonosító kódot, megnézzük, hogy az azonosító kód szerepel e már a gyűjteményben. Ha igen, akkor nem adjuk hozzá újra. Ez a megoldás azért jobb, mert egyszerű típusokat már lehet kulcsnak használni mapekhez. A JavaScript alapból minden kulcsot stringre alakít, és úgy használ fel az objektumoknál.

Most csináljuk egy egyszerű setet. Kell neki egy push() és egy toString() metódus.

var Set=function ()
{
	this.table={};
};
Set.prototype.push=function ()
{
	var set=this;
	Array.prototype.forEach.call(arguments,function (value)
	{
		set.add(value);
	});
	return this;
};
Set.prototype.add=function (value)
{
	var key=
	(
		("identity" in value)
		?id=value.identity()
		:value
	);
	if (!this.table.hasOwnProperty(key))
	{
		this.table[key]=value;
	}
	return this;
};
Set.prototype.forEach=function (fun,thisp)
{
	if (!thisp)
	{
		thisp=this;
	}
	for (var i in this.table)
	{
		if (this.table.hasOwnProperty(i))
		{
			fun.call(thisp,this.table[i],i,this);
		}
	}
	return thisp;
};
Set.prototype.toArray=function ()
{
	var array=[];
	this.forEach(function (value)
	{
		array.push(value);
	});
	return array;
};
Set.prototype.toString=function ()
{
	return this.toArray().toString();
};

Mivel nincs identity() metódus beállítva a paragrafusokhoz, ezért most csak egy paragrafus szerepel majd a listában, ugyanis a toString() minden paragrafusra ugyanaz lesz.

Most jön a dolog lényegi része: hogyan oldjuk meg az objektumok egyedi azonosítását? A legegyszerűbb, ha számozzuk az objektumokat, és az adott objektum számát eltároljuk egy tulajdonságban.

(function ()
{
	var i=0;
	var table={};
	Object.prototype.identity=function ()
	{
		if (!this.__hashcode__)
		{
			this.__hashcode__=++i;
			table[i]=this;
		}
		return this.__hashcode__;
	};
	
	Object.identify=function (i)
	{
		return table[i];
	};
	
	var hasOwnProperty=Object.prototype.hasOwnProperty;
	Object.prototype.hasOwnProperty=function (property)
	{
		return (hasOwnProperty.call(this,property) && property!="__hashcode__");
	};
})();

A hasOwnProperty()-t azért kell felülírni, hogy a tároló tulajdonság esetleges iterálásnál ne szerepeljen.

Ez a megoldás Firefox és a többi böngésző esetén jól vizsgázik, Internet Explorer 8 alatt viszont ugyanúgy egy elem marad a setben. Ez azért van, mert MSIE-ben a DOM Node-oknak semmi köze nincs az Objecthez, így hiába írjuk át az Object.prototype-ot, az nem lesz hatással rájuk. Ezt a problémát jelenlegi ismereteim szerint egyedül behavior használatával lehet áthidalni. A behavior ElementNode-okra alkalmazható, szóval TextNode-okra a módszer nem használható – de általában nem is keresünk TextNode-okra.

Először csináljuk meg a HTC fájlt:

<PUBLIC:COMPONENT lightWeight="true">
<script type="text/javascript">
for (var property in Object.prototype)
{
	element[property]=Object.prototype[property];
}
</script>
</PUBLIC:COMPONENT>

A komponens az aktuális elemet jelöli, taget nem adtuk meg, mert minden elemre alkalmazzuk a behaviort, a lightWeight attribútum pedig ahhoz kell, hogy új elemeknél is működjön a dolog. A component-en belüli részben a szkriptnél az element az aktuális elemet jelöli. Annyit csinálunk, hogy átmásoljuk az Object.prototype-ból az összes tulajdonságot az aktuális elemre.

Ahhoz, hogy működjön a dolog, MSIE esetén az összes elemre alkalmazni kell a behaviort, és át kell írni a document.createElement()-et is, hogy az új elemekhez is hozzáadjuk a viselkedést.

<!--[if IE]>
<style type="text/css">
*{behavior:url(identity.htc)}
</style>
<script type="text/javascript">
(function ()
{
	var createElement=document.createElement;
	document.createElement=function ()
	{
		var element=createElement.apply(this,arguments);
		element.addBehavior("identity.htc");
		return element;
	};
})();
</script>
<![endif]-->

Így már MSIE esetén is működik a metszet kiválasztása.

Összegezve a böngészők közötti eltérések miatt már egy ilyen – amúgy egyszerűnek tűnő – dolog is csak nehezen és csak részben megvalósítható.