html 如何避免JavaScript中的重复代码

zujrkrfu  于 2024-01-04  发布在  Java
关注(0)|答案(3)|浏览(190)

我使用jQuery来处理一些东西。它涉及到许多类或id,在其名称中有前缀'receive'。现在我想复制这些函数,但带有前缀'send'。它看起来像这样

  1. function onSelectAddress() {
  2. $('#receive-address').on('click', function() {
  3. $('#receive-dropdown').show();
  4. $('#receive-address').addClass('box-click');
  5. });
  6. $('#send-address').on('click', function() {
  7. $('#send-dropdown').show();
  8. $('#send-address').addClass('box-click');
  9. });
  10. }

字符串
我不想一行一行地复制粘贴,把“接收”改成“发送”,有什么办法处理这个问题吗?

vwhgwdsa

vwhgwdsa1#

通过创建一个接受前缀的泛型函数来重构:

  1. function doTheThing(prefix) {
  2. $(`#${prefix}-address`).on('click', function() {
  3. $(`#${prefix}-dropdown`).show();
  4. $(`#${prefix}-address`).addClass('box-click');
  5. });
  6. }

字符串
注意反引号用于字符串插值。
然后使用它:

  1. function onSelectAddress() {
  2. doTheThing('receive');
  3. doTheThing('send');
  4. }

展开查看全部
zaq34kh6

zaq34kh62#

我能想到的一种优化代码的方法是创建一个泛型函数,它接受receivesend作为参数,并处理这两种情况。类似于(* 代码未经测试,但你明白了 *):

  1. function generic(prefix) {
  2. $(`#${prefix}-address`).on('click', function() {
  3. $(`#${prefix}-dropdown`).show();
  4. $(`#${prefix}-address`).addClass('box-click');
  5. });
  6. }
  7. // To use
  8. function setupAddressHandlers() {
  9. generic('receive');
  10. generic('send');
  11. }
  12. // ...rest of code

字符串

ua4mk5z4

ua4mk5z43#

  1. function onAddressClick() {
  2. $('.address').on('click', function() {
  3. var action = $(this).data('action');
  4. $('#' + action + '-dropdown').show();
  5. $(this).addClass('box-click');
  6. });
  7. }

个字符
这段代码使用了一个通用的“address”类来处理“receive-address”和“send-address”元素,并利用data-action属性来判断它是“receive”还是“send”操作。这样,你就可以避免重复代码,并使其更易于维护。

相关问题