js：加载具有不同参数的相同js代码

Question

我有两个这样的 html 密码标签：

<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

我的objective是在每个input写的时候做了一些处理。所以我选择onkeyup。为了让我的问题更清楚，我可以将我的 js 代码缩减为：

var pass_input;
var pswd1="";
pass_input=document.getElementById("pass1");
pass_input.onkeyup = function(event) {
    pswd1=pswd1+event.key;
}

所以因为我有两个输入标签，所以我需要另一个 js 代码用于 pass2 输入，例如 pass1，所以我的代码将是：

var pass_input;
var pswd1="";
pass_input=document.getElementById("pass1");
pass_input.onkeyup = function(event) {
    pswd1=pswd1+event.key;
}

var pswd2="";
pass_input=document.getElementById("pass2");
pass_input.onkeyup = function(event) {
    pswd2=pswd2+event.key;
}

这段代码工作正常。在浏览器控制台中输入 pswd1 和 pswd2 的输入标签和 console.log 后，我得到了很好的结果。

在我的项目中，onkeyup 处理程序并不像我在发布的代码中写的那样简单，实际上它更复杂。此外，此代码应适用于我项目中的每个 text/password 输入标记，因此在许多其他文件中也是如此。因此，为了使代码更易于维护，我尝试将 js 代码放在一个通用的 js 文件中，并在需要时加载。

问题是如何区分common.js文件代码中的两个变量pswd1和pswd2。所以我想到了 eval 命令。所以我的 common.js 文件内容是：

pass_input.onkeyup = function(event) {
    eval(pass_var_name+"="+pass_var_name+"+event.key");
}

我的 html 文件内容是：

<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

<script>
    var pass_input;
    var pswd1, pswd2;
    pass_input=document.getElementById("pass1");
    pass_var_name="pswd1";
</script>
<script src="common.js"></script>
<script>
    pass_input=document.getElementById("pass2");
    pass_var_name="pswd2";
</script>
<script src="common.js"></script>

但是如果我执行我的代码并尝试在每个输入中写入，例如在 pass1 中我写 "kkk" 并且在 pass2 中我写 "lll" 然后我显示 console.log在浏览器控制台中，我为 pswd1 得到了一个空字符串，对于 pswd2，我得到了字符串 "kkklll"。

好像是js在键盘点击的时候解释了opnkeyup handler中的eval

有没有办法改正它？有没有更好的办法来实现我的目标？

Answer 1

由于id是唯一的，为什么不使用每个input的id作为变量名（或作为对象键），然后这样做以重用相同的代码片段

堆栈片段 - 使用变量

var pass1 = '', pass2 = ''; //etc.

Array.from(document.querySelectorAll('input')).forEach( function(el) {

  el.addEventListener('keyup', function(e) {
    window[this.id] += e.key;
  })  
  
})

document.querySelector('button').addEventListener('click', function() {
  console.log("pass1: " + pass1);
  console.log("pass2: " + pass2);
})

<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

<button type="button">Show variable values with console.log</button>

堆栈片段 - 使用对象

var passwords = {}

Array.from(document.querySelectorAll('input')).forEach( function(el) {

  passwords[el.id] = '';   // create/init property
  
  el.addEventListener('keyup', function(e) {
    passwords[this.id] += e.key;
  })  
  
})

document.querySelector('button').addEventListener('click', function() {
  console.log(passwords);
})

<input maxlength="30" size="20" id="pass1" name="password" autocomplete="off" type="password">
<input maxlength="30" size="20" id="pass2" name="password" autocomplete="off" type="password">

<button type="button">Show variable values with console.log</button>

js：加载具有不同参数的相同js代码

js: load same js code with different parameters

html

javascript

script-tag

onkeyup