Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:js [2022/11/03 08:33]
alfred [Resources]
+++ wiki2:js [2022/11/03 16:21] (actual)
@@ Línea 909: / Línea 909: @@
 map_1.get(4);
 </code>
+===== Javascript Snippets =====
+==== Merge two objects ====
+<code>
+Object.assign(obj1, obj2);
+let newObject = Object.assign({}, obj1, obj2, obj3, etc);
+</code>
+==== URL parameters ======
+<code>
+var urlParams = new URLSearchParams(window.location.search);
+console.log(urlParams.has('post')); // true
+console.log(urlParams.get('action')); // "edit"
+console.log(urlParams.getAll('action')); // ["edit"]
+console.log(urlParams.toString()); // "?post=1234&action=edit"
+console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
+</code>
+==== Local Storage ====
+<code>
+window.localStorage.setItem('test', 'hola');
+</code>
+  * setItem(): Add key and value to localStorage
+  * getItem(): Retrieve a value by the key from localStorage
+  * removeItem(): Remove an item by key from localStorage
+  * clear(): Clear all localStorage
+  * key(): Passed a number to retrieve nth key of a localStorage
 ===== JavaScript Notes =====
+<code>
+> b = a.c || 4;
+</code>
 ==== ES6 Events ====
@@ Línea 1008: / Línea 1050: @@
   $(this).data('id')
 });
+</code>
+==== JavaScript Development Tools ====
+=== Webpack ===
+  * https://youtu.be/GU-2T7k9NfI
+''webpack src/js/app.js dist/bundle.js'' es el comando básico, una vez añadido webpack, para generar un bundle.js. Webpack puede realizar otras tareas de optimización y minimización si añadimos que es para producción con ''-p''.
+Lo que hace es pillar a partir de los imports dentro del código js qué construir. Módulos y plugins que utiliza Webpack para CSS también requieren que incluyas ficheros .css en el código js.
+Añadiendo **webpack-dev-server** como pacate al proyecto y substituyendo el comando de ejecución ''webpack'' por ''webpack-dev-server'' se nos añade un dev web server que nos permite hacer reload de los ficheros y demás. El comando sería: ''webpack-dev-server --entry ./src/js/apps.js ---output ./dist/bundle.js''.
+== Configuración ==
+Webpack necesita un entry point y un output. Usa modulos y plugins para transformar el contenido desde el entry al output.
+Para escoger un fichero config (diferente al por defecto: ''webpack.config.js'') se puede añadir ''--config'' al comando. Con un archivo por defecto no necesitamos añadir parámetros al comando de ejecución.
+<code>
+var path = require('path');
+module.exports = {
+  entry: './src/js/app.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/dist'  // Para el webpack-dev-server, donde encontrar los ficheros
+  }
+}
+</code>
+== Modulos ==
+Tras el output podemos añadir una sección de ''modules''. Modules tiene un array de ''rules'' que es sobre qué elementos se aplica un módulo. Un módulo es un transformador del código y lo has de instalar previamente (''npm install css-loader style-loader --save-dev'').
+Las reglas (rules) son un array de objetos js con varias propiedades. La primera es una expresión regular correspondiente a los nombres de ficheros, ''test'', si se valida se ejecutará una serie de "comandos" dentro del array de ''use''.
+===== More JavaScript =====
+==== Default arguments on functions ====
+<code javascript>
+const defaultPerson = {
+name: {
+first: "Shane",
+last: "McConkey"
+},
+favActivity: "skiing"};
+function logActivity(person = defaultPerson) {
+console.log(`${person.name.first} loves ${person.favActivity}`);
+}
+</code>
+==== Arrow functions ====
+This:
+<code javascript>
+const lordify = function(firstName) {
+return `${firstName} of Canterbury`;
+};
+</code>
+Is the same than this:
+<code javascript>
+const lordify = firstName => `${firstName} of Canterbury`;
+</code>
+Arrow functions protect the scope of this.
+For example this fails:
+<code javascript>
+const tahoe = {
+  mountains: ["Freel", "Rose", "Tallac", "Rubicon", "Silver"],
+  print: function(delay = 1000) {
+    console.log(this); // Window {}
+    setTimeout(function() {
+      console.log(this.mountains.join(", "));
+    }, delay);
+}};
+tahoe.print(); // Uncaught TypeError: Cannot read property 'join' of undefined
+</code>
+But this not:
+<code javascript>
+const tahoe = {
+	mountains: ["Freel", "Rose", "Tallac", "Rubicon", "Silver"],
+	print: function(delay = 1000) {
+		setTimeout(() => {
+			console.log(this.mountains.join(", "));
+		}, delay);
+	}
+};
+tahoe.print(); // Freel, Rose, Tallac, Rubicon, Silver
 </code>

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página