¿Qué es esta notación javascript?

Lo encontré aquí

;(function ($, window, document, undefined) { //code }(jQuery, this, this.document)); 

Esta es la primera vez que veo algo como esto. ¿Qué es y cómo se interpreta? No entiendo por qué tiene que pasar este y este documento, y qué pasa con lo "indefinido".

El motivo por el que estoy preguntando es porque lo incluí en mi página y

  if($('ul.mtree').length) 

Devuelve falso, a pesar de que devuelve verdadero cuando lo escribo en la console.

El primer punto y coma establece el siguiente código aparte de cualquier otro código anterior que pueda haber olvidado el punto y coma. Esto es importante ya que los parens intentarán ejecutar los enunciados anteriores como una function si no se encontró el punto y coma.

Para el rest del código, solo estamos declarando una function "en línea" que se ejecutará inmediatamente cuando los arguments $, window, document se instancian como jQuery, this, this.document (respectivamente) del scope global. Esto es principalmente para que pueda usar "$" dentro de su nuevo plugin jQuery sin preocuparse si $ ha sido sobrescrito en otro lugar. Puede estar seguro de que $ es lo mismo que jQuery .

Lea más acerca de "Proteger el $ Alias ​​y Agregar Alcance" aquí

Actualización desde OP :

Para la sentencia if que devuelve false, asegúrese de que su html esté cargado en el momento de llamar a su sentencia if . Una manera rápida de hacer esto, es envolverlo en un método $(document).ready como sigue:

 $(document).ready(function () { if($('ul.mtree').length) { alert("got 'em!"); } }); 

Es una function ejecutada de inmediato. Los ; al principio protege de posibles errores de syntax después de la minificación.

La function en sí misma proporciona el scope de los arguments en lugar de referencerlos en el ámbito global. También proporciona privacidad de las variables locales definidas con la function. El parámetro final algo confuso pasado de undefined protege contra los cambios maliciosos a lo que undefined representa en el ámbito global.

Hay muchos resources disponibles si busca términos de JavaScript como funciones autoejecutables, scope global, cierres, patrón de module.

Puede ser útil include una copy del código que tiene que no funciona.

Pero para responder a la pregunta sobre por qué if($('ul.mtree').length) puede devolver true en la console, pero false en la página podría depender del time (por ejemplo, la function se ejecuta antes de que DOM se haya cargado). Cuando carga la console para verificar el valor, el DOM se carga y devuelve verdadero.

Asegúrese de include su JS al final de la página, o solo llame después de cargar el documento.

Si entiendo tu pregunta correctamente, la function de notación ; antes de la statement de function, como

 (function(){ console.log('no name'); })(); (function(){ console.log('no name') }()); -function(){ console.log('no name'); }(); +function(){ console.log('no name'); }(); ~function(){ console.log('no name'); }(); !function(){ console.log('no name'); }(); 

verá la notación, como '()', '-', '+', '~', '!'

¡y la function de la notación es que analiza la statement de la function en la expresión y ejecuta la function inmediatamente!

pero sugiero que solo use '()' para ejecutar la statement de la function, porque es la forma formal y la forma regular de usarla en la rutina.

Probablemente, se supone que ese código soluciona el caso en el que $ , la window o el document se han sombreado con otros valores:

 (function() { var window = 123, document = 'abc', $ = Function.prototype; })(); 

Entonces,

  • $ es una abreviatura utilizada por jQuery y otras bibliotecas. El código asume que jQuery no ha sido sombreado con otra cosa, por lo que crea una variable llamada $ con el valor de jQuery .
  • this es una palabra key Cuando no se establece explícitamente en modo no estricto, se convierte en el object global. Entonces su código crea una window variable local con ese valor. Tenga en count que esto es peligroso, porque podría haberse establecido en algún valor o undefined estar undefined en el modo estricto.
  • Suponiendo que this es el object global, este this.document será el object del documento.
  • undefined era una propiedad del object global que no tenía el atributo ReadOnly en ECMAScript 3, por lo que podría sobrescribirse. Su código crea una variable local sin asignar ningún valor, por lo que se convierte en el verdadero indefinido. Esto ya no es necesario desde ECMAScript 5, porque window.undefined tiene los window.undefined [[Configurable]] y [[Writable]] establecidos en false .

Entonces,

 (function() { var window = 123, document = 'abc', $ = Function.prototype; (function($, window, document, undefined) { // `$`, `window`, `document` and `undefined` have been restnetworking })(jQuery, this, this.document); })();