mootools 元素追加_通过猴子补丁原型在MooTools中调试元素修改

mootools 元素追加

Let's face it:  JavaScript development and CSS modification can be a frustrating process, especially when your web application has loads of JavaScript.  One practice that is very helpful in troubleshooting CSS/JS problems is monkey-patching JavaScript prototypes and adding console statements to figure out what styles are being set on what elements.  Let me show you how you can save valuable time in debugging Element issues.

让我们面对现实：JavaScript开发和CSS修改可能是一个令人沮丧的过程，尤其是当您的Web应用程序具有JavaScript负载时。 对CSS / JS问题进行故障排除非常有用的一种做法是猴子修补JavaScript原型，并添加控制台语句以弄清楚在哪些元素上设置了哪种样式。 让我向您展示如何在调试Element问题上节省宝贵的时间。

一个基本示例：观看Element.setStyle分配 (A Basic Example:  Watching Element.setStyle Assignments)

Style additions are a frequent spot for trouble and confusion with JavaScript development.  You can easily monkey-patch the Element.setStyle method to spy on what style is being modified to what value on a given element:

样式添加经常会给JavaScript开发带来麻烦和困惑。 您可以轻松地猴子修补Element.setStyle方法，以监视将哪种样式修改为给定元素的值：

(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);
	}
	
})();

When a style is set on any DOM node, you will see:

在任何DOM节点上设置样式后，您将看到：

Having a record of style modification can be extremely helpful in debugging CSS issues, but why stop there?  What about attribute setters and className modification?  Let's do it.

记录样式修改对调试CSS问题非常有帮助，但是为什么要停在那里？ 关于属性设置器和className修改呢？ 我们开始做吧。

高级：观看CSS类，元素样式和元素属性 (Advanced:  Watching CSS Classes, Element Styles, and Element Attributes)

I've created an array of objects with method names and a string template to log to the console:

我创建了一个带有方法名称和字符串模板的对象数组，以登录到控制台：

// 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}'" }
]

With that object, we can recurse over it and spy on each method!

有了该对象，我们可以对其进行递归并监视每种方法！

// 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);
	};
});

Now you can spy on CSS styles, classes, and attributes!  Working with DOM elements should be easier and your debugging will be more efficient! Better yet, return values and functionality does not change; monkey-patching simply adds console statements!

现在，您可以监视CSS样式，类和属性！ 使用DOM元素应该更容易，并且调试会更高效！ 更好的是，返回值和功能不变。 猴子补丁只是添加了控制台语句！

翻译自: https://davidwalsh.name/debug-mootools

mootools 元素追加