Javascript - 分解具有多次重复 js 块的代码

Javascript - factorize code with many times repeated js block

我有一个非常基本的 javascript 代码,但我多次重复相同的代码块 作为旁注,我使用 ruby 作为后端代码。

如何在我的文件中分解它 example.js

<% if x= 0 %>
var msg;
msg = Messenger().post({

  <% if  y = 2 %>    
    message:  'example',
    type:     'error',
    hideAfter: 3000
  <% elsif y = 3 and z =5%>
    message:  'example',
    type:     'error',
    hideAfter: 3000
  <% else %>
    message: 'different'
    type: 'different'

<% elsif y>2 and y < 7  %>
    <% if  y = 2 %>    
    message:  'example',
    type:     'error',
    hideAfter: 3000
  <% elsif y = 3 and z =5%>
    message:  'example',
    type:     'error',
    hideAfter: 3000
  <% else %>
    message: 'different'
    type: 'different'

<% else %>
 you're a cool dude
<% end %>

这只是一个例子,但我不知道如何用一个非常短的属性简单地替换一大块代码并重新使用它

我认为这是不可能的,但这是我本着精神想做的:

CHUNK= 
    message:  'example',
    type:     'error',
    hideAfter: 3000


<% if x= 0 %>
var msg;
msg = Messenger().post({

  <% if  y = 2 %>    
    CHUNK
  <% elsif y = 3 and z =5%>
    CHUNK
  <% else %>
    message: 'different'
    type: 'different'

<% elsif y>2 and y < 7  %>
    CHUNK
  <% elsif y = 3 and z =7%>
    soso
  <% else %>
    CHUNK

<% else %>
 you're a cool dude
<% end %>

当你有一个类似的代码块像上面一样重复了很多次时,是否可以分解代码。怎么样?

应该是可以的。您的 post 函数正在接受一个对象,因此您可以这样做:

var chunkA = {
  message:  'example',
  type:     'error',
  hideAfter: 3000
}

// the rest of your reusable chunks

那么你可以这样调用它:

var msg = Messenger().post(
  <% if  y = 2 %>  
    chunkA  
  <% elsif y = 3 and z=5 %>
    chunkB
  <% end %>
  // etc.
);

编辑:虽然这回答了 OP 的问题,但解决此问题的更好方法是将逻辑移至您的控制器中。请参阅 B Seven 的回答以获取解释。

一切皆有可能。此外,删除代码重复通常是个好主意。 DRY 是 Rail 的基本原则之一。

但是,您这里有 2 个更严重的问题:

  1. 1 个文件中有 2 种不同的语言
  2. 您的视图逻辑过多

下面是我将如何修复 #2。我更喜欢使用早期 returns 而不是嵌套 if/else/elsif。此代码将放在一个单独的文件中,也许是一个视图助手。

def message_for y, z
  if y == 2
    return { message:  'example',
             type:     'error',
             hideAfter: 3000 }
    ...

如果您使此方法可用于您的视图,则可以使用

<%= message_for y, z %>

话虽如此,也可以复用chunk

<% @chunk = { message:  'example',
              type:     'error',
              hideAfter: 3000 } %>