{"id":3547,"date":"2017-11-24T14:08:03","date_gmt":"2017-11-24T14:08:03","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2017\/11\/24\/patrones-de-diseno-en-javascript-singleton-factory\/"},"modified":"2024-04-06T01:47:21","modified_gmt":"2024-04-06T07:47:21","slug":"patrones-de-diseno-en-javascript-singleton-factory","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/patrones-de-diseno-en-javascript-singleton-factory\/","title":{"rendered":"Patrones de dise\u00f1o en Javascript, Singleton y Factory"},"content":{"rendered":"<h2 class=\"wp-block-heading\" id=\"quesunpatrndediseo\">\u00bfQu\u00e9 es un patr\u00f3n de dise\u00f1o?<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Cada patr\u00f3n describe un problema que ocurre una y otra vez en nuestro entorno, y luego describe el n\u00facleo de la soluci\u00f3n a ese problema, de tal manera que puedes utilizar esta soluci\u00f3n millones de veces, sin nunca hacerlo de la misma forma dos veces.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Arquitecto Christopher Alexander<\/strong><\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<p>La definici\u00f3n del patr\u00f3n de dise\u00f1o no viene del desarrollo de software, sino de la arquitectura del habitat humano.<\/p>\n\n\n\n<p>Tanto la arquitectura del h\u00e1bitat humano como el desarrollo de software tienen muchas similitudes, esto es porque como seres humanos somos parte del mundo y de la naturaleza. Por lo tanto el desarrollo de software busca siempre representar el mundo real,&nbsp; de hecho la programaci\u00f3n de cualquier aplicaci\u00f3n siempre se usa para solucionar problemas reales de nuestro entorno.<\/p>\n\n\n\n<p>Entonces podemos comprender que un patr\u00f3n de dise\u00f1o permite ofrecer una soluci\u00f3n a problemas comunes en el dise\u00f1o de software, describe la soluci\u00f3n a problemas que se repiten muchas veces y que son muy similares entre ellos, en concreto, esta similitud permite dise\u00f1ar una soluci\u00f3n para un conjunto de problemas parecidos.<\/p>\n\n\n\n<p>Los patrones de dise\u00f1o actuales fueron popularizados por el libro <strong>Design patterns: elements of reusable object-oriented software<\/strong>de los autores conocidos como <strong>GoF<\/strong>(Gang of Four):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Erich Gamma<\/li>\n\n\n\n<li>Richard Helm<\/li>\n\n\n\n<li>Ralph Johnson<\/li>\n\n\n\n<li>John Vlissides<\/li>\n<\/ul>\n\n\n\n<p>En este libro se describen 23 patrones de dise\u00f1o que desde 1995 hasta nuestros d\u00edas siguen en uso con un gran impacto en el desarrollo de software. Esto no quiere decir que estos patrones no fueron utilizados mucho antes de la publicaci\u00f3n del libro.<\/p>\n\n\n\n<p>Este art\u00edculo ser\u00e1 el primero de una serie, que nos permitir\u00e1 entender como se pueden implementar muchos de estos patrones de dise\u00f1o en el lenguaje de programaci\u00f3n Javascript y no solo los descritos por GoF, tambi\u00e9n se explicara otros patrones de dise\u00f1o \u00fatiles en Javascript.<\/p>\n\n\n\n<p>El primer patr\u00f3n de dise\u00f1o es el Patron Singleton.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"patrnsingleton\">Patr\u00f3n Singleton<\/h2>\n\n\n\n<p>Este patr\u00f3n nos permite tener una solo instancia de un tipo de objeto, porque no es necesario crear varias instancias nuevas cuando una solo instancia puede encargarse del mismo trabajo en toda la aplicaci\u00f3n. Al solo tener una instancia, centralizamos la informaci\u00f3n, funcionalidad y mejoramos el rendimiento disminuyendo el uso de memoria.<\/p>\n\n\n\n<p>En Javascript es muy f\u00e1cil utilizar este patr\u00f3n, tan f\u00e1cil como crear un objeto literal, por ejemplo supongamos que tenemos una configuraci\u00f3n para el n\u00famero de caracteres y palabras que se muestran en un sitio web optimizado para buscadores:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"let configSEO = {    nombre: 'Pensemosweb',    seo: {      descripcion: {        limiteCaracteres: 155,        limitePalabras: 23      },      titulo: {        limiteCaracteres: 70,        limitePalabras: 9      }    }};\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C792EA\">let<\/span><span style=\"color: #BABED8\"> configSEO <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">name<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Pensemosweb<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #F07178\">seo<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #F07178\">descripcion<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #F07178\">limiteCaracteres<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">155<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #F07178\">limitePalabras<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">23<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #F07178\">titulo<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #F07178\">limiteCaracteres<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">70<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #F07178\">limitePalabras<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">9<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Un simple objeto de configuraci\u00f3n es un singleton, pues en toda la app se va a hacer referencia al objeto <code>configSEO<\/code> y nunca se va a crear m\u00e1s nuevos objetos porque se puede extender esa configuraci\u00f3n a\u00f1adiendo m\u00e1s propiedades.<\/p>\n\n\n\n<p>Ahora supongamos que necesitamos utilizar objeto donde existan funciones de configuraci\u00f3n y m\u00e9todos, adem\u00e1s de una interfaz para obtener la instancia, tomando el mismo ejemplo de <code>configSEO<\/code> ahora vamos a utilizar funciones anidadas y closure (o cierres), esto ultimo permite a una funci\u00f3n tener acceso a las funciones y variables definidas en el \u00e1mbito en que esta funci\u00f3n tambi\u00e9n es definida.<\/p>\n\n\n\n<p><iframe title=\"Singleton complejo\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/MEQNqm\/?height=265&amp;theme-id=0&amp;default-tab=js,result&amp;embed-version=2#full\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">Singleton complejoby Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/><\/iframe><\/p>\n\n\n\n<p>La funci\u00f3n an\u00f3nima principal se invoca inmediatamente con la notacion <code>(function() {}())<\/code> y recibe un par\u00e1metro <code>el<\/code>, el cual guarda la referencia al elemento del DOM con id resultado. Este par\u00e1metro se lo pasamos a la funci\u00f3n inmediata a trav\u00e9s de la variable global <code>elem<\/code>.<\/p>\n\n\n\n<p>Debido a que definimos <code>instancia<\/code> dentro de la funci\u00f3n principal, las funciones anidadas definidas m\u00e1s adelante tienen acceso a esa variable instancia que guardara nuestro singleton cuando invoquemos la funci\u00f3n <code>configSEO()<\/code>.<\/p>\n\n\n\n<p>Adem\u00e1s <code>metodoPublico()<\/code>and <code>privada()<\/code> tienen acceso a las variables <code>instancia<\/code> and <code>el<\/code>.<\/p>\n\n\n\n<p>Si nos fijamos en la l\u00ednea 48, <code>elem.append(conf1 === conf2)<\/code>, comparamos igualdad de referencia, <code>conf1<\/code>and <code>conf2<\/code>son el mismo objeto, como singleton, solo trabajamos con una instancia.<\/p>\n\n\n\n<p>Tambi\u00e9n podemos hacer uso de otro patr\u00f3n de dise\u00f1o llamado <strong>factory<\/strong>, el cual veremos m\u00e1s a detalle en otro post, por el momento solo ten en cuenta que tendremos una funci\u00f3n que fabricara singletons.<\/p>\n\n\n\n<p><iframe title=\"Factory de singletons\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/QqQeYK\/?height=265&amp;theme-id=0&amp;default-tab=js,result&amp;embed-version=2#full\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/QqQeYK\/\">Factory de singletons<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/><\/iframe><\/p>\n\n\n\n<p>Podemos notar que con una sola funci\u00f3n, podemos acceder a los singletons creados anteriormente y podemos agregar m\u00e1s si queremos. Este tipo de patr\u00f3n <strong>factory de singletons <\/strong>es muy utilizado en frameworks como AngularJS. Aqu\u00ed abajo un ejemplo del singleton configSEO y el factor y usando AngularJS.<\/p>\n\n\n\n<p><iframe title=\"Singleton factory angular\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/BwrQWz\/?height=265&amp;theme-id=0&amp;default-tab=js,result&amp;embed-version=2#full\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/BwrQWz\/\">Singleton factory angular<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>        Cada patr\u00f3n describe un problema que ocurre una y otra vez en nuestro entorno, y luego describe el n\u00facleo de la soluci\u00f3n a ese problema, de tal manera que puedes utilizar esta soluci\u00f3n millones de veces, sin nunca hacerlo de la misma forma dos veces.<\/p>","protected":false},"author":2,"featured_media":3763,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28,33],"tags":[54,68],"class_list":["post-3547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-intermedio","tag-javascript","tag-intermedio"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3547"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3547\/revisions"}],"predecessor-version":[{"id":3846,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3547\/revisions\/3846"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3763"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}