Módulo de refactor para llamadas al servicio de imagen interna -- javascript campo con functional-programming campo con url camp codereview Relacionados El problema

Refactor module for calls to internal image service


6
vote

problema

Español

Buscando ayuda Refactorización del siguiente código para seguir un paradigma de programación funcional.

La primera función construye un objeto de configuración con la configuración predeterminada y los ajustes predeterminados opcionales, mientras que el 99887776655544331 ensamblará una URL para el servicio de imagen.

getSizedUrl2 y getSizedSkuUrl3 devuelve una URL que se usará para una etiqueta de imagen.

  var imgSvcPath = './imageSizer.svc';      /**  * configureImg  * Build a configurtion object with sane defaults applied that can be used to construct a url for the ImageResizer service  */ function configureImg( options ){     options = options || {};      var defaults = {             type: null,             src: '',             width: 120,             height: null         },         // use Image presets if an option.type provided         presets = options.type ? Images.getPresets( options.type ) : {};      return $.extend( defaults, options, presets ); };  /**  * buildResourcePath  * Construct a url for the ImageResize service to be used for the src of <img />  */  function buildResourcePath( svcName, options ){     // imageSizer.svc/GetResizedImage?path=[path]&size=[size]&quality=[quality]     var resourcePath = [],         conf = configureImg( options ),         src = ( conf.skuId !== undefined )             ? '?sku=' + conf.skuId             : '?path=' + encodeURI( conf.src ),         size = '&size=' + ( conf.height ? 'h|' + conf.height : 'w|' + conf.width ),         quality = conf.quality ? '&quality=' + conf.quality : '';      resourcePath.push( imgSvcPath, svcName, src, size, quality );     return resourcePath.join( '' ); };  /**  * getSizedUrl  * return src of <img /> for GetResizedImage  */ var getSizedUrl = function( options ){     if( 'undefined' === typeof options.src ) {         console.error( 'upi.Services.Image::getSizedUrl configuration options must provide an image src string' );     }      return buildResourcePath( 'GetResizedImage', options ); };  /**  * getSizedSkuUrl  * return src for an <img /> for GetResizedSkuImage  */ var getSizedUrlForSku = function( skuId, options ){     if( 'undefined' === typeof skuId ) {         console.error( 'upi.Services.Image::getSizedSkuUrl configuration options must provide sku ID' );     }      options = options || {};     options[ 'skuId' ] = skuId;     return buildResourcePath( 'GetResizedSkuImage', options ); };   Image = {     getSizedUrlForSku: getSizedUrlForSku,     getSizedUrl: getSizedUrl };   
Original en ingles

Looking for help refactoring the following code to follow a Functional Programming paradigm.

The first function builds a configuration object with default settings and optional presets, while the buildResourcePath will assemble a URL for the image service.

getSizedUrl and getSizedSkuUrl returns a URL that will be used for an image tag.

var imgSvcPath = './imageSizer.svc';      /**  * configureImg  * Build a configurtion object with sane defaults applied that can be used to construct a url for the ImageResizer service  */ function configureImg( options ){     options = options || {};      var defaults = {             type: null,             src: '',             width: 120,             height: null         },         // use Image presets if an option.type provided         presets = options.type ? Images.getPresets( options.type ) : {};      return $.extend( defaults, options, presets ); };  /**  * buildResourcePath  * Construct a url for the ImageResize service to be used for the src of <img />  */  function buildResourcePath( svcName, options ){     // imageSizer.svc/GetResizedImage?path=[path]&size=[size]&quality=[quality]     var resourcePath = [],         conf = configureImg( options ),         src = ( conf.skuId !== undefined )             ? '?sku=' + conf.skuId             : '?path=' + encodeURI( conf.src ),         size = '&size=' + ( conf.height ? 'h|' + conf.height : 'w|' + conf.width ),         quality = conf.quality ? '&quality=' + conf.quality : '';      resourcePath.push( imgSvcPath, svcName, src, size, quality );     return resourcePath.join( '' ); };  /**  * getSizedUrl  * return src of <img /> for GetResizedImage  */ var getSizedUrl = function( options ){     if( 'undefined' === typeof options.src ) {         console.error( 'upi.Services.Image::getSizedUrl configuration options must provide an image src string' );     }      return buildResourcePath( 'GetResizedImage', options ); };  /**  * getSizedSkuUrl  * return src for an <img /> for GetResizedSkuImage  */ var getSizedUrlForSku = function( skuId, options ){     if( 'undefined' === typeof skuId ) {         console.error( 'upi.Services.Image::getSizedSkuUrl configuration options must provide sku ID' );     }      options = options || {};     options[ 'skuId' ] = skuId;     return buildResourcePath( 'GetResizedSkuImage', options ); };   Image = {     getSizedUrlForSku: getSizedUrlForSku,     getSizedUrl: getSizedUrl }; 
        

Lista de respuestas

5
 
vote
  00  
 
// Store everything in a scope. It's to preven you from polluting the global // scope as well as protect your code from collisions. ;(function(ns) {    // Pulling out constants into this scope. They only need to be declared once.   var imgSvcPath = './imageSizer.svc';   var defaults = {     type: null,     src: '',     width: 120,     height: null   };    function configureImg(options) {     var options = options || {};     var presets = options.type ? Images.getPresets(options.type) : {};      // It's best if you extend to a blank object. Don't override the defaults.     return $.extend({}, defaults, options, presets);   }    function buildResourcePath(svcName, options) {      var conf = configureImg(options);      // I assume you use jQuery because of $.extend so I introduce $.param     // which takes a map and converts it into a serialized parameter list      var params = {};      // And ternaries can be very messy and unreadable. Now using if-else instead.     if (conf.skuId !== undefined) params.sku = conf.skuId;     else params.path = conf.src;      if (conf.height) params.size = 'h|' + conf.height;     else params.size = 'w|' + conf.width;      if (conf.quality) params.quality = conf.quality;      return imgSvcPath + '?' + $.param(params);   }    // Let's append our API to the namespace    ns.getSizedUrl = function(options) {     if ('undefined' === typeof options.src) {       console.error('upi.Services.Image::getSizedUrl configuration options must provide an image src string')     }     return buildResourcePath('GetResizedImage', options)   };    ns.getSizedUrlForSku = function(skuId, options) {     if ('undefined' === typeof skuId) {       console.error('upi.Services.Image::getSizedSkuUrl configuration options must provide sku ID')     }     options = options || {};     options['skuId'] = skuId;     return buildResourcePath('GetResizedSkuImage', options)   };    // Change your namespace to something else. Image is already taken.   // Image is the constructor for making image elements with JS. }(this.MyImage = this.MyImage || {})) 
 
 
4
 
vote

La inmutabilidad es una de las piedras angulares de la programación funcional.

01 Muta su argumento y, por lo tanto, viola la inmutabilidad. Es mejor hacer una copia de 02 aquí.

  03  
 

Immutability is one of the cornerstones of functional programming.

getSizedUrlForSku mutates it's argument and hence violates immutability. It's better to make a copy of options here.

var getSizedUrlForSku = function( skuId, options ){     // ...     optionsCopy = $.extend( {skuId: skuId}, options )     return buildResourcePath( 'GetResizedSkuImage', optionsCopy ); }; 
 
 

Relacionados problema

9  Serializando los datos de JSON provenientes de dos URL en el mismo objeto  ( Serializing json data coming from two urls in the same object ) 
Tengo dos URL ( urlA y urlB ) y la URL me devuelve una respuesta JSON en el mismo formato JSON. A continuación se muestra mi cadena JSON a la que me estoy v...

14  Pista de ruta de solicitud HTTP  ( Http request path parser ) 
He escrito un método para tokenizar las rutas de solicitud HTTP, como /employee/23/edit : protected void compile(String path){ int mark=0; for(int...

3  Creando y analizando cadenas de consulta  ( Creating and parsing query strings ) 
En un momento de aburrimiento, decidí escribir dos métodos, uno de los cuales crearía una cadena de consulta, mientras que el otro lo analizaría, la restricci...

7  URLS de canónico para el sitio web estático  ( Canonicalize urls for static website ) 
Quiero las URLs "Canonicalize" para mi sitio web estático (archivos y carpetas). Los 'objetivos' describe lo que quiero lograr. El 'Código' le da a mi actua...

2  Lea el archivo con URL para conectarse a ellos, buscar patrones y generar salida en envase multi-enhebrado  ( Read file with urls to connect to them search for patterns and generate output ) 
He estado implementando una pequeña aplicación que leerá un archivo de texto que mantiene las direcciones de URL (una dirección por línea). Ejemplo: http...

3  Análisis de la consulta de URL y adjuntándola al final de la otra URL  ( Parsing url query and appending it at end of the other url ) 
Estoy tratando de agarrar la consulta de la URL de la URL que está en la barra de direcciones del navegador, luego agregarlo al final de la otra URL y hacerlo...

1  Un analizador URI (completo) para Python  ( A comprehensive uri parser for python ) 
Para un desafío de código, estoy tratando de escribir un analizador de URI completo en Python que maneja ambos URIS con public class RingBuffer{ private ...

3  Configuración de un convertidor de divisas para obtener feeds de tipo de cambio para varias monedas  ( Configuring a currency converter to get exchange rate feeds for for multiple cur ) 
Estoy tratando de hacer que mi función sea más versátil al eliminar los datos codificados duros. function get_currency_rate($currencySource) { if (isset($...

9  Dividir la cadena de consulta de URL a pares de valor clave  ( Splitting url query string to key value pairs ) 
Tengo una cadena de consulta de URL "key={value}&key2={value2}&key3={value3}" y tiene que producir un par de valores clave de la cadena dividiendo & y ex...

3  Mostrando el dominio de una URL  ( Showing the domain of a url ) 
Tengo un método de este tipo que toma una URL, como http://twitter.com/ttt o Twitter.com/DASD, y debe mostrar su dominio con http: http://twitter.com y no...




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