Debug Element Modification v MooTools pomocí Monkey Patching prototypů

Přiznejme si to: Vývoj JavaScriptu a úprava CSS může být frustrující proces, zvláště když vaše webová aplikace obsahuje spoustu JavaScriptu. Jednou praxí, která je velmi užitečná při řešení problémů s CSS/JS, je opičí záplatování prototypů JavaScriptu a přidávání příkazů konzoly, abyste zjistili, jaké styly se nastavují na jaké prvky. Dovolte mi, abych vám ukázal, jak můžete ušetřit drahocenný čas při ladění problémů s prvky.

Základní příklad: Sledování přiřazení Element.setStyle

Doplňky stylů jsou častým místem problémů a zmatků s vývojem JavaScriptu. Element.setStyle můžete snadno opičit metoda pro špehování toho, jaký styl se na daném prvku upravuje na jakou hodnotu:

(function() {
	/*
		SetStyle
	*/
	// "Save" the old setStyle prototype
	var oldSetStyle = Element.prototype.setStyle;
	// Create a new prototype method for setStyle
	Element.prototype.setStyle = function(property,value) {
		console.log("setStyle: Setting element ",this,"'s '",property,"' style to '",value,"'");
		return oldSetStyle.apply(this,arguments);
	}
	
	/*
		Set
	*/
	// "Save" the old set prototype
	var oldSet = Element.prototype.set;
	// Create a new prototype method for set
	Element.prototype.set = function(property,value) {
		console.log("set: Setting element ",this,"'s '",property,"' attribute to '",value,"'");
		return oldSet.apply(this,arguments);
	}
	
})();

Když je styl nastaven na libovolném uzlu DOM, uvidíte:

Záznam o úpravě stylu může být velmi užitečný při ladění problémů s CSS, ale proč u toho přestat? A co nastavovače atributů a úprava className? Pojďme na to.

Pokročilé: Sledování tříd CSS, stylů prvků a atributů prvků

Vytvořil jsem pole objektů s názvy metod a šablonou řetězce pro přihlášení do konzoly:

// Set up some templates and properties
[
	{ method: "setStyle", description: "Setting '{arg1}' style to '{arg2}'" },
	{ method: "set", description: "Setting '{arg1}' attribute to '{arg2}'" },
	{ method: "addClass", description: "Adding class '{arg1}'" },
	{ method: "removeClass", description: "Removing class '{arg1}'" }
]

S tímto objektem můžeme rekurzovat a špehovat každou metodu!

// Set up some templates and properties
[
	{ method: "setStyle", description: "Setting '{arg1}' style to '{arg2}'" },
	{ method: "set", description: "Setting '{arg1}' attribute to '{arg2}'" },
	{ method: "addClass", description: "Adding class '{arg1}'" },
	{ method: "removeClass", description: "Removing class '{arg1}'" }
].each(function(method) {
	// Save the old prototype fn
	var oldProto = Element.prototype[method.method];
	// Create a new prototype
	Element.prototype[method.method] = function(arg1,arg2) {
		// Console out the method for debugging
		console.log(method.method,": ",this,": ",method.description.substitute({ arg1:arg1, arg2:arg2, element:this }));
		// Return the value by calling the old prototype fn
		return oldProto.apply(this,arguments);
	};
});

Nyní můžete špehovat styly, třídy a atributy CSS! Práce s prvky DOM by měla být jednodušší a vaše ladění efektivnější! Ještě lépe, návratové hodnoty a funkčnost se nemění; monkey-patching jednoduše přidává příkazy konzole!