practicas - Mis patrones/prácticas de JavaScript apestan. ¿Dónde debo buscar ayuda?

pattern en javascript

Question

He estado trabajando casi exclusivamente en tareas de back-end durante los últimos años, y me he dado cuenta de que la mayoría de los proyectos de JavaScript (y de CoffeeScript) tienen mucho más belleza en mi ausencia.

Trabajo principalmente en un entorno de rieles, y casi todo mi JavaScript / jQuery solía tener este aspecto:

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

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

Dejando de lado las devoluciones de llamada, eso es todo.

De todos modos, solo estaba navegando a través del código de otras personas y noté que muchos javascripters se han vuelto mucho más bonitos en mi ausencia. Esto no es complejo, pero es típico del enfoque nuevo / mejor de JavaScript que he estado viendo:

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

He estado buscando recursos sobre las mejores prácticas / patrones modernos para JavaScript (y / o CoffeeScript), pero no he tenido mucha suerte. Así que, en resumen, ¿dónde debo buscar la actualización: los mejores patrones y prácticas modernas de javascript / coffeescript?

Answer 1

Recursos de JavaScript

Patrones para la arquitectura de aplicaciones de JavaScript a gran escala

Patrones esenciales de diseño de JavaScript para principiantes, volumen 1.

Patrones de JavaScript

jQuery especifico

Herramientas para la arquitectura de aplicaciones jQuery

CoffeeScript

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

Answer 2

Aquí hay algunos enlaces que he recogido:

General

http://eloquentjavascript.net/

http://jqfundamentals.com/

Patrones

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

Herencia

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

Patrón de módulo

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

Nueva palabra clave

¿Es la nueva palabra clave de JavaScript considerada dañina? http://ejohn.org/blog/simple-class-instantiation

Cierres

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

¿Cómo funcionan los cierres de JavaScript? http://skilldrick.co.uk/2011/04/closures-explained-with-javascript/

Pase por referencia / valor

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

Enseñanza de JavaScript

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

Esta palabra clave

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

Objeto Literal

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

Prototipo

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

Answer 3

Me gusta el libro de cocina CoffeeScript . Se explica mucho y contiene muchos ejemplos.

Probablemente te guste el capítulo 12 llamado Patrones de diseño.

Answer 4

Necesita un buen libro como " Patrones de JavaScript " acompañado de un id / ambiente igualmente bueno como " Fiddle " para practicar.

Answer 5

No creo que leer sobre patrones comunes te ayude a escribir código realmente bueno. Código moderadamente bueno, pero no código realmente bueno. Inicia sesión en irc.freenode.net y pregunto en ## javascript y #coffeescript para obtener ayuda; al menos en #coffeescript, hay muchas personas que lo ayudarán a mejorar el código que usted gist .

Answer 6

No veo el problema con tu código anterior. O con el código más nuevo. Básicamente, simplemente siga los mismos principios que seguiría con Ruby: refactorice sin piedad y deje que emerja una buena arquitectura de la refactorización.

Answer 7

Si necesita jugar con una implementación completa de una arquitectura de referencia de javascript a gran escala, eche un vistazo a:

http://boilerplatejs.org

Es una colección de patrones e integración de algunas bibliotecas buenas con la aplicación de ejemplo de readymade para comenzar. Lo escribí para compartir mi experiencia después de trabajar en un par de grandes proyectos de JS.