当“如何问”太微妙时

这是我写过的第一个JavaScript代码，放在一边。

该站点关闭了很多问题，因为人们不会阅读输入规则标题或注意输入问题标题时显示的“如何提问”面板-几乎60％的已关闭问题都包含损坏的代码，因此，我建议当用户正在浏览时弹出红色的正面警告问一个带有破损代码的公然题外话的问题。现在对于7月的社区挑战来说还为时过早，所以这不是一个条目...可以，但是我迫不及待地想尝试一些东西，所以就去了。
我已经从“问题”页面“偷走”了一些HTML和CSS，对其进行了一些修改以适合“堆栈片段”框，然后继续实施JavaScript代码以使其正常工作。 />继续尝试！当您在标题框中单击ENTER时，将触发该脚本。有关详细信息，请参见接受的答案。

 alert("hello, world!");

 String.includes

 function validateKey(e) {
  "use strict";
  if (e.keyCode == 13) {
    var field = document.getElementById("title");
    if (!validateTitle(field)) {
      showWarning();
    }
    else {
      clearWarning();
    }
  } 
}


function validateTitle(titleField) {
  "use strict";
  var title = titleField.value;
  return !title.includes("bug") 
      && !title.includes("issue") 
      && !title.includes("t work") // catches won't work, isn't working, etc.
      && !title.includes("s wrong") // catches what's wrong, what is wrong
      && !title.includes("fix")
      && !title.includes("why");
}


function showWarning() {
  "use strict";
  var msg = getWarningDiv();
  document.getElementsByTagName("table")[0].appendChild(msg);
}

function clearWarning() {
  "use strict";
  var popup = document.getElementsByClassName("message-dismissable")[0];
  if (popup == undefined) {
    return;
  }
  
  popup.parentNode.removeChild(popup);
}

function getWarningDiv() {
  "use strict";
  
  var popup = document.createElement("div");  
  popup.className = "message message-error message-dismissable";
  popup.setAttribute("style", "max-width: 270px; min-width: 270px; position: absolute; top: 32px; left: 378px; display: block;");
  popup.addEventListener("click", function(event) { clearWarning(); });
  
  var tooltip = document.createElement("div");
  tooltip.className = "message-inner message-tip message-tip-left-top";
  
  popup.appendChild(tooltip);
  
  var tipText = document.createElement("div");
  tipText.title = "close this message (or hit Esc)";
  tipText.className = "message-close";
  tipText.textContent  = "×";
  
  tooltip.appendChild(tipText);
  
  var msg = document.createElement("div");
  msg.className = "message-text";
  msg.setAttribute("style", "padding-right: 35px;");
  msg.textContent = "Wait! If your code does not work as intended, this question is off-topic!";
  
  popup.appendChild(msg);
  return popup;
}

同样，CSS和HTML也不完全是我的-它们只是JavaScript的借口，我想对其进行改进。另外，我是否忽略了任何公然的误报？

JavaScript是您的全部吗？只是问问，这样我就不会挑剔你没有写的东西。

@Janos JavaScript都是我的:)

该代码段应该执行任何操作吗？

@ njzk2请参阅200_success的答案-证明string.includes（）函数仅在Chrome中有效。

@ Lyle'sMug嗯..不是耐Lyle的！ ;-)

#1 楼

String.includes()是实验性ECMAScript 6语言建议的一部分。因此，您不能依靠它在浏览器中可用。在不支持String.includes()的浏览器上，您的脚本不执行任何操作–如果您愿意在JavaScript控制台中查找，它将在JavaScript控制台中留下一个错误。这是JavaScript编程的危险之一：即使在您自己的浏览器上运行，页面也会由于一个错误而完全中断。

绝对建议使用保守的方法title.indexOf(…) >= 0。

除此之外，您的代码看起来还不错。但是，由于您已将jQuery包含在堆栈代码段中，所以为什么不使用它，我感到困惑。大部分代码将得到简化。

请使用更多jQuery！

\ $ \ begingroup \ $
jQuery修复了所有问题...
\ $ \ endgroup \ $
–RubberDuck
15年6月12日在12:49

\ $ \ begingroup \ $
是正则表达式小丑的蝙蝠侠。
\ $ \ endgroup \ $
– Vincent
15年6月12日在13:47

#2 楼

validateTitle方法采用一个titleField，然后将titleField.value提取为title。由于该函数的主要职责是验证字符串，因此最好这样做，
/>无需附加知识即可通过在接收到的字段上调用.value来提取有问题的字符串。简而言之，只需将字段值直接传递给它即可。

这当然是与回车键有关的：

  if (e.keyCode == 13) {

代替重复的!title.includes，其字符串模式埋在代码中：

/>
我建议将可疑字符串放在靠近代码顶部的数组中，并用循环替换重复的!title.includes：

  var ENTER_KEY = 13;
  // ...

  if (e.keyCode == ENTER_KEY) {

我想区分两种验证方法：

validateSomething：

检查“某物”是否有效，如果无效，则引发异常。
或者，检查“某事”是否有效，并根据成功/失败执行不同的操作

isValidSomething：如果“某物”有效并且相应地返回true或false

本着这种精神，我会将validateTitle重命名为isValidTitle
请参见已应用上述更改的可运行代码段。

 var ENTER_KEY = 13;
var INVALID_STRINGS = [
    'bug',
    'issue',
    't work',   // catches won't work, isn't working, 
    's wrong',  // catches what's wrong, what is wrong
    'fix',
    'why'
];

function validateKey(e) {
  "use strict";
  if (e.keyCode == ENTER_KEY) {
    var field = document.getElementById("title");
    if (!isValidTitle(field.value)) {
      showWarning();
    } else {
      clearWarning();
    }
  } 
}

function isValidTitle(title) {
  "use strict";
  for (var i = 0; i < INVALID_STRINGS.length; ++i) {
      if (title.includes(INVALID_STRINGS[i])) {
          return false;
      }
   }
   return true;
}

function showWarning() {
  "use strict";
  var msg = getWarningDiv();
  document.getElementsByTagName("table")[0].appendChild(msg);
}

function clearWarning() {
  "use strict";
  var popup = document.getElementsByClassName("message-dismissable")[0];
  if (popup == undefined) {
    return;
  }
  
  popup.parentNode.removeChild(popup);
}

function getWarningDiv() {
  "use strict";
  
  var popup = document.createElement("div");  
  popup.className = "message message-error message-dismissable";
  popup.setAttribute("style", "max-width: 270px; min-width: 270px; position: absolute; top: 32px; left: 378px; display: block;");
  popup.addEventListener("click", function(event) { clearWarning(); });
  
  var tooltip = document.createElement("div");
  tooltip.className = "message-inner message-tip message-tip-left-top";
  
  popup.appendChild(tooltip);
  
  var tipText = document.createElement("div");
  tipText.title = "close this message (or hit Esc)";
  tipText.className = "message-close";
  tipText.textContent  = "×";
  
  tooltip.appendChild(tipText);
  
  var msg = document.createElement("div");
  msg.className = "message-text";
  msg.setAttribute("style", "padding-right: 35px;");
  msg.textContent = "Wait! If your code does not work as intended, this question is off-topic!";
  
  popup.appendChild(msg);
  return popup;
}

 body {
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 13px;
  line-height: 1.3em;
  color: #222;
  background: #fff;
  min-width: 1030px;
}

.ask-title-table {
  width: 668px;
  height: 44px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: grey;
}

.ask-title-cell-key {
  width: 40px;
}

#title {
  width: 498px;
}

.form-item label {
  display: block;
  font-weight: bold;
  padding-bottom: 3px;
}

input[type=text], input[type=url], input[type=email], input[type=tel], textarea {
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  background: #fff;
  color: #444;
  border: 1px solid #ccc;
  font-size: 14px;
  padding: 8px 10px;
}

.message.message-error.message-dismissable {
  cursor: pointer;
}

.message.message-error {
  z-index: 1;
  display: none;
  color: #fff;
  background-color: #c04848;
  text-align: left;
}

.message.message-error .message-text {
  padding: 15px;
}

.message.message-error .message-close {
  padding: 2px 6px 3px 6px;
  font-family: Arial,sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: #fcb2b1 !important;
  line-height: 1;
  float: right;
  border: 1px solid rgba(255,255,255,0.2);
  margin-top: 8px;
  margin-right: 8px;
}

.message.message-error .message-tip-left-top:before {
  top: 0;
  left: -9px;
  border-top: 9px solid #c04848;
  border-left: 9px solid transparent;
}

.message.message-error .message-tip:before {
  content: "";
  position: absolute;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
      <title>Ask a Question - Code Review Stack Exchange</title>
  </head>
  <body>
    <form>
    <div id="question-form">
      <div class="form-item ask-title">
        <table class="ask-title-table">
          <tbody>
            <tr>
              <td class="ask-title-cell-key">
                <label for="title">Title</label>
              </td>
              <td class="ask-title-cell-value">
                <input id="title" name="title" type="text" maxlength="300" tabindex="100" placeholder="state the task that your code accomplishes. Make your title distinctive." class="ask-title-field" data-min-length="15" data-max-length="150" autocomplete="off" onkeypress="return validateKey(event)"/>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- warning should be inserted here -->
    </div>
    </form>
  </body>
</html>

#3 楼

我很惊讶地看到没有其他人提到过这个问题，但是您忘记了一件事：

我的代码中有一个错误

我的代码中有错误

不是。

您确实应该使其不区分大小写。

包含字符串的方法是解决此问题的简便方法，但也可能导致误报：

“使用Python脚本跟踪Github上的问题”
“停止烦扰我！（有关bug的游戏）” IMO有假阳性，我必须说，您的简单过滤器非常好。

\ $ \ begingroup \ $
糟糕，我的代码有错误！
\ $ \ endgroup \ $
– Mathieu Guindon♦
2015年6月12日在18:01

#4 楼

一些小事情：

"use strict";

看到您希望所有功能都使用严格模式，只需将其放在文件顶部即可。（请注意，仅允许在前面加上注释和空格。）

都可以互换以简化和缩短代码：

    if (!validateTitle(field)) {
      showWarning();
    }
    else {
      clearWarning();
    }

  if (popup == undefined) {
    return;
  }

  popup.parentNode.removeChild(popup);

\ $ \ begingroup \ $
因为“使用严格”；如果将其放在错误的位置，则无提示地失败，将其放置在函数的开头比将其放置在文件级别（在此级别可能被合并或编辑以使其不再位于顶部）更“安全”（尤其是例如，在其开头加上评论）。但是您可以在整个程序中放置一个大功能，即（{“ use strict”; ...}（））;，这样既可以避免重复，又可以避免忘记将其放在单个功能中。
\ $ \ endgroup \ $
–凯文·里德（Kevin Reid）
2015年6月12日23:36

\ $ \ begingroup \ $
此外，文件顶部的“使用严格”可能会使未编写为在严格模式下运行的其他代码弄乱，上述代码可能包含在其中。
\ $ \ endgroup \ $
–晴天
2015年10月1日，12：33

编程黑洞网

当“如何问”太微妙时

评论

#1 楼

评论

#2 楼

#3 楼

评论

#4 楼

评论