El enfoque más simple es crear una función de constructor y definir métodos que se asignan a su prototipo, donde cada método devuelve this .
jQuery usa un patrón de prototipo de constructor mejorado donde sus métodos de prototipo son encadenables porque siempre devuelven la instancia de objeto jQuery de la que son todos los métodos.
Olvidando la parte “mejorada”, aquí está “jayKwery” para ilustrar cómo se pueden escribir en cadena los métodos prototipo de retorno de la instancia:
- ¿Está buscando un sitio web rentable de WordPress para su negocio local?
- ¿Qué servidor de datos y cableado construiría para la edición de video 4K, renderizado 3D y composición a través de la red, relativamente barato?
- ¿Cuál es la mejor manera de tener una imagen de fondo a tamaño completo sin ralentizar la carga de la página?
- ¿Desarrollar un sitio web de WordPress te convierte en desarrollador web?
- ¿Dónde encuentro el mejor tutorial para Angular JS 2?
(Dado el siguiente html)
Hi! I'm a div! Me too! I'm ap and I have an anchor child element
(function( root ) { // Declare a constructor function that will return instances of our `jayKwery` function jayKwery( selector, context ) { // this constructor merely take a matching set elements... var elems = ( context || document ).querySelectorAll( selector ); // ... And turns them into enumerable `own properties` with // numeric indices [].forEach.call( elems, function( elem, idx ) { this[ idx ] = elem; }, this); // This is some useful information that we can later take advantage of this.length = elems.length; return this; } // Create our own `each` method that can be called directly from our // instance objects jayKwery.prototype.each = function( callback ) { for ( var idx = 0; idx < this.length; idx++ ) { // By passing the element as the context |this| // becomes the current element in the iteration callback.call( this[ idx ], this[ idx ], idx ); } return this; }; // Define prototype method: .html jayKwery.prototype.html = function( val ) { // If no `val` argument was provided, return the contents of the first // matching element in `this` if ( !val ) { return this[ 0 ].innerHTML; } // Otherwise, set all element's innerHTML with provided value return this.each(function( elem ) { elem.innerHTML = val; }); }; // Expose `jayKwery` to global scope as an // "enhanced" function returning instances of the // `jayKwery` constructor root.jayKwery = function( selector ) { return new jayKwery( selector ); } })( this ); // Select some elements console.log( jayKwery("div") ); // [ div, div ] // Now, change some html... jayKwery("div").html("FOO"); // Get the html content of the first element console.log( jayKwery("div").html() ); // Get All `p` elements console.log( jayKwery("p") );
Puede ver un ejemplo de función en vivo aquí:
http://jsfiddle.net/rwaldron/4qjYX/
Esta fue mi respuesta original … Antes del OP y cambié los detalles de la pregunta:
El patrón al que se refiere puede considerarse fácilmente como métodos estáticos, no compartirán ningún tipo de contexto con la función a la que están vinculados, a menos que se defina con un .bind( context ) o se llame con .call/.apply
Un ejemplo simple pero completo:
(function( root ) { // Declare a constructor function function List( array ) { // define own property list // |this| context this.list = array; // This is a static array of all instances // that have been created by List // We'll define this further down List.instances.push( this ); return this; } // Define prototype methods for List List.prototype.getList = function() { // All proto methods will have access to // the constructor function's scope return this.list; }; List.prototype.addToList = function( val ) { // All proto methods will have access to // the constructor function's scope return this.list.push( val ); }; // Define the a static array that will hold a list of // all instances created by the List constructor List.instances = []; // Define a static method that returns an array of all instance lists, // This method has no link to any of the instances actual contexts List.getLists = function() { return List.instances.map(function( instance ) { return instance.list; }); }; root.List = List; var a = new List( [ 1, 2, 3, 4 ] ), b = new List( [ "a", "b", "c" ] ); // Tests console.log( List.getLists() ); // [ [ 1, 2, 3, 4 ], [ 'a', 'b', 'c' ] ] })( this );
Y aquí hay un ejemplo vivo y funcional:
http://jsfiddle.net/rwaldron/DfZXn/
