我的 JavaScript 模式/实践很糟糕。我应该去哪里寻求帮助？

Posted 2023-03-03

【中文标题】我的 JavaScript 模式/实践很糟糕。我应该去哪里寻求帮助？

【英文标题】：My JavaScript patterns/practices stink. Where should I seek help?

【发布时间】：2011-12-31 08:34:49

【问题描述】：

在过去的几年里，我几乎只专注于后端任务，我刚刚注意到，在我不在的情况下，大多数 javascript（和 CoffeeScript）项目都变得更漂亮了。

我主要在 Rails 环境中工作，我几乎所有的 JavaScript/jQuery 过去都是这样的：

$(an_element).an_event(function() 
  stuff_i_want_to_do;
)

$(another_element).some_other_event(function() 
  some_other_stuff_i_want_to_do;
)

除了回调，差不多就是这样。

无论如何，我只是浏览了一些其他人的代码，并注意到许多 javascripters 在我不在的情况下变得更漂亮了。这并不复杂，但它是我所见过的更新/更好的 JavaScript 方法的典型：

jQuery -> 
  if $('#products').length
    new ProductsPager()

class ProductsPager
  constructor: (@page = 1) ->
    $(window).scroll(@check)

  check: =>
    if @nearBottom()
      @page++
      $(window).unbind('scroll', @check)
      $.getJSON($('#products').data('json-url'), page: @page, @render)
#

  nearBottom: =>
    $(window).scrollTop() > $(document).height() - $(window).height() - 50

  render: (products) =>
    for product in products
      $('#products').append Mustache.to_html($('#product_template').html(), product)
    $(window).scroll(@check) if products.length > 0

我一直在寻找有关 JavaScript（和/或 CoffeeScript）的现代最佳实践/模式的资源，但运气不佳。所以简而言之，我应该在哪里学习以加快速度：最佳 javascript/coffeescript 现代模式和实践？

【问题讨论】：

jslint

【参考方案1】：

以下是我收集的一些链接：

常规

http://eloquentjavascript.net/

http://jqfundamentals.com/

模式

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

继承

http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-works.html

模块模式

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth http://ajaxian.com/archives/a-javascript-module-pattern http://edspencer.net/2009/10/javascript-module-pattern-overused-dangerous-and-bloody-annoying.html

新关键字

Is JavaScript's "new" keyword considered harmful?http://ejohn.org/blog/simple-class-instantiation

关闭

http://www.bennadel.com/blog/1482-A-Graphical-Explanation-Of-Javascript-Closures-In-A-jQuery-Context.htm

How do JavaScript closures work? http://skilldrick.co.uk/2011/04/closures-explained-with-javascript/

通过引用/值传递

http://snook.ca/archives/javascript/javascript_pass

教 JavaScript

http://concisionandconcinnity.blogspot.com/2010/03/notes-on-teaching-javascript.html

此关键字

http://alebelcor.blogspot.com/2011/07/this-keyword-in-javascript.html http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/

对象字面量

http://blog.rebeccamurphey.com/2009/10/15/using-objects-to-organize-your-code

原型

http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/

【参考方案2】：

如果您需要使用大型 javascript 参考架构的完整实现，请查看：

http://boilerplatejs.org

它是一组模式和一些好的库与现成的示例应用程序的集成。在完成了几个大型 JS 项目后，我写了它来分享我的经验。

【参考方案3】：

JavaScript 资源

Patterns For Large-Scale JavaScript Application Architecture

Essential JavaScript Design Patterns For Beginners, Volume 1.

JavaScript Patterns

jQuery 特定

Tools For jQuery Application Architecture

咖啡脚本

http://coffeescriptcookbook.com/chapters/design_patterns/

【参考方案4】：

我看不出您的旧代码存在问题。或使用较新的代码。基本上，只需遵循与 Ruby 相同的原则：无情地重构，让重构中出现好的架构。

【讨论】：

当代码库越来越大时，问题就出现了。如果你不知道它是什么样子或者什么时候拥有它，那么好的架构就不会出现。如果您看不到基于类的代码与提供的旧代码相比有任何优势，特别是考虑到每个代码在变大时会变得如何以及维护、查找和理解内容有多么困难，那么我们就有问题了/跨度>

我看到了“好”模式的优势，但只有当 JS 代码库超过一定大小时。对于不使用太多 JS 的应用程序，我会使用“坏”模式，直到代码告诉我它想要重构。

另外，我不相信基于类的代码一定适合 JS。我认为很多开发人员在没有真正学习如何使用原生原型 OO 的情况下就涌向 JS 中的“经典”OO。后者有时肯定是有问题的，但在某些情况下它是正确的。

【参考方案5】：

您需要像“JavaScript Patterns”这样的好书，以及像“Fiddle”这样同样好的想法/环境来练习。

【参考方案6】：

我认为阅读常见模式不会帮助您编写真正好的代码。中等好的代码，但不是很好的代码。我会登录 irc.freenode.net 并在 ##javascript 和 #coffeescript 中寻求帮助 - 至少在 #coffeescript 中，有很多人会帮助您改进您在 gist 中输入的代码。

【参考方案7】：

我喜欢CoffeeScript Cookbook。它解释了很多，并包含许多示例。

你可能喜欢第 12 章的设计模式