Arquitectura de plugin de JavaScript para múltiples métodos con los mismos parámetros -- javascript campo con plugin campo con ecmascript-6 camp codereview Relacionados El problema

JavaScript plugin architecture for multiple methods with the same parameters


1
vote

problema

Español

Estoy escribiendo un complemento JavaScript para divertirse. El complemento permite al usuario pasar las opciones para inicializar el complemento y realizar acciones. Es un complemento de alerta / confirmación simple solo por diversión.

Espero recibir ayuda de la arquitectura con un poco de código en el que estoy trabajando. Funciona como está, pero siento que hay una forma mejor o más eficiente de hacer lo que estoy haciendo a continuación. Prenda La sintaxis ideal que usaría el usuario (cuando se utiliza el complemento) iría algo como esto:

  new Bulletin('success', 'a title', 'a description', { duration: 2000 }).notify();   

O:

  new Bulletin('warning', 'a title', 'a description', { duration: 2000 }).ask();   

El plugin tiene 2 partes:

  1. Obtenga algunos parámetros de base (color, título, descripción), así como algunos parámetros opcionales (duración, tamaño, clase, etc.)
  2. Pase lo que se está inicializando de la notificación: notificar ( 9988776655544332 ) o Preguntar ( confirm )

La implementación actual del plugin es esta:

  import Notify from './notify'; import Ask from './ask';  var default = {};  var Bulletin = function(color, message, title, options) {   this.settings = Object.assign(defaults, options);   this.color = color;   this.message = message;   this.title = title;    return this; };  Bulletin.prototype.notify = function() {     Notify(this.color, this.message, this.title, this.settings);  };  Bulletin.prototype.ask = function() {     Ask(this.color, this.message, this.title, this.settings);  };   

pregunta / problema

Como puede ver, el código funciona. Aunque me pregunto si hay una forma mejor y más eficiente de lograr esto.

Poner simple, ¿hay una manera de hacer algo como esto (tal vez ES6 tiene algo?):

  • Usa las propiedades del constructor sin simplemente referenciarlas con this
  • Dependiendo de qué método se llama desde el constructor (es decir, .notify() ), realice una lógica diferente
    • El usuario del complemento podrá llamar a un método 998877665554433776655443377 o 9988776655544338 Mostrará un 99887776665544339 o new Bulletin('warning', 'a title', 'a description', { duration: 2000 }).ask(); 0 (Pregunte por la entrada de usuario) - Piense en JavaScript nativo new Bulletin('warning', 'a title', 'a description', { duration: 2000 }).ask(); 1 y new Bulletin('warning', 'a title', 'a description', { duration: 2000 }).ask(); 2 . Por lo tanto, el código que realiza esas acciones sería diferente. Uno simplemente mostrará un 99887766655443313 y el otro mostraría un 99887766655443314 , pero con los botones para que el usuario seleccione 99887776655443315 o 99887776655443316 . Pero al final del día, compartirían muchas de las mismas opciones. Entonces, lo que estoy tratando de evitar es el código de duplicación que se comparte entre el new Bulletin('warning', 'a title', 'a description', { duration: 2000 }).ask(); 7 99887766555443318 , si es posible.

El código para estas características ( new Bulletin('warning', 'a title', 'a description', { duration: 2000 }).ask(); 9 & AMP; 99887766555443320 ) todavía está escrito. Tal vez debería haber esperado antes de pedir una revisión, pero en realidad lo que soy después, y lo que podría impulsar el resto del desarrollo, es cómo crear una API pública de JavaScript que comparte partes del código "Configuración" (recopilación de parámites, fusionar objetos, etc.), pero luego tiene una lógica separada dependiendo de qué método se llama.

Otra opción es hacer que el uso sea algo así como alert1 , pero luego me gustaría poder realizar cosas como alert2 en las opciones, sin escribir ese código dos veces Para los 2 tipos diferentes ( alert3 y alert4 ).

Mi inspiración (si no ha adivinado ahora) es notie.js si Eso te da una idea de a dónde me dirigí. Eso puede proporcionar una imagen más clara de lo que este código hará con eventualmente.

Original en ingles

I am writing a JavaScript plugin for fun. The plugin allows the user to pass options to initialize the plugin and perform actions. It is a simple alert/confirm plugin just for fun.

I am hoping to receive some architecture help with a little bit of code I am working on. It works as is, but I feel like there is a better or more efficient way of doing what I am doing below. xe2x80x8b The ideal syntax that the user would use (when utilizing the plugin) would go something like this:

new Bulletin('success', 'a title', 'a description', { duration: 2000 }).notify(); 

xe2x80x8b Or:

new Bulletin('warning', 'a title', 'a description', { duration: 2000 }).ask(); 

