Question

如何从Node.js样式指南实现此规则：

每行80个字符将您的行限制为80个字符。是的，屏幕在过去几年中变得更大，但你的大脑却没有。使用额外的空间进行分屏，编辑器支持，对吗？

下面的示例JavaScript代码（抱歉这个愚蠢的问题，但我找不到使用谷歌的直接答案）：

$(document).ready(function() {

  var twichApiContainer = [];

  function makeApiLinksReady() {
    var twichtChannels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "sanchowest"];
    var twitchApiZ = "";
    for (var z = 0; z < twichtChannels.length; z++) {
      twitchApiZ = 'https://api.twitch.tv/kraken/channels/' + twichtChannels[z] + '?callback=?';
      twichApiContainer.push(twitchApiZ);
    }
  }

  function useAjaxWithTwich() {
    var twichRequestTimeout = setTimeout(function() {
      $(".container-fluid").html("An error occurred! Application couldn't get Twitch.tv resources!");
    }, 5000); //This is 5 seconds!

    for (var y = 0; y < twichApiContainer.length; y++) {
      $.ajax({
        url: twichApiContainer[y],
        dataType: 'jsonp',
        type: 'GET',
      }).done(function(result) {
        var largeHtml1 = '<div class="row"><div class="col-xs-4 col-xs-offset-4"><h4>';
        var largeHtml2 = '</h4><div class="well"><div class="row"><div class="row vertical-center"><div class="col-xs-12"><div class="logo">';
        var supplement1 = '<img class="obraz logo-border" src=';
        var supplement2a = result.logo;
        var supplement2b = ' target="_blank">';
        var largeHtml3 = '</div></div></div></div><div class="row"><div class="col-xs-12"><div class="name">';
        var supplement3a = '<a class="title" href='
        var supplement3b = result.url;
        var supplement3c = ' target="_blank">';
        var supplement3d = result.display_name;
        var supplement4 = '</a>';
        var largeHtml4 = '</div></div></div><hr><div class="row"><div class="col-xs-12"><div class="information">';
        var supplement5 = result.game + ': ' + result.status;
        var largeHtml5 = '</div></div></div></div></div></div>';

        var hugeHtmlSum = largeHtml1 + largeHtml2 + supplement1 + supplement2a + supplement2b + largeHtml3 + supplement3a + supplement3b + supplement3c + supplement3d + supplement4 + largeHtml4 + supplement5 + largeHtml5;
        $(".container-fluid").append(hugeHtmlSum);

        clearTimeout(twichRequestTimeout); //This will prevent timeout from happening!
      });
    }
    return false;
  }

  makeApiLinksReady();
  useAjaxWithTwich();
});

.logo {
  text-align: center;
}

.logo-border {
  border-color: red;
  border-width: 0.189rem;
  border-style: solid;
}

.obraz {
  height: auto;
  width: auto;
  max-width: 70px;
  max-height: 70px;
}

.name {
  margin-top: 2rem;
  font-size: 1.5rem;
  text-align: center;
}

.information {
  text-align: center;
  font-size: 1.5rem;
}

.vertical-center {
  display: flex;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <meta charset="UTF-8">
  <title>Twitchtv</title>
</head>

<body>

  <div class="container-fluid"></div>

</body>

Answer 1

如果您遵守80 char规则，您还应遵循以下规则：

您向用户显示的文字不应在您的代码中

这样你就可以轻松地做到i18n
HTML应与JavaScript分开存储

使用某种适当的模板引擎代替。无论如何它更安全（xss等）
在尝试按照这样的规则生活之前，先了解如何编码
- 与你的引用风格保持一致（哦，是的HTML中的HTML？）
- 通过当前的ECMAScript语言规范保持最新和代码
- jQuery 2似乎太老了！人们还在用那个？（无论如何，恕我直言jQuery是一个可怕的选择 - 哦正确的引导）
- 正确的循环？
- 等

当您最终遵守这些规则时，请使用clang-format格式化您的代码。

就每行80个字符而言，它通常比js-beautify做得更好。

JavaScript中每行80个字符的规则

1 个答案: