Neliels javascript framework, lai samazinātu koda garumu

Deniss Fedotovs (deni2s), 11.08.2007., 15:57

Šajā rakstā ir aprakstītas dažas javascript funkcijas, kas palīdz samazināt un optimizēt javascript koda garumu, īpaši, ja tiek izmantotas AJAX tehnoloģijas.

Šeit aprakstītais javascript framework tiek izmantots arī šīs lapas kodā. To var izmantot javascript koda optimizēšanai gan dažādos statistikas skaitītāju javascript kodos, gan AJAX risinājumos, kur tas dos vislielāko efektu. Raksts ir domāts tiem, kam jau ir priekšzināšanas par javascript un DOM koka izmantošanu.

`document` pielietojums

Sāksim ar šādu rindiņu:

var d=document;

Mainīgais d tagad satur DOM koka elementu document. Tagad pārējā javascript kodā var nomainīt visus document pret d. Piemēram, ja pirms tam bija rakstīts document.getElementById(id), tad tagad to var saīsināt par d.getELementById(id). Uz katru javascript kodā pieminēto document tiek šādā veidā tiek ietaupīti 7 baiti - tātad to atmaksājas darīt, ja document kodā parādās sākot ar 3 reizēm. Varbūt tas nešķiet daudz, bet ja javascript kods ir apjomīgs, tad kopā var kodu samazināt diezgan daudz. Protams, jāņem vērā, ka mainīgo d nedrīkst vairs izmantot citām vajadzībām.

CSS stilu piešķiršana

Ja javascriptā tiek vairākkārt piešķirts kādam elementam kāds CSS stils, tad noderīga varētu būt šāda funkcija:

function stils(el,stils)
	{
	el.setAttribute('style',stils); //Atbalsta visi mūsdienu pārlūki izņemot IE
	el.style.cssText=stils //IE
	}

Kā parametrs tiek padots elements un CSS stils, kuru vēlas piešķirt. Tagad tā vietā, lai katru reizi rakstītu divas rindiņas, lai piešķirtu elementam CSS stilu, pietiek javascript kodā uzrakstīt vienu rindiņu, piemēram, šādu:

stils(el_3,'color:#445');

Elementa izveidošana

Ļoti bieži (īpaši izmantojot AJAX), ir nepieciešams izveidot kādu elementu. Te saīsināt kodu var palīdzēt sekojoša funkcija (izmantojot jau iepriekš aprakstīto elementa document "saīsinājumu":

function ce(el)
	{
	return(d.createElement(el))
	}

Tagad, izmantojot šo funkciju, lai izveidotu (x)HTML elementu <p> un piešķirtu tā vērtību mainīgajam rindkopa, pietiek ar šādu rindiņu:

rindkopa=ce('p');

Elementa ("bērna") pievienošana DOM kokam

Elementa pievienošanai DOM kokam tiek izmantota sekojoša javascript funkcija:

function ac(el,ch)
	{
	el.appendChild(ch);
	return(el)
	}

Izmantojot šo funkciju, var, piemēram, ievietot xHTML elementā <body> iepriekš izveidoto elementu <p>, kurš atrodas mainīgajā rindkopa:

var body=d.getElementsByTagName('body');
ac(body[1],rindkopa);

Varbūt sākumā šķiet, ka tas nav pārāk liels ieguvums, taču, izmantojot šeit aprakstītās funkcijas, tagad kā funkciju parametrus norādīt arī citu funkciju rezultātus, iegūstot diezgan lielu koda optimizāciju. Piemēram, šādi:

var body=d.getElementsByTagName('body');
ac(body[1],ac(ce('p'),d.createTextNode('šis ir rindkopas saturs')));

Neoptimizēts javascript kods, lai veiktu šo pašu darbību (ievietotu rindkopu xHTML dokumentā, kurā rakstīts "šis ir rindkopas saturs"), izskatītos šādi:

var body=document.getElementsByTagName('body');
var txt=document.createTextNode('šis ir rindkopas saturs');
var rindkopa=document.createElement('p');
rindkopa.appendChild('txt');
body[0].appendChild('rindkopa');

Ir mazliet garāk, vai ne?

Līdzīgā veidā, veidojot attiecīgas funkcijas ar īsiem nosaukumiem, var saīsināt vēl vairāk javascript kodu, ja tajā ir bieži izmantotas getElementsByTagName() un getElementById() metodes.

Nobeigumā vēl pāris noderīgas funkcijas, kuras var izmantot kodējot kādu uz AJAX bāzētu risinājumu (un ne tikai).

Funkcija, kas izdzēš visus dotā DOM elementa "bērnus" (ieskaitot "mazbērnus", "mazmazbērnus" utt.)

function clearChild(el)
	{
	while(el.childNodes[0])el.removeChild(el.firstChild)
	}

Funkcija, kas veic pretēju darbību `escape()` (pārvērš dotajā simbolu virknē visus `&` par `&`)

function unescapeHTML(str)
	{
	var div = d.ce('div');
	div.innerHTML = str;
	return div.childNodes[0].nodeValue
	}

Pretēja darbība escape() funkcijai ir nepieciešama retāk, taču šī ir, iespējams, pati īsākā javascript funkcija, kas to veic, izmantojot pārlūkprogrammu īpatnības, tāpēc es to ievietoju te, jo nepieciešamības gadījumā šādu funkciju tīmeklī varētu būt diezgan grūti atrast.

Viss javascript framework kods kopā

var d=document;

//CSS stilu piešķiršana
function stils(el,stils)
	{
	el.setAttribute('style',stils); //Atbalsta visi mūsdienu pārlūki izņemot IE
	el.style.cssText=stils //IE
	}

//Elementa izveidošana
function ce(el)
	{
	return(d.createElement(el))
	}

//Elementa pievienošana DOM kokam
function ac(el,ch)
	{
	el.appendChild(ch);
	return(el)
	}

//Visu dotā DOM elementa "bērnu" izdzēšana
function clearChild(el)
	{
	while(el.childNodes[0])el.removeChild(el.firstChild)
	}

//Pretēja darbība escape() (pārvērš visus &amp; par &)
function unescapeHTML(str)
	{
	var div = d.ce('div');
	div.innerHTML = str;
	return div.childNodes[0].nodeValue
	}

Protams, ka tās funkcijas, kas netiek izmantotas kodā, var droši dzēst ārā. Ceru, ka kādam šis raksts noderēs rakstot īsāku javascript kodu!

uz rakstu sarakstu

ietvīto

pievieno facebookā

1 komentārs Komentēšana pieejama visiem.

dzēsts lietotājs, 08.09.2007. 11:26:05

Komentāra reitings: 0

jQuery

"$(html)
Create DOM elements on-the-fly from the provided String of raw HTML."

ir neaizvietojams, jo veidojot nedaudz sarežģītākus elementus ar daudz atribūtiem darot to ar parastajām JS iespējām kods ir n-reizes lielāks. Protams, ka labāk ir izmantot šādas f-jas, bet jQuery pietiek ar vienu rindiņu :)

Komentāra pievienošana

uz rakstu sarakstu

Par web.hc.lv

web.hc.lv ir vortāls, kurā tiek aplūkoti mājaslapu veidošanas un mārketinga aspekti, no idejas līdz gandarījumam.

Reklāma

ienākt reģistrēties