将参数推送给JavaScript函数，而不是从页面中提取值

Question

这里完全是新手所以请客气点。我有一个javascript函数。我在php页面中有一个调用函数的元素。在页面中，我有从查询中填充变量的元素。

通过将函数作为参数推送，我可以获得函数所需的变量数据。

  function myFunc(arg1,arg2,arg3)

或者从函数中从我的页面中提取它们

    var arg1 = document.getElementById(arg1_id).innerHTML
    var arg2 = document.getElementById(arg2_id).innerHTML
    var arg3 = document.getElementById(arg3_id).innerHTML
//do something with the data

所以我的问题是，哪一种方法是最好的/最常用的方法？

正如我说的，我是新的，但我喜欢它，所以我想尝试学习和使用最佳实践。

在此之前，非常感谢您。

Answer 1

正如评论所述，

根据我的理解，第二种方法将适合您的需求，因为您有元素，而且innerHTML可以随时更改。因此，如果您从innerHTML获取，您将有一个稳定的源。此外，这将允许您将事件绑定到JS。

我建议您使用第二种方法(fetching from elements)。

原因

• 如果您更改了innerHTML，那么您的args将指向不正确的数据。从元素中获取将防止这种情况发生。
• 如果您更改了/长的变量列表，那么将它们作为参数传递将变得非常糟糕。
• 如果有绑定处理程序表单HTML，则不能具有动态值。一旦呈现页面，它们就会变成静态的。

​

function notify(str){
  console.log(str)
}

document.getElementById('userNotify').addEventListener('click', function(){
  var user = document.getElementById('txtUser').value;
  notify('Hello ' + user)
})

<div onclick="notify('Hello')">Click me</div>
<input id="txtUser" />
<div id="userNotify">Click me</div>

​

• HTML绑定不会将this上下文绑定到当前元素。因此，您必须将id作为参数传递，并在代码中再次获取它。默认情况下，addEventListener绑定它。

​

function notify(el) {
  console.log(this, el);
}

document.getElementById('second').addEventListener('click',notify)

<div onclick="notify(this)">Click me</div>
<div id="second">Click me</div>

​

• 如果您在HTML中绑定并执行element.onchange = function(){ ... }，那么以前的绑定就会丢失。使用addEventListener可以解决这个问题。

​

function notify(str){
  console.log(str)
}

document.getElementById('clickme').onclick = function(){
  console.log('Opps! Listener Changed')
}

<div id="clickme" onclick="notify('Hello')">Click me</div>

​

• 在HTML处理程序中将值作为参数传递的另一个问题是它是可攻击的。样本JSFiddle。

注意:如果您有映射到DOM元素的可编辑值，并且用户可以看到这些值，那么上面的原因是符合条件的。

如果不是，如果这些是静态值，应该在out页面的生命周期中保持不变，并且只用于内部处理，则将它们作为参数传递更有意义。为他们创建一个隐藏字段是一个糟糕的选择。您应该在.html页面上有一个API调用或JS中的一个函数，可以访问这些变量并将它们保存到除Global以外的其他地方。这将防止上面提到的hack。