编写优质JavaScript的五个或以下技巧？[关闭]

JavaScript显然已变得不可缺少。但是，我仍然是新手，而且我发现很难克服那种感觉似乎很混乱的感觉，我现在不想处理它。与JavaScript相比，我对其他语言的理解更加深入，因为我似乎无法解决这种恐惧。我有一种感觉，当我编写JavaScript时，我试图画一幅Weimaraner幼犬的肖像​​。

通常，这可以帮助我牢记一些最重要的指令，以便我对自己的一举一动进行自我询问。（在我看来，只有五个或更少。）

您能列出五个（或更少）特定于JavaScript的问题吗？在编码JavaScript时，我应该问自己的每一步？他们会是什么？

更新：澄清一下，我并不是在学习JavaScript时要记住五件事；我要问的五个问题总是要问自己，每个人都应该一直问。像这样的高级问题：“我可能会在其他地方重复吗？” 或“此变量/函数名称是否足够具体（或太具体）” <==，除了这些示例问题不是JavaScript特有的。我正在寻找JavaScript特有的指令。

我将分两部分回答。一种是“ 学习编写好的JavaScript的五个或更少的技巧”。另一个是“编写好的JavaScript的五个或更少的技巧”。

学习：

1. 问问题
2. 听
3. 读
4. 做东西

正在做：

1. 避免全局（模块化）
2. 在循环之外做一些困难的事情（DOM选择，函数声明等）
3. 了解范围的工作原理
4. 了解何时以及如何使用闭包
5. 了解面向对象的JS如何工作

编辑（添加问题以符合操作规范）：

我指的是什么范围？

这应该有助于泄漏全局变量，事件处理程序以及何时使用闭包。

我在重复自己吗？

正确抽象和使用OO技术非常重要。明智地使用它们。

我的代码会重复吗？

很容易发现自己将DOM访问放入循环中，或者在循环中创建函数（匿名或其他方式）。请注意，这对于使用setTimeout或setInterval传统循环的代码都适用。

这是否意味着我认为的意思？

JS中的真实值和虚假值可能会有些棘手，尤其是在使用非严格比较时（==相对于===）。动态类型，类型强制和是否引用对象还是文字也可能是相关的。

首先，了解其背后的技术是如何工作的。

您需要知道这一点，因为它是如何工作的背后的知识，因为您将遇到网络问题，或者，正如我无数次看到的那样，人们完全无法理解服务器端和客户端的实际含义。我看到的最常见的newb问题之一是“如何使JS更改ASP代码中的变量？！”

• 您了解以太网/ wifi和TCP / IP对发生的事情有一个大致的了解吗？
• 您实际上知道多少HTTP？
• 您实际上获得了HTML吗？当然，您可能知道标记的工作方式和嵌套内容，但是您实际上了解doctype和quirks模式吗？您知道您不应该将段落标签放在列表元素周围吗？
• 发明JavaScript（并说明它可以在服务器端运行）。ecmascript，livescript，mocascript，jsscript，node ...
• 学习Window API，学习DOM API，并学习XHR API。如果您不知道这三件事，那么您就不需要为浏览器编写任何业务代码。

了解您的代码比您大，或者您的具体情况

