JQuery откуда данные берутся? - PullRequest
0 голосов
/ 24 апреля 2018

Я видел много функций JQuery, использующих параметры функции параметров. Несмотря на то, что я их использую, он кажется довольно неполным, не зная, как это работает в бэк-энде. В качестве примера рассмотрим метод click:

$("p").click(function(event){
    event.preventdefault();
    alert("testing 123");
});

В этом коде, если я использовал «this» внутри метода, он даст мне сам элемент «p». Тем не менее, я не могу понять, что параметру "события" присвоено что-то. не должно быть места с битом кода вроде

var event = blah blah;

чтобы параметр события имел некоторые значения?

Я нажал на фактический файл JQuery, нажав клавишу f12, и он перешел к функции, подобной этой

jQuery.fn[ name ] = function( data, fn ) {
    return arguments.length > 0 ?
        this.on( name, null, data, fn ) :
        this.trigger( name );
};

Я не вижу места этого заполнения или назначения чего-либо для параметра с именем "event"

У меня такая же проблема с запросами $ .ajax,

$.ajax({
    type: "POST",
    url: url, 
    async: false,
    success: function (data) {  }
});

Видно, что где-то происходит загрузка «данных» в параметре «данные». Как и где заполняются фактические данные? когда мы загружаем фактические данные. Я видел немного похожей проблемы.

Ответы [ 3 ]

0 голосов
/ 24 апреля 2018

Объявление происходит в самих параметрах функции.

Объявление data, event, или как вы хотите вызывать его внутри параметров функции (любое слово будет работать), фактически является оператором var data = ....

В случае обработчика событий, event передается браузером любой функции, привязанной к этому событию. В случае вызова ajax, как сказал @Alec, это данные, возвращаемые с сервера.

0 голосов
/ 25 апреля 2018

jQuery - это, по сути, оболочка, которая возвращает объект множеством методов. Большинство из них не так просты, если вы хотите глубже понять, у вас нет выбора, кроме как использовать консоль и просмотреть исходный код, который вы можете найти здесь: https://code.jquery.com/jquery-1.12.4.js. В идеале, используйте несжатую версию , Для некоторых методов это может быть довольно долго, чтобы докопаться до сути. Как работает обратный вызов Click, скрыто довольно глубоко.

Вы можете найти это так:

В консоли введите $ ("p"). Щелкните. Вы получите:

ƒ ( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    }

Что происходит отсюда в исходном коде:

jQuery.each( ( "blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu" ).split( " " ),
    function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
} );

Так как у вас есть хотя бы аргумент, он запускается: this.on( name, null, data, fn ), где this - это ваш объект jQuery $ ('p'), name - это "щелчок", а data - ваша функция ( событие). Итак, на this.on():

 console.log($('p').on);
    ƒ ( types, selector, data, fn ) {
            return on( this, types, selector, data, fn );
        }

Здесь function on не является глобальным, поэтому он находится в закрытии jQuery, поэтому вернемся к исходному коду, где вы можете найти:

 function on( elem, types, selector, data, fn, one ) {
    ...

, где elem - ваш объект jQuery $('p'), types - "щелчок", selector - ноль, data - ваш function(e) и fn - ноль. Это приводит к:

elem.each( function() {
        jQuery.event.add( this, types, fn, data, selector );
    } );

Так что вы можете найти:

jQuery.event = {

    global: {},

    add: function( elem, types, handler, data, selector ) {
    ...

Где вы можете найти addEventListener:

elem.addEventListener( type, eventHandle, false );

В addEventListener обратный вызов имеет параметр event, который является нативным javascript. В jQuery обратный вызов - eventHandle, поэтому давайте найдем этот:

eventHandle = elemData.handle = function( e ) {

                // Discard the second event of a jQuery.event.trigger() and
                // when an event is called after a page has unloaded
                return typeof jQuery !== "undefined" &&
                    ( !e || jQuery.event.triggered !== e.type ) ?
                    jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
                    undefined;
            };

Итак, она возвращает функцию dispatch, поэтому теперь обратный вызов выглядит так: jQuery.event.dispatch.apply( eventHandle.elem, arguments ), где arguments равно e (исходное addEventListener событие). Так что найдите dispatch:

 dispatch: function( event ) {

            // Make a writable jQuery.Event from the native event object
            event = jQuery.event.fix( event );
            ...

Так что же это за событие.fix:

 fix: function( event ) {
            if ( event[ jQuery.expando ] ) {
                return event;
            }

            // Create a writable copy of the event object and normalize some properties
            var i, prop, copy,
                type = event.type,
                originalEvent = event,
                fixHook = this.fixHooks[ type ];

Здесь вы найдете

  event = new jQuery.Event( originalEvent );

    jQuery.Event = function( src, props ) {
    ...

Где определяется event, который передается как параметр click. Вы можете проверить это, добавив свойства на jQuery.Event.prototype. Вот так например:

jQuery.Event.prototype.prop = 'newProp';

Итак, подведем итог: событие в функции (event) является экземпляром jQuery.Event.

См.

console.log($('p').click);
console.log($('p').on);
console.log(jQuery.Event)
jQuery.Event.prototype.prop = 'test';

$('p').click(function(event){console.log(event.prop)});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<p>test</p>

Для Ajax это, вероятно, немного проще, но, опять же, если вы хотите точно знать, вы можете сделать немного больше, кроме как просмотреть исходный код.

0 голосов
/ 24 апреля 2018

Что касается вашего первого вопроса о параметре event, то event - это ваш щелчок. Он никогда не будет явно объявлен как обычная переменная. Это просто параметр, и в вашем примере щелчок - это событие.

Что касается вашего вопроса ajax, параметр data - это то, что возвращается из вашего бэкэнда после успешного поста. Например, я использую ajax-вызовы для отправки некоторой информации из моего интерфейса. Затем мой бэкэнд использует эту информацию для отправки данных во внешний интерфейс внутри этого success: function(data), например, JSON. JSON будет параметром data.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...