请求制作eval按钮代码并排查runcode按钮执行逻辑问题

Hey there! Let's tackle your code execution logic issues and build that eval button you need.

First: What's Wrong With the Current Code Concatenation? #

Your current approach code = code + dropped.item.attr("rcode") has a few key pitfalls:

• Duplicate code bloat: Dragging the same block multiple times will keep appending the same snippet, leading to unexpected behavior (like creating 3 circles instead of 1, or color changes firing repeatedly).
• No execution order control: If you rearrange dragged blocks later, you can't reorder the code to match the new sequence.
• Debugging headaches: Long, concatenated strings are messy to read and troubleshoot when something breaks.

Better Approach: Use an Array to Manage Code Snippets #

Instead of appending to a single string, store each dragged code snippet in an array. This lets you easily add/remove items, reorder them, and avoid duplicates if needed.

Step-by-Step Solution with Eval Button #

1. Update Your Variable Setup #

Replace your single code string with an array to track snippets:

let codeSnippets = []; // Stores each dragged code block cleanly

2. Modify the Drop Logic #

When a block is dropped, add its rcode to the array (and add a preview area so users can see the code they're building):

$(".dropzone").on("drop", function(event, ui) {
  const snippet = ui.draggable.attr("rcode");
  codeSnippets.push(snippet);
  
  // Optional: Update a preview area to show the current code
  $("#code-preview").text(codeSnippets.join("\n"));
});

3. Fix the Run Code Button #

Instead of using the old concatenated string, join the array into a single executable script (and add error handling to catch bugs):

$("#run-code").click(function() {
  try {
    const fullCode = codeSnippets.join("\n");
    eval(fullCode);
  } catch (error) {
    alert(`Oops, there's an error in your code: ${error.message}`);
  }
});

4. Add the Eval Button #

The eval button can work in two ways—either execute the dragged code snippets, or let users edit a custom code block first. Here are both options:

Option A: Eval the Dragged Code (Direct Execution)

This works similarly to the run button but can be labeled differently for clarity:

$("#eval-code").click(function() {
  try {
    const fullCode = codeSnippets.join("\n");
    eval(fullCode);
    alert("Code evaluated successfully!");
  } catch (error) {
    alert(`Evaluation error: ${error.message}`);
  }
});

Option B: Eval Custom Editable Code

If you want users to tweak the code before running it, add a text area to your HTML:

<textarea id="custom-code" rows="8" cols="40"></textarea>
<button id="eval-custom">Eval Custom Code</button>

Then add the click handler:

$("#eval-custom").click(function() {
  const customCode = $("#custom-code").val();
  try {
    eval(customCode);
    alert("Custom code executed!");
  } catch (error) {
    alert(`Custom code error: ${error.message}`);
  }
});

Bonus: Add a Clear Button #

Let users reset their code snippets easily:

$("#clear-code").click(function() {
  codeSnippets = [];
  $("#code-preview").text("");
  $("#custom-code").val("");
});

Key Notes #

• Wrap eval in try/catch: This prevents your entire app from crashing if there's a syntax error in the code snippets.
• Eval security note: For production apps, eval can be risky if handling untrusted user input. But for a drag-and-drop demo like yours, it's a practical choice.
• Code preview: Showing users the generated code helps them understand what's being executed, making debugging far easier.

内容的提问来源于stack exchange，提问作者user3602218