javascript - tipos - Usar ''ventana'', ''documento'' y ''indefinido'' como argumentos en la función anónima que envuelve un plugin jQuery

pasar parametros a una funcion javascript desde html

Question

Honestamente, no sabía cómo acortar el título.

Aprendí a escribir un plugin jQuery estudiando el origen del complemento SlidesJS . Cuando encontré algo nuevo, solo le pregunté a mi buen amigo Google y la mayoría de las veces obtuve una respuesta satisfactoria. Honestamente, nunca hice mucho esfuerzo. Todo lo que sé es que $ es (probablemente) un constructor de objetos jQuery abreviado y que $() y jQuery() son lo mismo siempre que se incluya jQuery.

Recientemente, sin embargo, traté de entender la ciencia detrás de jQuery y cómo escribir un buen plugin jQuery. Me encontré con un artículo muy bueno en el que el autor enumeraba varias plantillas para crear un plugin jQuery. Como el resto era demasiado complejo para que lo entendiera, me gustó el primero: Un comienzo ligero . Ahora, aquí está el código para dicha plantilla.

/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */


// the semi-colon before the function invocation is a safety 
// net against concatenated scripts and/or other plugins 
// that are not closed properly.
;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global 
    // variable in ECMAScript 3 and is mutable (i.e. it can 
    // be changed by someone else). undefined isn''t really 
    // being passed in so we can ensure that its value is 
    // truly undefined. In ES5, undefined can no longer be 
    // modified.

    // window and document are passed through as local 
    // variables rather than as globals, because this (slightly) 
    // quickens the resolution process and can be more 
    // efficiently minified (especially when both are 
    // regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = ''defaultPluginName'',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the 
        // contents of two or more objects, storing the 
        // result in the first object. The first object 
        // is generally empty because we don''t want to alter 
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element 
        // and this.options
    };

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, ''plugin_'' + pluginName)) {
                $.data(this, ''plugin_'' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

He incluido los comentarios para referirme a ellos en mis preguntas.

Tengo una idea cruda de por qué la window y el document se han incluido en el argumento de la función anónima que envuelve el complemento (no sé cómo llamarlo) porque en los comentarios se dice que, por lo general, acorta el tiempo de ejecución . pero como funciona? Cualquier argumento de dicha función anónima envolviendo el complemento pasa a donde? ¿Y cómo se tratan estos en el complemento?

Normalmente, yo haría $(window).resize(function(){}) pero eso no funciona en este caso. Si hago console.log(window) dentro de la función Plugin, dice ''undefined''.

Lo que me lleva a la otra pregunta que es: ¿qué es indefinido ? ¿No es un tipo de datos asignado a un objeto que no está definido en el alcance? ¿Cómo se puede pasar como argumento? ¿Los argumentos no tienen que ser objetos? Hay algunas líneas escritas sobre esto en los comentarios, pero no entiendo ni una palabra: < entonces podemos asegurarnos de que su valor sea verdaderamente indefinido > ¿Qué?

Para resumir:

• ¿Qué se entiende por function($) ?
• ¿Por qué debería incluir window , document y undefined como argumentos de function($) ?
• Si lo hago, ¿cómo puedo acceder a la window y a los objetos del document ?
• undefined qué, y por qué?

Por favor, trátame. Nunca estudié el lenguaje de programación como un tema con el propósito expreso de escribir aplicaciones. Estudié C básico para escribir rutinas de bajo nivel orientadas al hardware para microcontroladores de núcleo diminutos y eso es todo. Aprendí C ++ extensivamente y un poco de Java por mi cuenta. Solo para que supieras qué esperar.

Answer 1

¿Qué se entiende por function($) ?

Al pasar $ como argumento para su función, es posible utilizar el objeto abreviado jQuery , que, como ha identificado claramente, es solo un alias del objeto jQuery (también consulte jQuery.noConflict() ).

¿Por qué debería incluir window , document y undefined como argumentos de function($) ? Tengo una idea cruda de por qué la ventana y el documento se han incluido en el argumento de la función anónima que envuelve el complemento (no sé cómo llamarlo) porque en los comentarios se dice que, por lo general, acorta el tiempo de ejecución . pero como funciona? Cualquier argumento de dicha función anónima envolviendo el complemento pasa a donde?

Al pasar la window y el document como variables locales se acorta el tiempo de ejecución porque es más fácil y rápido acceder a una variable local que a una variable global, porque las variables locales son las primeras en la cadena . ¿Qué tipo de respuestas a su segunda pregunta: los argumentos se pasan dentro del alcance de la función anónima, que es el punto total de hacer una función anónima de todos modos: para crear un cierre.

Esos argumentos se pasan al final de su función, donde ve el último paréntesis. La window variable en su cierre se refiere a la global window porque la pasó al final.

La razón por la que pasas undefined es porque undefined es un lío confuso de Javascript. Básicamente, undefined es una propiedad del objeto global , es decir, es una variable, un singleton . No está protegido , eso significa que puede ser anulado. Significa que podría tener un undefined que en realidad está definido.

Al pasar undefined , asegúrese de que, incluso si alguien se equivocó en el alcance global (¡nunca confíe en el alcance global! :)), aún obtiene un undefined correcto.

Además, las mismas razones de rendimiento se aplican a undefined .

Si lo hago, ¿cómo puedo acceder a la ventana y a los objetos del documento?

Ya estás accediendo a ellos, porque los estás pasando a tu función. Y como tal, puedes manipularlos.

Answer 2

Antes de responder en detalle, permítanme señalar que, a diferencia de otros lenguajes de programación, javascript es un poco extraño por dos razones: primero, se creó a toda prisa, lo que significa que muchas cosas no se refinaron o implementaron bien. En segundo lugar, fue adoptado por Internet muy, muy rápido y Microsoft copió el lenguaje muy rápidamente y con mucha precisión (incluidos los errores en el lenguaje). El resultado de esto es que tratar de corregir los errores en el diseño del idioma fue difícil y / o imposible porque no querían romper la compatibilidad con los sitios web existentes.

Ahora para entrar en detalles:

Lo que realmente significa la función ($)

Nada especial. En la función javascript y los nombres de variables se les permite usar las letras az incluyendo mayúsculas, los números 0-9 y los símbolos $ y _ . No hay otras restricciones sobre cómo se pueden usar. Aunque hay pautas y convenciones, algunas mencionadas por la especificación del lenguaje, algunas crecieron con la comunidad de programación.

Por lo tanto, $ es solo un nombre de variable. No hay diferencia entre:

function foo ($) {alert($)}

y

function foo (x) {alert(x)}

Es solo el nombre elegido para el parámetro. Sin embargo, la especificación sugiere fuertemente que $ no debe ser usado por código escrito por humanos. Está bien para el código generado por computadora (un compilador de coffeescript por ejemplo) pero no está bien para los scripts normales. Por otro lado, se recomienda encarecidamente en las secuencias de comandos que utilizan jQuery que $ siempre se refieren al objeto jQuery (que casualmente también es una función, eso está bien en javascript ya que las funciones son objetos).

Como está escribiendo jQuery, el significado de la function ($) es una función anónima que acepta un argumento y el argumento que espera que sea un objeto jQuery.

¿Por qué debería incluir window, document y undefined como argumentos de función ($)?

Podría decirse que uno de los errores de diseño en javascript es la falta de soporte para constantes y / o variables / objetos inmutables / protegidos. Como tal, la window , el document y el undefined son en realidad variables globales regulares; cualquiera puede reasignarlos a cualquier cosa.

El siguiente es un código javascript loco pero válido:

window = 42;

Ningún programador sensato haría esto, pero es posible, no obstante. Los desarrolladores de jQuery estaban muy preocupados por esto, por lo que jQuery hace todo lo posible para pasar la window real, el document y los undefined en caso de que alguien esté lo suficientemente loco como para hacer cosas locas.

Una de las características de JavaScript es que los argumentos de la función anulan las variables globales. Entonces, si alguna de las variables anteriores ha sido secuestrada por otra persona, se reasigna a sus nombres propios en la función.

Si lo hago, ¿cómo puedo acceder a la ventana y a los objetos del documento?

Se espera que pase la window correcta, document y undefined como argumentos denominados window , document y undefined en la función. Hacer cualquier otra cosa significa que ya no tiene acceso a la window , el document y los objetos undefined .

Hay soluciones alocadas que puede hacer para intentar ir a agarrar el objeto de la window (también conocido como el objeto global) y desde allí puede obtener un document . El código jQuery es en realidad una solución para volver undefined en caso de que haya sido secuestrado.

indefinido qué, y por qué?

Como dijiste correctamente. undefined es el valor que javascript otorga a las cosas que están declaradas pero que no tienen valores asignados. Pero en javascript undefined es solo una variable global. Si no lo tocas, inicialmente tiene el valor de undefined (lógica circular, lo sé). Pero puede ser modificado:

undefined = ''boom!'';

Y a partir de ahora todas las variables indefinidas tendrán el valor de "boom!" . La última especificación del lenguaje javascript en realidad no permite reasignar a indefinido pero a partir de hoy solo Safari lo hace.

Nuevamente, ningún programador sensato hará esto.

Answer 3

Cuando escribes una función como:

(function (foo, bar) {
    return foo.getElementById(bar);
})(document, "myElement")

luego se llama inmediatamente a la función con el document arguments y "myElement" para los parámetros foo y bar . Por lo tanto, dentro de la función, foo.getElementById(bar) es equivalente a document.getElementById("myElement") .

Del mismo modo, en el ejemplo de su complemento, llama inmediatamente a la función con los argumentos jQuery, document, window .

¿Qué se entiende por function($) ?

El $ simplemente representa una referencia a un objeto jQuery que se transfiere a la función contenedora. Más tarde, cuando se llama a la función anónima con (jQuery, window, document) , la referencia $ dentro de la función hace referencia al objeto jQuery . Esto se hace por una serie de razones, una de las cuales es que $ es más rápido de escribir. También permite al usuario aplicar su complemento en el contenedor a una instancia particular de jQuery , producida tal vez por jQuery.noConflict() .

¿Por qué debería incluir window , document y undefined como argumentos de function($) ?

No necesita incluir estos. El razonamiento del autor original es que la asignación de variables de función local para referenciarlas acortará el tiempo que lleva resolver estas variables. Afirmo que los ahorros son insignificantes; Personalmente, no me molestaría a menos que utilizara muchas referencias a window y / o document .

En cuanto a lo undefined , el propósito original del autor al incluir esto es garantizar que alguien no haya alterado la variable global undefined en EcmaScript 4 (edite: realmente ECMAScript 3 - versión 4 nunca lo hizo) o antes. Nuevamente, no puedo imaginar que surja este problema. Si realmente te preocupa que esto pueda ser un problema, solo incluye algo como esto en tu función:

if(typeof undefined !== "undefined") {
    undefined = void 0;
}

Si lo hago, ¿cómo puedo acceder a la window y a los objetos del document ?

Todo lo que tiene que hacer es asegurarse de que la llamada de función al final de su función anónima pase en los parámetros reales (jQuery, ventana, documento). O bien, no incluya los argumentos de window y document en la firma de su función. De cualquier manera, se referirá a los objetos reales , independientemente del nivel de indirección.

undefined qué, y por qué?

undefined es una variable global de tipo "indefinido". Los campos que no se han inicializado son exactamente iguales (===) a indefinidos. Permite al programador diferenciar entre un valor deliberadamente nulo y uno simple no inicializado. En ECMAScript 5 y posteriores, undefined es de solo lectura. Antes de eso, es posible que otro código pueda modificar el valor de undefined . Siempre puede obtener el valor verdadero undefined con la expresión void 0 ... como en myUndefinedVar = void 0; .

Answer 4

La inclusión de un identificador en una lista de parámetros es efectivamente lo mismo que declarar la variable en el cuerpo de la función, por ejemplo

function bar(foo) {
}

es equivalente a

function bar(foo) {
  var foo;
}

pero por supuesto solo haces lo primero si quieres pasarle un valor a foo .

La razón principal para hacer:

(function($) {
    // use $ here instead of jQuery
}(jQuery));

es que cuando se lanzó jQuery, Prototype.js ya había estado utilizando "$" como identificador para su función principal durante algún tiempo. El patrón anterior permite usar jQuery y prototype.js en la misma página, usando "$" como identificador para diferentes cosas.

Pasar en documento y ventana es, en el mejor de los casos, una micro optimización que tiene poco beneficio. No ofrece protección contra que se les asignen valores diferentes a los esperados. Simplemente no moleste y use la ventana y el documento dentro de la función como identificadores globales.

Incluir valores indefinidos en los parámetros y no pasarlos, un valor no es una forma sensata de asegurar que los indefinidos no estén definidos ya que aún pueden verse afectados si se pasa accidentalmente un valor. Una forma más segura es:

(function() {
    var undefined;
    ...
}());

Ahora está seguro de que el alcance indefinido de la función no está definido. O si quieres una tarea:

(function() {
    var undefined = void 0;
    ...
}());

Pero eso es solo un tipeo extra.