Que bonito es tener muchas acciones en una sola línea.
$(‘p’).text(“This is an example of chaining!!”).addClass(“paragraph-design”); Este “chaining thing” usa el “this” keyword para poner a trabajar un método chaining. ¿Pero qué es esto? En JavaScript esto siempre se refiere al “dueño” de la función que estamos ejecutando, o bien, al objeto cuya función es metodo de.Quirksmode.org Entremos en acción:
var Person = function(name, age) { this.name = name; this.age = age; }; Person.prototype.getName = function() { console.log("Your name is: ", this.name); return this; }; Person.prototype.isAdult = function() { var isAdult = this.age >= 18 ? 'Yes' : 'No'; console.log("Is an adult: ", isAdult); return this; }; Person.prototype.setNationality = function (nationality) { this.nationality = nationality; return this; }; Person.prototype.getInfo = function() { console.log('Your name is ', this.name, ' and you are', this.nationality); return this; }; var p = new Person("Hugo", 36); p.getName().isAdult().setNationality("Mexican").getInfo(); Esta clase fue creada usando el patrón prototypical. JavaScript ofrece diferentes maneras de crear objetos, y con ecma6 la clase keyword fue introducida.
Como ya mencionado, el secreto detrás del chaining stuff es usar el “return this” en cada método que queremos usar. Para correr este ejemplo con node, solo escriba en su consola. >> node chaining-example.js Aquí, puede crear un objeto llamado p el cual por instancia es persona. Y luego llama sus métodos en una sola línea. var p = new Person("Hugo", 36); p.getName().isAdult().setNationality("Mexican").getInfo(); También se puede usar de esta manera: new Person("Hugo", 36).getName().isAdult().setNationality("Mexican").getInfo(); Esta solo fue una simple manera de implementar el chaining, incluye algunos otros conceptos como objetos, prototipos, funciones, instancias, etc. Algunas buenas bibliografías que personalmente me gustan: 1/ You Don't Know JS by Kyle Simpson 2/ EcmaScript for Humans by Deepak Grover and Hanu Prateek Kunduru 3/ Beautiful JavaScript by Anton Kovalyov
0 Comments
Leave a Reply. |