Question

在过去的几年里，我几乎专注于后端任务，我刚刚注意到大多数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现代模式＆amp;做法？

Answer 1

JavaScript资源

Patterns For Large-Scale JavaScript Application Architecture

Essential JavaScript Design Patterns For Beginners, Volume 1.

JavaScript Patterns

jQuery特定

Tools For jQuery Application Architecture

的CoffeeScript

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

Answer 2

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

常规

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/

Answer 3

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

您可能喜欢第12章“设计模式”

Answer 4

你需要一本像“JavaScript Patterns”这样的好书，伴随着“Fiddle”等同样优秀的思想/环境来练习。

Answer 5

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

Answer 6

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

Answer 7

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

http://boilerplatejs.org

这是一系列模式的集合，并将一些优秀的库与现成的示例应用程序集成在一起。我写这篇文章是为了分享我在完成几个大型JS项目之后的经验。

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

7 个答案:

JavaScript资源

jQuery特定

的CoffeeScript