Question

在过去五年中，Javascript的使用变得非常复杂和强大。我努力解决的这种函数式编程的一个方面，尤其是Javascript的特性，是如何通过注释或代码清楚地说明正在发生的事情。通常这种代码需要一段时间才能破译，即使您了解原型，一流的功能Javascript方式。是否有任何想法或技巧可以完全清楚您的代码在Javascript中的作用以及如何实现？

我在其他地方问过这个问题，但没有得到太多回应。

Answer 1

使用公共库是一回事，但我认为很多“获取”JavaScript只是花时间编写它。可能看起来深奥的事情将慢慢变得平凡。几乎任何语言或框架都是如此。

JavaScript中使用的许多习语，例如匿名函数，文字语法等，只有在您第一次接触它们时才会显得很奇怪。我认为编写可理解的C＃/ Java / C ++ / VB /等的规则相同。代码适用于JavaScript - 使用具有语义含义的变量名称，编写评论以帮助某人理解意图并承认假设，明确等等。

现在，如果您真的在问“我怎样才能让那些不熟悉它的人理解JavaScript？”你还有另外一个问题 - JavaScript是JavaScript，开发人员只需要努力学习它，然后才能熟练掌握它并与它“合而为一”。

例如，对于那些不熟悉JavaScript的人来说，这个函数可能看起来很奇怪，但对我来说（我肯定还有很多其他人）并不难理解：

// comments are not included *on purpose* for illustrating 
// my point about the need for language knowledge
function copy(obj) {
  return new (function(o) {
    for(var property in o) {
      if(o[property].constructor == Array) {
        this[property] = [];
        for(var i = 0; i < o[property].length; i++) {
          this[property][i] = new arguments.callee(o[property][i]);
        }
      } else if(o[property].constructor == Object) {
        this[property] = new arguments.callee(o[property]);
      } else {
        this[property] = o[property];
      }
    }
  })(obj);
}

这个函数有一个名字的事实有助于随意读者知道它的作用，但要真正理解它在做什么，就必须要理解为什么这个函数可能是必要的，如何引用JavaScript对象属性，JavaScript支持哪些数据类型，构造函数如何工作，匿名函数如何工作等等。只有对这些事物的深入了解才会有所帮助（或者除了厨房水槽之外几乎所有东西的库）。

更新：对于那些说上述示例中的评论会向试图理解它的开发人员提供帮助的人 - 显然。评论很有用，我认为这是给定的。上面的示例代码旨在说明多个特定于JavaScript的特性，这些特性只有具有足够深入语言知识的人才能理解。

正如我在其他人回答的评论中所说，我的代码，根据我的JavaScript知识，我可以完全理解，不应该所以评论说它变成了替代语言知识。我不应该解释，例如，匿名函数在哪里，或者我在上面的代码中使用匿名函数作为匿名构造函数，并且它将改变{的C＃和Java开发人员的感知标准行为） {1}}关键字，所有会让较小的JavaScript开发人员感到困惑的事情。

Answer 2

这样做的一个好方法是使用Unobtrusive JavaScript的原则来分离关注点。塞巴斯蒂安建议使用jQuery使用这个原则。

Unobtrusive JavaScript

Answer 3

我的观点有两个：

学习语言。 JavaScript闭包和{key: {function}}并不难理解。事实上，这是一种非常常见的方言。
了解框架。 jQuery，prototype等都是很好的框架，它们试图遵循所有API的规则性和同质性原则。如果你在自己的JavaScript代码中掌握这种做事方式，事情就会变得清晰。

例如，我最近需要一种方法将自定义行为应用于某些输入。我没有使用功能样式，而是使用我的方法扩展了所有<input>元素（我正在使用原型），这与其他原型内容一致。如果在开发时考虑到这些原则，大多数代码变得非常简单。

我对JavaScript的最大抱怨是知道如何整理我的 .js 文件，但这是另一个故事。

Answer 4

我认为隐藏大部分JavaScript内容的原型或jQuery等框架的目标之一。由于它不易理解，因此它们的设计尽可能简单。因此，如果您使用此类框架，JavaScript会更清晰。我所做的是写很多评论，使用大量的空格和行等等。但那些{{function（）{...故事仍然存在。

Answer 5

不要忘记，当你编写（或遇到）特别深奥的代码时，你应该考虑通过快速评论来解释它正在做什么（以及它为什么这样做），这将有助于其他任何人阅读代码，但是可能没有足够的语言来理解实际发生的事情。

Answer 6

@Jason Bunting

我必须说我不同意“对javascript的来龙去脉只有一个相当深入的知识”将有助于你理解你的copy（）示例。沿着“深层复制”或“递归调用复制对象属性”等等的注释可以快速阐明那些不是绿色背后但不知道Javascript特性的所有细节的程序员。

我知道在你真正知道 Javascript之前需要先了解一些重要的概念，但这并不意味着代码一目了然就不会更清晰了。

Answer 7

格式化代码。如果您不知道如何使用它 - 依赖IDE（NetBeans或WebStorm内置它）或JS Beautyfier（如果您仍然在记事本中编码，出于某种原因。）
使用清洁代码的一般原则。使用括号，坚持一个代码约定，使用可理解的命名方案，谨慎注释，避免全局变量，深度嵌套，长函数和深奥代码。
确保您的IDE可以识别您的代码。通常这意味着您必须废弃模块模式又名电源构造函数 {{ 1}}赞成经典构造函数 var module = ( function () { ... } )();
在函数开头声明变量，以避免变量提升时出现众所周知的问题。
用更好的名称替换构造函数中的Module = function () { ... }; Module.prototype.method1 = function () { ... };。以某种方式显示实际的对象用途。 this
为现代浏览器编写跨浏览器代码，如果您需要支持IE8及以下版本的旧垃圾，请使用jQuery或其他框架。如果可能，请避免在初始化程序功能之后的任何地方进行浏览器检测。
尽可能使用JS Doc - 例如，如果您的IDE或repo-browser支持它。
写入调试，当您的代码非常复杂时。即：不要function Car() { _car = this; _car.accelerate = function () { ... }; }大量的代码，不要滥用链接，不要内联可能会破坏的东西。
不要使用eval ，既不是独立的，也不是function() { return {或setTimeout中的隐式评估。

Javascript清晰的目的

7 个答案: