MODULE PATTERN & npm MODULES EN EL BROWSER CON BROWSERIFY Por: José Trezza 

ASUNTOS A CUIDAR • Escalabilidad • Reusabilidad • Optimización, etc. 

ORGANIZACIÓN DEL CÓDIGO • Namespaces • Patrones de desarrollo • Patrones de diseño 

JAVASCRIPT = LIBERTAD 

CREACIÓN DE OBJETOS var jorge = Object.create(person, {name:{value:'Jorge', enumerable: true}}); var jorge = new Person('jorge'); var jorge = {name: 'Jorge', age: 25}; 

INVOCACIÓN DE FUNCIONES var sum = new Sum(1, 3); function sum(a, b){return a + b;} sum(1, 3); var Math = {sum: function(a, b){return a + b;}} Math.sum(1, 3); 

MULTIPARADIGMA • Orientado a objetos • Imperativo • Funcional 

MÓDULOS Organización, abstracción, reutilización... 

CÓDIGO PLANO function abs(n){ return n >= 0 ? n : n * -1; } function pow(n, exp){ var positivo = exp >= 0, resultado = 1; exp = positivo ? exp : -exp; while(exp >= 1){ if(exp % 2 != 0) resultado *= n; exp /= 2; n *= n; } return positivo ? resultado : 1 / resultado; } 

OBJETOS var Math = { abs: function (n){ return n >= 0 ? n : n * -1; }, pow: function (n, exp){ //Implementación aquí } } 

FUNCIONES Son la única forma de crear un nuevo scope en JavaScript. 

FUNCIONES ¿Qué son? function saludar(nombre){ alert("Hola "+ nombre); } //Se invoca con () saludar("Hola"); 

FUNCIONES Son valores. var alertar = function(r){ alert(r); }; $.get("/url", alertar); function plusSomething(n){ return function(a){ return a + n; }; } alertar.prototype = {}; alertar.toString(); 

SENTENCIA Ejecuta una acción. EXPRESIÓN Produce un valor. var mayor; if(edad > 17){ mayor = true; }else{ mayor = false; } var mayor; mayor = edad>17 ? true:false; 

SENTENCIA Ejecuta una acción. function saludar(nombre){ console.log("Hola " + nombre); } EXPRESIÓN Produce un valor. var saludar = function(nm) { console.log("Hola " + nm); }; 

MÓDULO var myModule = function(){ var bike = { color: 'Black/Blue' } return { setColor: function(color){ bike.color = color; }, describe: function(){ console.log("This is a "+ bike.color+" bike."); } } }(); 

PROBANDO MÓDULO myModule.describe(); myModule.setColor('Yellow'); myModule.describe(); myModule.setColor('Green'); myModule.describe(); > This is a Black/Blue bike. > This is a Yellow bike. > This is a Green bike. 

PROBANDO MÓDULO console.log(myModule.color); console.log(myModule.bike['color']); > undefined > Uncaught TypeError: Cannot read property 'color' of undefined 

MÓDULO (function (counter) { var times = 0; counter.increment = function () { return times++; }; counter.howMany = function () { console.log( "Total: " + times); }; })(window.counter = {}); 

PROBANDO MÓDULO counter.increment(); counter.howMany(); counter.increment(); counter.howMany(); > Total: 1 > Total: 2 

MÓDULO (function( window, undefined ) { var readyList, rootjQuery, core_strundefined = typeof undefined, location = window.location, document = window.document, docElem = document.documentElement, _jQuery = window.jQuery, _$ = window.$, class2type = {}, jQuery = function( sel, cxt ) { return new jQuery.fn.init( sel, cxt, rootjQuery ); }... })( window ); jQuery (Código ilustrativo) 

DEPENDENCIAS Archivos independientes > Uncaught Error: Bootstrap's JavaScript requires jQuery 

ESTÁNDARES • AMD • Common JS • ES Harmony 

ESTÁNDARES • AMD • Common JS • ES Harmony 

No content

modulecounts.com 

COMMON JS exports.abs = function (n){ return n >= 0 ? n : n * -1; } exports.pow = function (n, exp){ //Implementación aquí } math.js Módulo de ejemplo 

COMMON JS module.exports = { abs: function (n){ return n >= 0 ? n : n * -1; }, pow: function (n, exp){ //Implementación aquí } } math.js Módulo de ejemplo 

COMMON JS var http = require('http'), $ = require('jquery'), math = require('./math'); $(document).on('ready', function(){ alert(math.abs(-35)); }); myApp.js Ejemplo de uso 

npm modules en el browser 

No content

GRACIAS @jtrezza