如何使用对象重用 JavaScript 函数属性

Question

我正在尝试使用 javascript 创建 HTML 元素及其属性，我需要在几个地方重复使用它，而无需编写重复的相同代码。仅供参考，下面是我在对象中声明的代码。

我想将此代码用于包含标签、相同类的其他元素。

addNewLabels : function(){
    var selectnewPwText = document.createElement('LABEL');
    selectnewPwText.innerText = "Select label Name";
    selectnewPwText.classList.add("mystyle");
    document.querySelector('.select-new-password').appendChild(selectnewPwText);
  }

var resetPasswordControls = {
  passwordBtnInnerText: "Something else",
  passwordBtn : function() {
    return this.passwordBtnInnerText;
  },
  
  passwordHintText : function() {
    var para = document.createElement("P");
    para.innerHTML = "This is a paragraph.";
    document.querySelector(".m-hint").appendChild(para);
  },


  addNewLabels : function(){
    var selectnewPwText = document.createElement('LABEL');
    selectnewPwText.innerText = "Select label Name";
    selectnewPwText.classList.add("mystyle");
    document.querySelector('.select-new-password').appendChild(selectnewPwText);
  }
};

// Display data from the object:
document.getElementById("btn-login").innerText = resetPasswordControls.passwordBtn();
resetPasswordControls.passwordHintText();
resetPasswordControls.addNewLabels();

<form onsubmit="return false;" method="post">
	<div class="form-group has-feedback has-feedback-left">
	 <label for="name" class="select-new-password"></label>
	 <input autocomplete="off" class="form-control required" id="Password" maxlength="20" name="Password" type="password" value="" aria-required="true">
		<p class="m-hint">Must use 8-20 characters and one number or symbol.</p>
	</div>

	<div class="form-group has-feedback has-feedback-left">
	  <label for="name" class="retype-new-password"></label>
	  <input type="password" class="form-control" id="password" placeholder="Enter your password">

<button type="submit" id="btn-login">Some Text need to replace</button>

	</div>
  </form>

Answer 1

您可以让您的函数以arguments 的形式接收属性，以下是您如何实现该功能的示例：

  var resetPasswordControls = {
  passwordBtnInnerText: "Something else",
  passwordBtn : function() {
    return this.passwordBtnInnerText;
  },
  
  passwordHintText : function() {
    var para = document.createElement("P");
    para.innerHTML = "This is a paragraph.";
    document.querySelector(".m-hint").appendChild(para);
  },


  addNewLabels : function(element, innerText, className, appendTo){
    var selectnewPwText = document.createElement(element);
    selectnewPwText.innerText = innerText;
    selectnewPwText.classList.add(className);
     appendTo = appendTo || 'body';
    document.querySelector(appendTo).appendChild(selectnewPwText);
  }
};

// Display data from the object:
document.getElementById("btn-login").innerText = resetPasswordControls.passwordBtn();
resetPasswordControls.passwordHintText();
resetPasswordControls.addNewLabels('LABEL', "Select label Name", "mystyle", '.select-new-password');

<form onsubmit="return false;" method="post">
	<div class="form-group has-feedback has-feedback-left">
	 <label for="name" class="select-new-password"></label>
	 <input autocomplete="off" class="form-control required" id="Password" maxlength="20" name="Password" type="password" value="" aria-required="true">
		<p class="m-hint">Must use 8-20 characters and one number or symbol.</p>
	</div>

	<div class="form-group has-feedback has-feedback-left">
	  <label for="name" class="retype-new-password"></label>
	  <input type="password" class="form-control" id="password" placeholder="Enter your password">

<button type="submit" id="btn-login">Some Text need to replace</button>

	</div>
  </form>