• 当然，您写了一些东西，但是每个人都可以看到。都是“开放”源代码。当然，您可以对其进行混淆，最小化……在一天结束时，如果我想看到您的代码，那么击败您使用的任何方法对我来说都是微不足道的。
• 您需要了解多种浏览器的差异。定位最受欢迎的受众群体或您的市场人口统计对象。例如，如果您添加appendChild而不是专门用于表的DOM API方法，那么ie6不会呈现DOM表单元元素。存在更多示例，您需要学习它们。
• 您需要了解如何在浏览器（而不是您的特定浏览器）中围绕所有这些问题编写代码。您将很快了解在一种浏览器中运行良好的事物在另一种浏览器中运行缓慢的事物。您必须弄清楚浏览器如何工作以及它们为何与众不同。
• 为了喜欢Odin的胡须，请不要编写允许我对您的代码进行跨站点脚本攻击的代码。如果您对某个单元格进行ajax调用并执行类似的操作cell.innerHTML = "<script>alert("xss")</script>"，并且出现一个警告框，则说明您做错了。
• 远离流血的地狱，远离DynamicDrive，w3Schools和提供错误建议的网站。您需要找到提供良好建议的社区。在Stack Overflow上，我们拥有JavaScript和Node.JS聊天室，我们尽最大努力不断提高“更好”的极限，因为w3s之类的网站会保留过时的数据，并且永远不会打扰它。您应该坚持使用W3C，Mozilla开发人员网络（MDN）等官方规范站点。要求对您的代码进行同行评审。当您感觉自己的代码痛苦不堪时，当您对代码进行很多剪切，粘贴，微调时，您应该立即来到聊天室，寻求有关编写更好代码的指导。
• 当您来寻求指导时，或者想分享您所做的非常酷的事情时……请，请，请。请确保已将其记录在案，确保变量名有意义，并确保不是全部一行。您需要编写干净的代码。如果你有一堆垃圾，不仅有你失败了，没有人谁知道如何帮助你将要来。帮助我们帮助您。
• 您想编写JavaScript，这很酷，请注意并非所有人都支持JavaScript。造成这种情况的两个原因是：1）所有人的上网速度更快（而不是“把所有事物都融合在一起”，这会导致体验变慢）。2）使用基于控制台的浏览器，运行无脚本的人，移动电话的人们更容易访问Web。我要说的是，如果某人没有JavaScript，则您的网站应该会正常降级，至少要使用<noscript>标签来提醒他们。
• 由于JavaScript的原型性质，您可以更改该语言的实际工作方式-这确实很棒。您会看到，JavaScript在不断发展，我们退出了JS的较早版本“ ECMA Script 3”，而进入了“ ECMA Script 5”（又名es5）。由于具有原型，我们可以在现场修复es3语言，使其像es5一样工作。这就是说，ie6是一种使用了10年的浏览器，具有去年发布的语言功能。尽可能使用es5垫片，它们确实很酷，您需要研究一下。
• 讲英语的白人孩子的西方世界不是谁使用互联网。相应地编码。这意味着您需要了解国际化，并编写满足更高需求的代码。10年前只有不到5亿人在线，今天大约有20亿，还有10年？可能接近地球上的每个人都可以访问互联网，这意味着您需要支持不适合regex的名称/[a-z ']/i，但要包含北印度语，阿拉伯语和口音（这是近视开发人员所面临的问题），中文， 和别的。了解字符集，Unicode和UTF-8。

您是程序员，而不是面食工厂。别写意粉了。

• 用有意义的名称命名变量。
• 记录您的代码。我不在乎您是否使用的是犀牛技术的JSDoc，还是有很多涂鸦。编写文档，以帮助将要使用您的代码的人。为想要改善或维护您的代码的人编写文档。包括有用的评论。像“ "This fizzes the bizz"半英语”或“半英语” 这样的评论没有帮助。描述函数的作用。描述代码的复杂部分。
• 弄清楚如何限制代码的重复。寻找模块化设计或功能模式。看看可以抽象什么。您永远都不应结束剪切，粘贴，扭曲大段代码来完成相同的事情。
• 您需要了解DOM API。DOM和window对象提供了很多很棒的东西。这听起来像很多工作，但这是因为它是一个可怕的缩写。你们很多JavaScript忍者都喜欢编写诸如的代码<a href="javascript:alert("foo")">。FFS不这样做。等待整个文档加载，将您的JavaScript代码与html文档分开。这是OOP的基本做法101，只是永远不要将JS或CSS内联到html文档中。弄清楚如何正确地做，或找一个知道如何向您展示如何做的人。再问一遍。
• 这Javascript:foo("buz")是一个伪协议，不完全受支持，如果您不使用内联JavaScript，则一开始就不会使用它。我从心底向您保证，没有任何理由要在地球上或宇宙中的任何地方将JavaScript放入HTML元素中。曾经 所以不要这样做。我甚至不会帮助人们做任何更多，这是那个坏。

弄清楚如何以不间断的方式编写代码。

• 全局变量是最大的问题之一。弄清楚JavaScript中的函数式编程是如何工作的。弄清楚什么是吊装。弄清楚如何避免全局变量。
• 使用静态代码分析工具。这些将立即提醒您编写代码时所做的所有小事。忘了分号？哦，是的。有一个全球性的地方吗？哦，是的。尝试运行代码时可能会引发许多神秘错误的代码？哦！他们在那里！数小时之内不再花时间去盯着一堆代码，试图找出仅仅是语法错误的内容。（嗯，几乎没有，您可能已经做了一些它无法捕捉到的事情，但是它通常很棒）。
• 单元测试。没有理由没有。有大量的单元测试工具。基本上，单元测试是“这是我的功能”，“我希望它输出Y”“这是一些测试输入”，而测试是“它们都起作用了吗？” 有许多JS测试框架，例如流行的QUnit。通过您最喜欢的搜索引擎进行浏览，看看您喜欢什么。但是使用它们。
• 源代码管理管理，也称为版本控制。Git很受欢迎，并且有充分的理由。SVN和其他一些也是。您需要立即停止做的就是编辑生产代码。您需要停止重命名文件main_backup_20110911.js.bak.1您丢失了东西，目录变得混乱，您无法轻易地“倒带”到上一个时间点。您看不到发生了什么，您无法制作代码补丁。因此，只需开始学习GIT，它应该花费您一个小时，而且您再也不会回头了。
• 同行评审。你不是那么好，我也不是。我通过尽可能多地征求反馈而变得更好。您也应该这样做。

编写人们喜欢的JavaScript

• 找出为什么您的代码很慢。使用jspref并创建测试。
• 停止将事件绑定到一个DOM元素会很慢，并且会造成严重的事件冒泡问题，这将浪费大量时间。在JavaScript中研究“事件委托”。
• 停止使用innerHTML编辑DOM。这可以追溯到学习HTML是什么，以及学习DOM是什么。HTML是从服务器发送的数据，您的浏览器呈现引擎使用HTML来创建一堆最终成为文档对象的编程对象。当您使用innerHTML时，您是在要求浏览器重新渲染整个内容。幸运的是，就像十年前一样，我们创建了DOM API，它使您可以“附加子级”或“创建文本节点”，而无需更新整个内容。innHTML是Microsoft发明的一种耻辱-如果使用它，您还将失去所有抱怨IE6糟糕的特权，因为您正在帮助它永远存在。了解DOM。
• 它需要在任何可能的地方工作。如果不支持某些功能，则需要对其进行适当的降级，以使体验不会糟透了-您不能随心所欲地砸用户。
• 版权和许可很重要。不要剥夺别人的辛勤工作。如果有人说“不得转售”，则不能出售。别混蛋，否则我们会讨厌您的代码来剥夺勤劳的人们。
• JS是原型，而不是类。别那样做。如果您不了解原型的工作原理，则需要这样做。谷歌一下。JavaScript不是基于类的，请停止尝试创建类，但很少能很好地工作。人们尝试用原型语言编写古典代码，并将其用作“为什么语言很烂”的案例，我可以为Ruby无法支持原型提供相同的案例。学习新知识，别再做错了。

始终专注于基础知识。

• 您错了，这太棒了，因为您现在知道一些。没有什么比不承认自己是错的人会更糟糕的了，他们会像坏了摇滚明星的超级英雄忍者一样，不断把糟糕的代码扔出去。他们只是傻瓜。承认你可能是错的，承认你可能是错的，寻求帮助。
• 您并不总是需要jQuery。jQuery创建了许多慢速代码，并帮助不了解JS的人编写JS。这是另一个问题，因为JS不需要您知道JS即可编写JS。去搞清楚。一旦了解了我上面提到的几件事，例如学习事件，学习DOM，了解innerHTML，您就会明白jQuery为什么会对您的代码有害的原因。它可以正确地很多地方可以使用，但通常可以使用更小的图书馆，甚至喘气自带的浏览器上有所建树的标准JavaScript。您不需要jQuery来做任何事情，它使编写一些很不错的代码（如果您正在学习中）变得更容易，但是您需要开始做得更好并学习更多-当您知道更多时，您就会想出如何无论如何在jQuery中编写更好的代码。看看其他一些JavaScript库，别再这么拘谨了。
• 您不需要剪切，粘贴，调整，只需编写DRY代码即可。我之前已经提到过，但是在这里也很重要。如果您的代码库很丢脸，则不能编写高质量的代码。
• 不要滥用数组/对象差异，学习如何循环。了解为什么使用a for (;;)以及为什么使用for( in )循环。何时使用while循环。仅在使用开关盒时，请停止嵌套IF。对象不保留顺序，因此不要将它们用作数组。旧的Opera / FF，旧的MISE，有时Flash不会尊重对象的顺序。如果要保持事物的顺序，请使用数组；如果要对象（没有元素顺序的事物），请使用对象。
• 如何利用决策结构来发挥自己的优势，而不会增加代码的复杂性。停止嵌套IF，找出布尔逻辑运算符的工作方式。弄清楚开关柜的工作原理。
• RTFM。了解更好的代码的最佳位置是阅读实际规范。阅读您要使用的那部分代码的RFC规范。阅读ECMAScript文档。阅读W3C DOM规范。阅读W3C XHTML / HTML / HTML5规范。阅读规格，它们很好。

专注于漫长的比赛，而不是快速死亡。

• 您应该帮助社区，应该编写会持续很长时间的代码。对您的代码和社区有一些热情。如果您在某个地方留下了不好的知识，那就滚回去修复它。不良信息真的很难清除，并且永远存在。尽你所能。不要帮助w3schools使网络变得更糟。
• 不要无所事事地说：“嘿，我有个很好的用法which”，丢下一堆没人能使用的代码，然后消失。你什么都没捐 不要使用a和这样的变量chezburger。
• 学习发现不良代码和良好代码，在自己的代码中找到它们，将不良代码变成良好代码。
• 创造，学习，教导。
• 开阔视野。您不能只是永远地编写JavaScript，而是让您放学一些有趣的事情，回来，分享您学到的东西，看看是否可以在社区中找到自己的位置。尝试向另一个世界展示当您在其中时JavaScript也具有什么价值。
• 即使您一无所知，您仍然错了。使用正确的证明，而不是您的身份/权威。您永远不可能是对的，但您的证明永远是正确的。避免生气，有时要尽力避免。有证据还是没有证据。火焰无助。

对于任何有兴趣的人，我实际上都是从我还没写完的教程的个人笔记中摘取的。

1. 阅读Douglas Crockford的Javascript：The Good Parts。那是一个小技巧，但老实说，这是我编写良好的javascript所听到的最好的建议。

2. 相关地，阅读Douglas Crockford 关于Javascript的文章。

alert('This illustrates how JavaScript has first-class functions');
alert('It also illustrates how to use closures.  Try running this code in your browser.');

var funky = function(s) {
    alert("We're getting funky with " + s);
};

var makeFunkyObject = function(funkyFunction) {
    var numberOfTimesAlerted = 0;
    var fn = { };
    fn.alertFunky = function(s) {
        funkyFunction(s);
        numberOfTimesAlerted++;
    }
    fn.getNumberOfTimesAlerted = function() {
        return numberOfTimesAlerted;
    }
    return fn;
}

var funkyObject = makeFunkyObject(funky);

funkyObject.alertFunky('Alice'); // alerts We're getting funky with Alice
funkyObject.alertFunky('Bob'); // alerts We're getting funky with Bob
alert(funkyObject.getNumberOfTimesAlerted()); // alerts 2

alert('Also, be sure to distinguish between learning about JavaScript and learning about the DOM');
alert('The former is awesome; the latter, not so awesome.');

以下是一些应该帮助您继续使用JavaScript的问题。

1. JSON如何工作？它有什么用？

2. 为什么在Javascript中使用函数对象？

3. 我为什么不应该使用eval？

4. 如何在javascript中创建事件？

5. 如何在javascript中进行功能检测？

几乎涵盖了您需要用Javascript做的大多数事情。

1. 始终使用分号。隐式分号（在JS中）是一个可怕的想法，尤其是在一些常见用法中有一些有趣的语法。任何JS缩小程序通常也需要它们。
2. 避免使用eval（）。这会引起各种各样的问题，并且是减慢应用程序速度的非常快速的方法。大多数用途实际上是滥用。每次您认为需要使用时eval()，请以另一种方式再次检查两次；除非您实际上试图执行整个JavaScript字符串，否则几乎总是有一种更简洁，更轻松的方法。
3. (function() {/* stuff */})()是封装一组代码并为其创建本地作用域的好方法。使用对象通常是另一种更好的方法。以这种方式使用时，对象更类似于其他语言中的名称空间。只是提防this。与大多数其他语言不同，this并非总是引用您可能会直观地想到的内容。还要记住，除非另外指定，否则所有JS变量，函数和其他对象都是全局的，即使跨多个.js文件也是如此。
4. 查找和学习/使用良好的JS库。jQuery是比较流行的一种。这些将为您带来很多繁重的工作，包括诸如功能检测和抽象化DOM操作之类的东西，以及在不同浏览器中实现不同事物的多种方式。
5. 始终使用分号。说真的 获得一个IDE，当您忘记它们时会警告您。我不想听起来很固执，但是有几次引入bug只是因为缺少分号，并且浏览器不会警告您这些错误。

我相信类是构造代码的强大工具。关于如何设计基于类的系统，有很多与语言无关的规则，而在使用类时，实际上更明显地实现了一些面向对象的原则。
因此，我建议您看看CoffeeScript。

从这里开始，我建议您尝试收集有关如何实现SOLID，DRY，GRASP，KISS和YAGNI的信息，更重要的是，如何处理它们似乎有冲突的情况（它们永远不会这样做，只有您对它们的理解或问题就解决了）。即使在stackexchange上，也很容易找到它。

请注意，这些原则同样适用于“原始” JavaScript开发。但是，您会在它们上发现很多内容，它们将使用基于类的语言来说明它们，因此，以某种语言进行编程可能会很有用，因为在这种语言中，了解它们不会涉及太多的开销。
就个人而言，我认为JavaScript是一种功能非常强大的语言，但实际上，您必须首先深刻理解其他语言，才能真正理解这一事实。

我假设您在Web应用程序中使用JavaScript进行客户端UI开发。

1）应该是客户端还是服务器端？我知道我已经写了很多代码，这些代码本来应该放在服务器端，反之亦然。很多时候，我会进行AJAX调用，以便最终将某些更好地放置在Server代码中，以便在以后将其包含在内。特别是本质上是静态的但定期更改的事物（例如类别列表）。

2）是否已经有这样做的插件？我经常使用JQuery，答案几乎总是YES！我经常会使用别人编写的插件代码，并使其适应我的需要（通常在事情上添加额外的类，等等），但是我很少需要从头开始。

3）Java脚本是否合适？有时候，当使用智能CSS更有意义时，我会发现自己通过Javascript向一堆东西添加了一大堆动态样式。

4）我应该使用其他工具吗？这是我最近一直在努力的事情。在我的堆栈（Rails 3.1）中，有一些JavaScript 脚本可以很好地处理，例如coffee脚本，我一直在考虑是否将大量代码移到那里。

5）这是Javascript代码的好代码吗？Javascript是与其他任何代码一样的代码。此代码与我的其余代码一样好吗？如果没有，为什么不呢？它是一次性的吗？我懒吗？