Отличие определения функции в JavaScript/JQuery

Question

версия 1:

function add(){ 
var a = 2; 
... 
... 
... 
} 

версия 2:

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

Где главное отличие двух версий? Для версии 2 он не имеет имени функции. Если он просто запускает код в функции, почему бы просто не удалить $function(){..};. Это действительно заставляет меня сбивать с толку, потому что в настоящее время многие сценарии написаны в стиле версии 2. Пожалуйста, помогите уточнить мое замешательство.

Answer 1

Пример 1 определяет функцию, называемую add, тогда как пример 2 просто передает анонимную функцию функции jQuery.

Синтаксис $(function() {...}); является сокращением для $(document).ready(function() {...});, которое принимает функцию в качестве аргумента, а затем выполняет эту функцию, когда DOM готов. Это используется для обеспечения того, чтобы элементы, с которыми вы хотите работать в вашем Javascript, фактически существуют до выполнения кода.

Edit обратиться комментарий ниже:

.click() функция JQuery имеет два применения. Если вы передаете функцию, она создает дополнительный обработчик события click, который будет запускать эту функцию при срабатывании события. Если вы не передадите функцию, она вызовет все обработчики событий кликов, которые были прикреплены к элементу (элементам) объекта jQuery. Итак, да, вы можете позвонить .click() без функции, но это не делает то же самое.

Вы не можете сделать следующее:

$(document).ready(var foo = 2;...); 

потому, что даст вам синтаксическую ошибку. Вы можете, однако, определить функцию обычным способом, а затем передать , что на призыв $(document).ready():

function foo() { 
    var foo = 2; 
    ... 
} 

$(document).ready(foo); 

Answer 2

$(function(){}) фактически оберточную функцию внутри $(document).ready(); таким образом, код не будет работать до тех пор, пока DOM не будет загружен.

Answer 3

Я считаю, что $(function() является сокращением для загрузки документа в jQuery.

Если вы хотите сделать «функцию JQuery» Вы должны были бы сделать это:

jQuery.fn.yourfunctionname = function() { 
    //code in here 
} 

Короче говоря, ваша первая функция фактически определяет функцию с именем add и следующая функция является сокращением для этого:

$(document).ready(function(){

Answer 4

function add(){ 
var a = 2; 
... 
... 
... 
} 

простая функция JS.

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

является ярлыком для документа jQuery.готов:

$(document).ready() {}; 

вы можете также хотел спросить о:

(function($){ 
var ... 
.. 
.. 
})(jQuery); 

, который дает замыкание над $ знак - так что вы можете использовать доллар. (где могли быть загружены другие библиотеки).

Answer 5

Первая версия добавляет функцию к пространству имен окна, тогда как область второго - только в пределах области $(function(){... и поэтому недоступна из кода вне скобки.

Answer 6

Примеры 1 и 2 совершенно разные. jQuery IS javascript, поэтому определения функций одинаковы.

$(function(){... является только сокращением для $(document).ready(function(){..., в то время как пример один фактически производит новую функцию под названием add.

Вы можете произвести функцию добавления в функции ready так:

$(function(){ 

     function add(){ 
      var foo = 1;    
     } 

}); 

JQuery не seporate нового языка с различными определениями и синтаксисом, чем JavaScript, его инструментарий написано в JavaScript с использованием синтаксиса и определения в JavaScript ,

Подумайте о том, что jQuery представляет собой просто большую функцию, функцию, определенную как $ ... поэтому вместо function add(){} jquery - это просто функция, называемая $ function $(){}. Вы также передаете аргументы jQuery с тем же синтаксисом, что и обычная функция javascript.

 function add(arg){ 
      //do something with arg 
     } 
     add('#elem'); 

     function $(arg){ 
      //do something with arg 
     } 
     $('#elem'); 

Вы видите? jQuery - это просто сложная функция, которая позволяет передавать многие типы аргументов и возвращает много полезных инструментов. Но синтаксис и определения ничем не отличаются от традиционного javascript.

 function add(arg){ 
      var added = arg + 12; 
      return this.alertAdded = function(){ 
       alert(added); 
      } 
     } 

     add(30).alertAdded(); // will alert 42 
     //vs 
     $('#elem').fadeOut(); // same syntax but referring to very different functionality. 

вот пример синтаксиса jQueryish - обычный обычный JS.