¿La mejor manera de abstraer una biblioteca de JavaScript?

¿Cuál sería la mejor manera de abstraer cualquier marco de JavaScript dado (jQuery, MooTools, etc.), que se encuentra en la parte inferior de la pila de marcos? Esencialmente, me gustaría tener una situación en la que podría cambiar la biblioteca, hacer cambios solo en una capa del marco (no en todos los módulos, por ejemplo), y todo podría volver a funcionar.¿La mejor manera de abstraer una biblioteca de JavaScript?

Por lo tanto, cada módulo debe llamar a una función de marco (s), que luego se enrutará a la biblioteca.

Fuente

2010-09-14 crappish

Parece que su biblioteca va a ser muy grande – epascarello

Es posible que desee utilizar algo como el Adapter Pattern. Cree su propia interfaz, exponga los métodos que va a utilizar en su aplicación y luego cree un adaptador para cada kit de herramientas que le gustaría admitir (jQuery, MooTools, YUI, etc.). Su propia interfaz luego enrutará las llamadas a los métodos a los adaptadores específicos.

Si tuviera que admitir un nuevo kit de herramientas, todo lo que tendría que hacer es escribir un nuevo adaptador que traduzca los métodos de su propia interfaz a los métodos del conjunto de herramientas específico.

Esto es algo que Ext JS hace actualmente. Puede elegir qué adaptador usar (jQuery, YUI, etc.) detrás de las llamadas a métodos del marco. Por ejemplo: Ext.getCmp() usaría jQuery.$() al usar el adaptador jQuery. Sin embargo, a menudo no es un mapeo uno a uno muy fácil.

Ext JS comenzó su vida como una extensión de la biblioteca de Yahoo UI javascript. En ese momento, Ext confió en YUI para todos sus códigos de navegador de bajo nivel. Ahora que Ext es una biblioteca de JavaScript independiente, tiene la opción de sustituir YUI por otras bibliotecas de JavaScript como Prototype o jQuery. Los archivos fuente que mapean la API Ext de bajo nivel alrededor de otras bibliotecas JavaScript (o la biblioteca base propia de Ext) se conocen como adaptadores y viven en el subdirectorio fuente/adaptador. Cuando incluye Ext en su sitio web, elige qué adaptador desea usar.

Desde: Ext JS Manual: Source Overview

Fuente

2010-09-14 11:19:52

¿Cómo funcionaría esto realmente? Dado que los marcos tienen un conjunto diferente de métodos y habilidades, ¿cómo escribirías un súper conjunto de métodos que abarca todo? Parece que tendrías que llenar los vacíos, cada característica que tiene una biblioteca y otra que no ... deberías agregar la funcionalidad donde falta. –

@Nick: Sí, tienes razón. No digo que sea fácil ... Sin embargo, es lo que hace ExtJS. Requiere que elija un adaptador. Originalmente era compatible con YUI, jQuery, Prototype IIRC, pero luego también implementaron su propio adaptador. Lo bueno es que si estuviera usando su propio adaptador, pero luego quisiera usar algo que dependa de jQuery, podría simplemente cambiar el adaptador. Muy limpio, pero definitivamente no es fácil de implementar. –

+1 Daniel simplemente me ganó;) – BGerrissen

Esto estaría escribiendo una biblioteca para ... bibliotecas, si le preocupa el rendimiento en absoluto (y ¿por qué no sería?) Debería elegir una ruta diferente. Otra capa de abstracción en la parte superior de las bibliotecas con muy diferentes enfoques (especialmente cuando se entra en utilidades, animaciones, etc.) sería muy, muy ineficaz y consume mucho tiempo.

No es broma, le tomaría menos tiempo para portar su código varias veces, incluso en cualquier proyecto de tamaño decente antes de construir (o más importante, mantener) una capa de abstracción de biblioteca como esta.

Fuente

2010-09-14 11:18:16

@nick, hay una gran diferencia entre toolkits/libraries y frameworks. Los marcos se construyen sobre los kits de herramientas y las bibliotecas. jQuery y Prototype no son nada más que kits de herramientas, Dojo, Yui y son casi frameworks y ExtJS definitivamente se puede llamar un framework. – BGerrissen

@BGerrissen - Depende de su definición, supongo, con jQuery + jQuery UI añadida, ¿cómo se llama a eso un conjunto de herramientas y YUI un marco? Creo que es un área gris en el mejor de los casos, en realidad es una cuestión de core vs plugins y donde el peso es IMO. –

De hecho, estoy preocupado por el rendimiento, ya que la mayor parte de esto se ejecutará en dispositivos móviles. Sin embargo, estoy pensando en almacenar en caché las solicitudes de la biblioteca, de modo que el marco pueda tener referencias directas a las funciones dentro de la biblioteca, de modo que la solicitud no tenga que viajar cada vez, a través de cada capa. – crappish

esto puede haber sido una idea razonable si los marcos tenían una funcionalidad equivalente. Lamentablemente no lo hacen; hacen cosas diferentes, y lo hacen de manera diferente. Hay un cruce entre ellos, pero su envoltorio se perdería mucho porque solo podría hacer las cosas que estaban en ambos. Terminas con el mínimo común denominador; lo peor de ambos mundos.

Mi consejo es tomarse el tiempo para aprender ambas bibliotecas: MooTools y JQuery son dos bibliotecas muy buenas, y es bueno conocerlas. Incluso si solo usa uno de ellos en su proyecto, al menos podrá tomar una decisión informada antes de comenzar.

Fuente

2010-09-14 11:26:02 Spudley

Esto NO es verdad. Hay varias maneras de 'llenar los vacíos' que cualquiera de ellos puede tener. En un punto puede aplicar la interfaz de una extensión patentada, en otro punto la base: la biblioteca puede tener eso cubierto. Esto es sólo un ejemplo. Al final, el acoplamiento causa todo tipo de dolores de cabeza que no desea tratar. – Cody

Tendrá que escribir adaptadores para cada kit de herramientas/biblioteca que desee usar para su marco, como lo hizo ExtJS/Sencha (aunque probablemente los de ellos no sean reutilizables).

Comience mapeando qué métodos debe tener su adaptador, actuará como su API de bajo nivel de frameworks.

El siguiente paso es escribir un adaptador para cada kit de herramientas/biblioteca posible. Algunas bibliotecas serán difíciles de escribir adaptadores para YUI como, ya que cargan el código de forma dinámica. Es posible que primero tenga que compilar un único archivo .js con la funcionalidad necesaria.

Agregue un nuevo kit de herramientas/biblioteca, escriba un nuevo adaptador según su asignación.

Fuente

2010-09-14 11:29:38 BGerrissen

¿La mejor manera de abstraer una biblioteca de JavaScript?

Respuesta

Cuestiones relacionadas