usando $ .extend () para agregar más casos a una función de instrucción de cambio en jQuery?

Question

Tengo una función llamada parseData para representar la presentación html de los datos json devueltos en el archivo js principal.

var data = {
  "title": "This is news"
};


$("button").click(function(){
    var feedformat = $(this).data('format');
    item_html = parseData(feedformat, data);
    $('.feedback').append(item_html);
});    

function parseData(type, data) {
   var item_html = ''; 
   switch(type) { 
       case 'story':
       item_html = '<h5>'+data.title+'</h5>';
       break;
  }
    return item_html; 
}

Mi pregunta es, ¿es posible usar $.extend para agregar más casos desde otro archivo de script que se extrae dinámicamente al hacer clic usando getscript? Supongamos que tengo un nuevo caso llamado oldnews. Ese caso contiene muchas etiquetas html, pero no se usará con frecuencia, por lo que no quiero almacenarlo en el archivo js principal y me gustaría incluirlo solo cuando la gente lo quiera. ¿Puedo usar algo como lo siguiente en otro archivo de script para extender parseData que está en el archivo js principal?

(function($){
    var addcase = $.fn.parseData;
    $.fn.addcase = function( type,data ) {
            case 'oldnews':
       item_html = '<div>'+data.title+',but outdated</div>';
      break;

   };
}(jQuery));

javascript jquery html

0

RedGiant 4 sep. 2014 a las 00:41

Answer 1

Esto suena bastante fácil, en realidad. Lo que realmente está intentando hacer es asignar los nombres de los formatos de datos a las funciones que producen la salida HTML. Podrías codificar fácilmente lo que ya has demostrado aquí con esto:

var parseFunctions = {

    story: function(data) {
        return '<h5>' + data.title + '</h5>';
    },

    oldnews: function(data) {
        return '<div>' + data.title + ', but outdated</div>';
    }

}

Cuando llegue el momento de generar algunos html, puede hacer esto:

$("button").click(function(){
    var format = $(this).data('format');
    if (typeof parseFunctions[format] == 'function')
        $('.feedback').append( parseFunctions[format](data) );
});

Esto funciona porque Javascript trata las funciones como cualquier otro valor. Puede asignarlos a variables, copiarlos, etc. Con esta técnica puede extender el objeto base parseFunctions con otro objeto que contenga funciones. Lo principal que debe tener en cuenta es la colisión clave. (Dos personas que intentan definir una función para el tipo de datos 'some_type'.)

1

slashingweapon 3 sep. 2014 a las 21:21

Answer 2

En lugar de declaraciones de cambio / caso, podría hacer algo más extensible como recorrer un contenedor de calificadores de elementos de noticias y sus datos asociados. En JSON esto podría verse así:

{
  "story": {
    "html": "<h5>%s<\/h5>"
  },
  "oldnews": {
    "html": "<div>%s, but outdated<\/div>"
  }
}

Si tiene un objeto de JavaScript como ese, lo hace visible para parseData, que obtiene el valor "html" de cualquiera que coincida con "tipo" y reemplaza "% s" con el título. Cada vez que aparecen nuevos "casos", utiliza _.extend o $ .extend para agregar a la estructura.

1

Lucas Ross 3 sep. 2014 a las 21:20

usando $ .extend () para agregar más casos a una función de instrucción de cambio en jQuery?

2 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript