javascript 简单_JavaScript：太简单了吗？

javascript 简单

以下内容从《 科技时报》＃167重新发布。

当我们第一次坐下来编写Simply JavaScript时 ，Cameron和我不得不决定我们想要做的事情有多复杂。 一方面，这本是一本初学者的书，所以我们想使事情保持简单（毕竟它被称为“ Simply JavaScript”）。

另一方面，JavaScript在现实世界中并不是那么简单，我们感到很多其他书籍都因为没有向读者提供他们理解和编写现实世界代码所需的工具而感到内。 我们不想犯同样的错误，即“精简”语言以制作一本易于阅读的书。

为了说明我的意思，让我们使用几个复杂度级别的代码来编写同一JavaScript示例。 这个例子很简单：我们将提示用户询问是否应在新窗口中打开到外部站点的链接。 但是，正如我们将看到的，即使这样一个简单的示例，如果您愿意也可以变得非常复杂！

简单但丑陋

如果简化代码是最终目标，那么这个示例的确可能非常简单：

<a href="http://example.com/" onclick="
    if (confirm('Open this link in a new window?')) {
      window.open('http://example.com/');
      return false;
    }
">external link</a>

让我们暂时停顿一下，同时听众中所有JavaScript资深人士都注视着他们。

尽管此代码肯定可以正常工作，并且在初学者JavaScript书中非常容易解释，但这是一个非常麻烦的解决方案。 该代码位于HTML内容的中间，并且必须对页面上此类型的每个链接重复该代码。 另外，该链接的URL在JavaScript代码中重复，这冒着两个不同步的风险。

还是太简单了？

我们在上面看到的代码段在1997年左右的某个时候被认为是最先进的。让我们来看一个更现代的替代方案，它仍然试图使事情变得简单：

<a href="http://example.com/" class="ext">external link</a>
<script type="text/javascript">
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    var link = links[i];
    if (link.className == "ext") {
      link.onclick = clickHandler;
    }
  }

  function clickHandler() {
    if (confirm("Open this link in a new window?")) {
      open(this.href);
      return false;
    }
  }

</script>

此版本不是将JavaScript代码直接添加到文档中的每个外部链接，而是使用单个JavaScript代码块来检测文档中的所有外部链接（那些带有class="ext"的外部链接）并分配相同JavaScript函数（ clickHandler ）来处理每个事件的click事件。 可以在所有外部链接之间共享此功能，因为它使用this.href从已单击的链接中获取要打开的URL。

过去几年发布的许多JavaScript书籍都对我们在此脚本版本中所做的改进感到满意。 代码很整洁，其行为与广告中所宣传的一样。 初学者还能要求什么？

这种想法的问题在于，从此类示例中学习的初学者走进了Web的狂野，发现使用更高级JavaScript编码结构编写的示例，并感到迷茫。

简直更好

我们刚刚看到的脚本与Web专业人士在现实世界中生成的代码之间的主要区别可以用两个词来概括： 不引人注目的脚本 。

不引人注目的脚本是开发人员用来捆绑其JavaScript代码的一系列技术的名称，这样它就不会干扰同一页面上正在运行的其他脚本。 例如，我们刚刚看到的脚本会干扰定义了名为clickHandler的功能的任何其他脚本，或者会在页面链接上注册click事件处理程序的其他脚本。

因为JavaScript是一种灵活的语言，所以有很多技巧可以实现流畅的脚本编写。 一些流行的方法大大增加了编写甚至简单脚本的复杂性，对变量和函数的引用根据它们在代码中的位置而发生了巨大变化。

当您正在编写《 Simply JavaScript》之类的书时，面临的挑战是向初学者展示如何编写通俗易懂的脚本，而又不会使新手程序员难以掌握代码。 这是我们想到的：

var ExternalLinks = {

  init: function() {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
      var link = links[i];
      if (link.className == "ext") {
        Core.addEventListener(
          link, "click", ExternalLinks.clickHandler);
      }
    }
  },

  clickHandler: function(event) {
    if (confirm("Open this link in a new window?")) {
      open(this.href);
      Core.preventDefault(event);
    }
  }

};

Core.start(ExternalLinks);

整个脚本捆绑在一个名为ExternalLinksJavaScript对象中，这是脚本中唯一可能与另一个脚本冲突的元素，因此被选择为唯一的。 该脚本由一组函数组成，这些函数定义为该对象的方法。

此结构使这些函数可以在代码中的任何地方以相同的名称调用（例如， ExternalLinks.clickHandler ）。

一旦定义了脚本，就可以通过调用其init方法启动整个过程，该方法由上述代码的最后一行Core.start(ExternalLinks);触发Core.start(ExternalLinks); 。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

冲突事件处理程序的问题由Core函数库（ Core.start ， Core.addEventListener ， Core.preventDefault等）解决，其内部工作在本书的适当地方进行了说明。

尽管这种方法缺少一些更复杂的替代方法的某些功能，但它非常简单，初学者可以掌握它，并有信心按照相同的模式编写自己的脚本。 它还使他们接触到对象等更高级的语言功能，因此，当他们需要采用一种更高级的编码样式时，他们就有很大的机会了解将在网上找到的示例代码。

通过从第一页开始使用此编码结构，Simply JavaScript避免了初学者的不良习惯。 您也不会在其他一些最近JavaScript标题的第100页周围看到那尴尬的一章，在那一章中，作者解释说，本书中提出的代码风格是有缺陷的，应该避免。

一本独特的书

如果这篇文章中讨论的许多JavaScript语法错综复杂，请您多多包涵，我深表歉意。 不过，我确实希望您会考虑拿一份Simply JavaScript的副本，以便您可以了解所缺少的内容！

对于那些了解JavaScript的人，我很想听听您对我们采用的语言方法的想法。 这与本书的主要JavaScript库以及我们古怪的幽默感共同构成了本书的独特之处。

翻译自: https://www.sitepoint.com/javascript-how-simple-is-too-simple/

javascript 简单