因此,我对JavaScript的最佳编码实践不甚了解,但我希望能更好地理解应如何设计功能以允许从JavaScript文件外部调用它们。
采用以下示例。它们本质上都做相同的事情,但是一个存储在变量中,另一个存储在函数中。
var myVariable1 = {
add1: function( that ){
var number = parseInt( that.innerHTML, 10 );
if( !isNaN( number )){
document.getElementById( "variableResult" ).innerHTML = number + 1;
}
}
};
function myFunction(){
var object = new Object();
object.add1 = function( that ){
var number = parseInt( that.innerHTML, 10 );
if( !isNaN( number )){
document.getElementById( "functionResult" ).innerHTML = number + 1;
}
}
return object;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Function or Variable</title>
<script src="functionorvariable.js"></script>
</head>
<body>
<main>
<a onclick="myVariable1.add1( this )">4</a>
<p id="variableResult"></p>
<br>
<br>
<a onclick="window.myFunction().add1( this )">7</a>
<p id="functionResult"></p>
</main>
</body>
</html>
我的问题是,这里的真正区别是什么? 它们是否相同,只是其中一个的性能可能比另一个更好? 其中一个比另一个“好”吗?
我才刚刚开始理解在JavaScript中完成模块化设计的方法,因此如果这两种做法都不对,我深表歉意。
答案 0 :(得分:1)
myFunction
创建一个对象,并在每次调用时返回该对象。这没有什么意义,因为对象不包含任何属性,而只是一个可能只是常规函数的函数。
myVariable1
只是具有函数属性的对象。将类似功能组合在一个对象中而不污染全局范围(并保持事物的结构化)是很有意义的。