{"id":95655,"date":"2022-09-14T17:56:29","date_gmt":"2022-09-14T15:56:29","guid":{"rendered":"https:\/\/rmarketingdigital.com\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/"},"modified":"2020-12-05T20:35:25","modified_gmt":"2020-12-05T23:35:25","slug":"escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/","title":{"rendered":"R\u00e9daction d&#039;un framework JavaScript - \u00c9valuation du code Sandbox"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#El-mal-usado-eval\" >El mal usado eval<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#El-camino-comun\" >El camino comun<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#Una-forma-alternativa\" >Una forma alternativa<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#new-Function\" >new Function()<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#La-palabra-clave-%E2%80%98with\" >La palabra clave \u2018with\u2019<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#Proxies-ES6\" >Proxies ES6<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#Evaluacion-de-codigo-en-la-sandbox-declaracion-%E2%80%98with-y-proxies\" >Evaluaci\u00f3n de c\u00f3digo en la sandbox: declaraci\u00f3n \u2018with\u2019 y proxies<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#Symbolunscopables\" >Symbol.unscopables<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#WeakMaps-para-el-almacenamiento-en-cache\" >WeakMaps para el almacenamiento en cach\u00e9<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div itemprop=\"articleBody\">\n<p>En este cap\u00edtulo, explicar\u00e9 las diferentes formas de evaluar el c\u00f3digo en el navegador y los problemas que causan. Tambi\u00e9n introducir\u00e9 un m\u00e9todo, que se basa en algunas caracter\u00edsticas nuevas o menos conocidas de JavaScript.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"El-mal-usado-eval\"><\/span>El mal usado eval<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La\u00a0funci\u00f3n <strong>eval()<\/strong> eval\u00faa el c\u00f3digo JavaScript representado como una cadena.<\/p>\n<p>Una soluci\u00f3n com\u00fan para la evaluaci\u00f3n del c\u00f3digo es la <strong>funci\u00f3n eval()<\/strong>. El c\u00f3digo evaluado con <strong>eval()<\/strong> tiene acceso a cierres y al alcance global, lo que conduce a un problema de seguridad denominado inyecci\u00f3n de c\u00f3digo; y hace que <strong>eval()<\/strong> sea una de las caracter\u00edsticas m\u00e1s notorias de JavaScript.<\/p>\n<p>A pesar de ser mal visto, <strong>eval()<\/strong> es muy \u00fatil en algunas situaciones. La mayor\u00eda de los marcos <em>front-end<\/em> modernos requieren su funcionalidad, pero no se atreven a usarlos debido al problema que mencionamos anteriormente. Como resultado, surgieron muchas soluciones alternativas para evaluar cadenas en una <em>caja de arena<\/em> en lugar del alcance global. El <strong>sandbox<\/strong> evita que el c\u00f3digo acceda a datos seguros. Por lo general, es un objeto de JavaScript simple, que reemplaza el objeto global para el c\u00f3digo evaluado.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"El-camino-comun\"><\/span>El camino comun<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La alternativa a\u00a0<strong>eval()<\/strong> m\u00e1s com\u00fan es la reimplementaci\u00f3n completa: un proceso de dos pasos, que consiste en analizar e interpretar la cadena pasada. Primero, el analizador crea un \u00e1rbol de sintaxis abstracta, luego el int\u00e9rprete recorre el \u00e1rbol y lo interpreta como un c\u00f3digo dentro de una sandbox (caja de arena).<\/p>\n<p>Esta es una soluci\u00f3n muy utilizada, pero podr\u00eda decirse que es demasiado pesada para algo tan simple. Reescribir todo desde cero en lugar de aplicar parches <strong>eval()<\/strong> presenta muchas oportunidades de errores y requiere modificaciones frecuentes para seguir incluso las \u00faltimas actualizaciones de idiomas.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Una-forma-alternativa\"><\/span>Una forma alternativa<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>NX intenta evitar la reimplementaci\u00f3n de c\u00f3digo nativo. La evaluaci\u00f3n es manejada por una peque\u00f1a biblioteca que usa algunas caracter\u00edsticas nuevas o menos conocidas de JavaScript.<\/p>\n<p>Esta secci\u00f3n introducir\u00e1 progresivamente estas caracter\u00edsticas y las utilizar\u00e1 para explicar la biblioteca de evaluaci\u00f3n de c\u00f3digos <strong>nx-compile<\/strong>. La biblioteca tiene una funci\u00f3n llamada <em>compileCode(),<\/em> que funciona de la siguiente manera:<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nconst code = compileCode('return num1 + num2')&#13;\n&#13;\n\/\/ esto registra 17 en la consola&#13;\nconsole.log(code({num1: 10, num2: 7}))&#13;\n&#13;\nconst globalNum = 12&#13;\nconst otherCode = compileCode('return globalNum')&#13;\n&#13;\n\/\/\u00a0se evita el acceso de alcance global, este registro no est\u00e1 definido en la consola&#13;\nconsole.log(otherCode({num1: 2, num2: 3}))&#13;\n&#13;\n<\/pre>\n<p>Al final de este art\u00edculo, implementaremos la funci\u00f3n <strong>compileCode()<\/strong> en menos de 20 l\u00edneas.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"new-Function\"><\/span>new Function()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El constructor <strong>Function<\/strong> crea un nuevo <em>objeto Funci\u00f3n<\/em>. En JavaScript, cada funci\u00f3n es en realidad un objeto de funci\u00f3n.<\/p>\n<p>El <em>constructor\u00a0Function<\/em> es una alternativa a <strong>eval().<\/strong> <strong>new Function(\u2026args, \u2018funcBody\u2019)\u00a0<\/strong>eval\u00faa la\u00a0cadena <strong>\u2018funcBody\u2019<\/strong> pasada como c\u00f3digo y devuelve una nueva funci\u00f3n que ejecuta ese c\u00f3digo. Se diferencia de <strong>eval()<\/strong> de dos maneras principales.<\/p>\n<ul>\n<li>Eval\u00faa el c\u00f3digo pasado solo una vez. Al llamar a la funci\u00f3n devuelta, se ejecutar\u00e1 el c\u00f3digo sin volver a evaluarlo.<\/li>\n<li>No tiene acceso a las variables de cierre locales, sin embargo, todav\u00eda puede acceder al \u00e1mbito global.<\/li>\n<\/ul>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nfunction compileCode (src) {&#13;\nreturn new Function(src)&#13;\n}&#13;\n&#13;\n<\/pre>\n<p><strong>new Function(),<\/strong> es una mejor alternativa para <strong>eval()<\/strong>\u00a0en nuestro caso de uso. Tiene un rendimiento y una seguridad superiores, pero a\u00fan se debe evitar el acceso de alcance global para que sea viable.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"La-palabra-clave-%E2%80%98with\"><\/span>La palabra clave \u2018with\u2019<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La instrucci\u00f3n <strong>with<\/strong> ampl\u00eda la cadena de alcance de una declaraci\u00f3n.<\/p>\n<p><strong>with<\/strong> es una palabra clave menos conocida en JavaScript. Permite una ejecuci\u00f3n semi-arenada. El c\u00f3digo dentro de un\u00a0bloque <strong>with<\/strong> intenta recuperar las variables del objeto del recinto de seguridad pasado primero, pero si no lo encuentra all\u00ed, busca la variable en el cierre y en el \u00e1mbito global. El acceso al \u00e1mbito de cierre se impide por<strong> new Function()<\/strong> lo que solo tenemos que preocuparnos por el \u00e1mbito global.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nfunction compileCode (src) {&#13;\nsrc = 'with (sandbox) {' + src + '}'&#13;\nreturn new Function('sandbox', src)&#13;\n}&#13;\n&#13;\n<\/pre>\n<p><strong>with,<\/strong> utiliza el inoperador internamente. Para cada acceso variable dentro del bloque, eval\u00faa la variable en la\u00a0condici\u00f3n <strong>sandbox.<\/strong> Si la condici\u00f3n es verdadera, recupera la variable de la sandbox. De lo contrario, busca la variable en el \u00e1mbito global. Si nos usamos a <strong>with<\/strong> para evaluar siempre la variable en la sandbox como <em>true,<\/em> podr\u00edamos evitar que acceda al \u00e1mbito global.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Proxies-ES6\"><\/span>Proxies ES6<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El objeto <em>Proxy<\/em> se utiliza para definir el comportamiento personalizado para operaciones fundamentales como la b\u00fasqueda o asignaci\u00f3n de propiedades.<\/p>\n<p>Un <strong>ES6 Proxy<\/strong> envuelve un objeto y define funciones de captura, que pueden interceptar operaciones fundamentales en ese objeto. Las funciones de captura se invocan cuando se produce una operaci\u00f3n. Al envolver el objeto de la zona de pruebas en una trampa <strong>Proxy<\/strong> podemos sobrescribir el comportamiento predeterminado del inoperador.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nfunction compileCode (src) {&#13;\nsrc = 'with (sandbox) {' + src + '}'&#13;\nconst code = new Function('sandbox', src)&#13;\n&#13;\nreturn function (sandbox) {&#13;\nconst sandboxProxy = new Proxy(sandbox, {has})&#13;\nreturn code(sandboxProxy)&#13;\n}&#13;\n}&#13;\n&#13;\n\/\/\u00a0esta trampa intercepta operaciones 'in' en el proxy del sandbox.&#13;\nfunction has (target, key) {&#13;\nreturn true&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>El c\u00f3digo anterior enga\u00f1a al <em>bloque with<\/em>\u00a0y a la variable <strong>in<\/strong>\u00a0en el <strong>sandbox<\/strong>\u00a0ya que siempre se evaluar\u00e1 como verdadero porque la trampa <em>has<\/em> siempre devuelve verdadero. El c\u00f3digo dentro del <em>bloque with<\/em> nunca intentar\u00e1 acceder al objeto global.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Evaluacion-de-codigo-en-la-sandbox-declaracion-%E2%80%98with-y-proxies\"><\/span>Evaluaci\u00f3n de c\u00f3digo en la sandbox: declaraci\u00f3n \u2018with\u2019 y proxies<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"Symbolunscopables\"><\/span>Symbol.unscopables<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Un s\u00edmbolo es un tipo de datos \u00fanico e inmutable y se puede utilizar como un identificador para las propiedades del objeto.<\/p>\n<p><strong>Symbol.unscopables,<\/strong> es un s\u00edmbolo muy conocido. Un s\u00edmbolo conocido es un JavaScript incorporado <em>Symbol,<\/em> que representa el comportamiento del idioma interno. Se pueden utilizar s\u00edmbolos conocidos para agregar o sobrescribir iteraciones o comportamiento de conversi\u00f3n primitivo, por ejemplo:<\/p>\n<p>El conocido s\u00edmbolo <strong>Symbol.unscopables<\/strong> se usa para especificar un valor de objeto cuyos nombres de propiedad propios y heredados se excluyen de los enlaces de entorno <em>\u2018with\u2019.<\/em><\/p>\n<p><strong>Symbol.unscopables<\/strong> define las propiedades que no se pueden abrir de un objeto. Las propiedades que no se pueden capturar nunca se recuperan del objeto de sandbox en las declaraciones <strong>with,<\/strong> en su lugar se recuperan directamente desde el cierre o el \u00e1mbito global. <strong>Symbol.unscopables<\/strong> es una caracter\u00edstica muy rara vez utilizada.<\/p>\n<p>Podemos solucionar el problema anterior definiendo una trampa <em>get<\/em> en el <em>sandbox Proxy<\/em>, que intercepta la\u00a0recuperaci\u00f3n de <strong>Symbol.unscopables<\/strong> y siempre devuelve undefined. Esto enga\u00f1ar\u00e1 al bloque <strong>with<\/strong> para que piense que nuestro objeto de <em>sandbox<\/em> no tiene propiedades que no se puedan reparar.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nfunction compileCode (src) {&#13;\nsrc = 'with (sandbox) {' + src + '}'&#13;\nconst code = new Function('sandbox', src)&#13;\n&#13;\nreturn function (sandbox) {&#13;\nconst sandboxProxy = new Proxy(sandbox, {has, get})&#13;\nreturn code(sandboxProxy)&#13;\n}&#13;\n}&#13;\n&#13;\nfunction has (target, key) {&#13;\nreturn true&#13;\n}&#13;\n&#13;\nfunction get (target, key) {&#13;\nif (key === Symbol.unscopables) return undefined&#13;\nreturn target[key]&#13;\n}&#13;\n&#13;\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"WeakMaps-para-el-almacenamiento-en-cache\"><\/span>WeakMaps para el almacenamiento en cach\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El c\u00f3digo ahora es seguro, pero su rendimiento a\u00fan puede actualizarse, ya que crea un nuevo Proxy en cada invocaci\u00f3n de la <strong>funci\u00f3n return<\/strong>. Esto se puede evitar almacenando en cach\u00e9 y utilizando el mismo Proxy para cada llamada de funci\u00f3n con el mismo objeto de espacio aislado.<\/p>\n<p>Un proxy pertenece a un objeto de sandbox, por lo que simplemente podr\u00edamos agregar el proxy al objeto de sandbox como una propiedad. Sin embargo, esto expondr\u00eda nuestros detalles de implementaci\u00f3n al p\u00fablico, y no funcionar\u00eda en el caso de un objeto inm\u00f3vil de sandbox congelado <strong>Object.freeze().<\/strong> Usar una <em>WeakMap<\/em> e<em>s<\/em> una mejor alternativa en este caso.<\/p>\n<p>El objeto <strong>WeakMap<\/strong> es una colecci\u00f3n de pares clave \/ valor en los que las claves tienen una referencia d\u00e9bil. Las claves deben ser objetos y los valores pueden ser valores arbitrarios.<\/p>\n<p>Se puede usar a la WeakMap para adjuntar datos a un objeto sin extenderlo directamente con propiedades. Podemos usar WeakMaps para agregar indirectamente el cach\u00e9 de los Proxies a los objetos de la sandbox.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nconst sandboxProxies = new WeakMap()&#13;\n&#13;\nfunction compileCode (src) {&#13;\nsrc = 'with (sandbox) {' + src + '}'&#13;\nconst code = new Function('sandbox', src)&#13;\n&#13;\nreturn function (sandbox) {&#13;\nif (!sandboxProxies.has(sandbox)) {&#13;\nconst sandboxProxy = new Proxy(sandbox, {has, get})&#13;\nsandboxProxies.set(sandbox, sandboxProxy)&#13;\n}&#13;\nreturn code(sandboxProxies.get(sandbox))&#13;\n}&#13;\n}&#13;\n&#13;\nfunction has (target, key) {&#13;\nreturn true&#13;\n}&#13;\n&#13;\nfunction get (target, key) {&#13;\nif (key === Symbol.unscopables) return undefined&#13;\nreturn target[key]&#13;\n}&#13;\n&#13;\n<\/pre>\n<p>De esta manera solo se crear\u00e1 un\u00a0Proxy por objeto sandbox.<\/p>\n<p>El <strong>compileCode()<\/strong> en ejemplo anterior es un evaluador de c\u00f3digo de espacio de trabajo que funciona en solo 19 l\u00edneas de c\u00f3digo.<\/p>\n<p>Adem\u00e1s de explicar la evaluaci\u00f3n del c\u00f3digo, el objetivo de este cap\u00edtulo fue mostrar c\u00f3mo se pueden usar las nuevas caracter\u00edsticas de ES6 para alterar las existentes, en lugar de reinventarlas.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Dans ce chapitre, j&#039;expliquerai les diff\u00e9rentes mani\u00e8res d&#039;\u00e9valuer le code dans le navigateur et les probl\u00e8mes qu&#039;elles causent. Je pr\u00e9senterai \u00e9galement une m\u00e9thode, bas\u00e9e sur de nouvelles fonctionnalit\u00e9s\u2026<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1374],"tags":[],"class_list":["post-95655","post","type-post","status-publish","format-standard","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Escribiendo un marco de JavaScript \u2013 Evaluaci\u00f3n de c\u00f3digo de espacio aislado - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"En este cap\u00edtulo, explicar\u00e9 las diferentes formas de evaluar el c\u00f3digo en el navegador y los problemas que causan. Tambi\u00e9n introducir\u00e9 un m\u00e9todo, que se\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Escribiendo un marco de JavaScript \u2013 Evaluaci\u00f3n de c\u00f3digo de espacio aislado\" \/>\n<meta property=\"og:description\" content=\"En este cap\u00edtulo, explicar\u00e9 las diferentes formas de evaluar el c\u00f3digo en el navegador y los problemas que causan. Tambi\u00e9n introducir\u00e9 un m\u00e9todo, que se\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-14T15:56:29+00:00\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Escribiendo un marco de JavaScript \u2013 Evaluaci\u00f3n de c\u00f3digo de espacio aislado\",\"datePublished\":\"2022-09-14T15:56:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\\\/\"},\"wordCount\":1298,\"articleSection\":[\"Javascript\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\\\/\",\"name\":\"Escribiendo un marco de JavaScript \u2013 Evaluaci\u00f3n de c\u00f3digo de espacio aislado - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"datePublished\":\"2022-09-14T15:56:29+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"En este cap\u00edtulo, explicar\u00e9 las diferentes formas de evaluar el c\u00f3digo en el navegador y los problemas que causan. Tambi\u00e9n introducir\u00e9 un m\u00e9todo, que se\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Escribiendo un marco de JavaScript \u2013 Evaluaci\u00f3n de c\u00f3digo de espacio aislado - R Marketing Digital","description":"En este cap\u00edtulo, explicar\u00e9 las diferentes formas de evaluar el c\u00f3digo en el navegador y los problemas que causan. Tambi\u00e9n introducir\u00e9 un m\u00e9todo, que se","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/","og_locale":"fr_FR","og_type":"article","og_title":"Escribiendo un marco de JavaScript \u2013 Evaluaci\u00f3n de c\u00f3digo de espacio aislado","og_description":"En este cap\u00edtulo, explicar\u00e9 las diferentes formas de evaluar el c\u00f3digo en el navegador y los problemas que causan. Tambi\u00e9n introducir\u00e9 un m\u00e9todo, que se","og_url":"https:\/\/rmarketingdigital.com\/fr\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-14T15:56:29+00:00","author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Escribiendo un marco de JavaScript \u2013 Evaluaci\u00f3n de c\u00f3digo de espacio aislado","datePublished":"2022-09-14T15:56:29+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/"},"wordCount":1298,"articleSection":["Javascript"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/","url":"https:\/\/rmarketingdigital.com\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/","name":"Escribiendo un marco de JavaScript \u2013 Evaluaci\u00f3n de c\u00f3digo de espacio aislado - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"datePublished":"2022-09-14T15:56:29+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"En este cap\u00edtulo, explicar\u00e9 las diferentes formas de evaluar el c\u00f3digo en el navegador y los problemas que causan. Tambi\u00e9n introducir\u00e9 un m\u00e9todo, que se","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/javascript\/escribiendo-un-marco-de-javascript-evaluacion-de-codigo-de-espacio-aislado\/"]}]},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/95655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=95655"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/95655\/revisions"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=95655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=95655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=95655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}