xe2x80x8b The plugin has 2 parts:

  1. Get a few base parameters (color, title, description) as well as some optional parameters (duration, size, class, etc.)
  2. Pass what type of notification is being initialized: notify (alert) or ask (confirm)

The current plugin implementation is this:

import Notify from './notify'; import Ask from './ask';  var default = {};  var Bulletin = function(color, message, title, options) {   this.settings = Object.assign(defaults, options);   this.color = color;   this.message = message;   this.title = title;    return this; };  Bulletin.prototype.notify = function() {     Notify(this.color, this.message, this.title, this.settings);  };  Bulletin.prototype.ask = function() {     Ask(this.color, this.message, this.title, this.settings);  }; 

Question/Problem

As you can see, the code works. I am wondering if there is a better, more efficient way of achieving this though.

Put simple, is there a way to do something like this (maybe ES6 has something?):

  • Use the constructor's properties without just referencing them with this
  • Depending on which method is called from the constructor (i.e. .notify()), perform different logic
    • The user of the plugin will be able to call either a notify or ask method which will either show an alert or confirm (ask for user input) box - think native JavaScript alert() and confirm(). Therefore, the code that performs those actions would be different. One would simply show a div and the other would show a div but with buttons for the user to select yes or no. But at the end of the day, they would share a lot of the same options. So what I am trying to avoid is duplicating code that is shared between the notify and ask methods, if possible.

The code for these features (notify & ask) is not written yet. I maybe should've waited before asking for a review, but really what I am after, and what will possible drive the rest of the development, is how to create a public JavaScript API that shares parts of "setup" code (gathering params, merging objects, etc.) but then has separate logic depending on which method is called.

Another option is to make the usage something like Bulletin.notify(params), but then I would want to be able to perform things like extend on the options, without writing that code twice for the 2 different types (notify and ask).

My inspiration (if you haven't guessed by now) is notie.js if that gives you an idea of where I'm headed. That may provide a clearer picture of what this code will do eventually.

        
       
       

Lista de respuestas


Relacionados problema

2  Función para filtrar comentarios y calificaciones, con soporte de paginación  ( Function to filter comments and ratings with pagination support ) 
Tengo un componente web que está haciendo una lista de elementos y tengo este método para filtrar estos elementos basados ​​en un objeto 998877666554433320 ...

0  Serialización de datos JSON [cerrada]  ( Json data serialization ) 
cerrado . Esta pregunta necesita detalles o claridad . Actualmente no está aceptando respuestas. ...

8  Árbol fractal orientado a objetos  ( Object oriented fractal tree ) 
Hice un árbol fractal orientado a objetos en JavaScript utilizando la biblioteca P5, consta de tres archivos: fraternal tree.js sucursal.js flower.js ...

6  Vanilla ES6 TODO / LISTA DE TAREA CON LOCALSTORAGE  ( Vanilla es6 todo task list with localstorage ) 
Estoy haciendo una aplicación simple de lista de TODO con ES6. Estoy buscando algunos comentarios sobre el código, siento que hay alguna mejora posible. Tal v...

3  Comprobando si los paréntesis están equilibrados  ( Checking if parentheses are balanced ) 
Este script comprueba si los paréntesis están equilibrados. Me pregunto si hay algo que puede mejorarse aquí, incluyendo las características ES6. function ...

10  "Stardust" Simulador 2D Gravity - Seguimiento 1: Los planetas  ( Stardust 2d gravity simulator follow up 1 the planets ) 
Este es un seguimiento para el juego de gravedad del simulador 2D pregunta. Desde entonces, he desarrollado mis habilidades de JavaScript, y ahora esto...

7  Función recursiva para obtener propiedades únicas  ( Recursive function to get unique properties ) 
Solo quería compartir mi código JavaScript recién creado. Este código es responsable de pasar solo los elementos únicos para una matriz dada. Este es bastante...

7  Aplicar acción arbitraria durante la función de generador recursivo  ( Apply arbitrary action during recursive generator function ) 
Tengo esta función de generador recursivo. Traerá un objeto en busca de "hojas", cualquier tecla que no apunte a sub-objetos. Luego aplica una de las dos ac...

13  Servidor de chat básico y cliente usando WebSocket  ( Basic chat server and client using websocket ) 
Basado en nodo.js en acción (Publicaciones de Manning) Capítulo 2 "Construyendo una aplicación de chat de múltiples habitaciones" , he tomado el modelo que...

1  Iterador de secuencia numérico bidireccional (punto flotante)  ( Bidirectional numeric floating point sequence iterator ) 
Quería un iterador limpio que siempre me dará una secuencia limpia de step Números espaciados. Esto es lo que acompañé, pero soy un poco escéptico que cubrí...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos