Блог

Главная - Вопросы по программированию - Как я могу отредактировать несжатую библиотеку jQuery, чтобы добавить свои собственные требования в функцию?

Как я могу отредактировать несжатую библиотеку jQuery, чтобы добавить свои собственные требования в функцию?

#jquery #cdn

#jquery #cdn

Вопрос:

У меня есть задача, в которой я должен включить конкретное требование в функцию. CDN-код jQuery выглядит немного сложным для понимания по сравнению с обычным jQuery, который мы используем.

Проблема в том, что когда я сосредотачиваюсь на чем-то вроде input поля, оно должно не просто фокусироваться на нем, но и возвращать свою top left позицию и . Предполагается, что эта функциональность должна быть включена в файл CDN. Затем, используя обычную программу, я должен ее вызвать.

 $(document).ready(function(){
    $("input").focus(function(){
        $("input").css("background", "lightblue");
        var p = $( "input" );
        var position = p.offset();
        $("div").text( "left: "   position.left   ", top: "   position.top );       
    });
});

Комментарии:

1. Ваш заголовок кажется совершенно не связанным с тем, что вы на самом деле пытаетесь сделать.

Ответ №1:

По моему опыту, то, что вы пытаетесь сделать, не рекомендуется. Если библиотека не поддерживается, вы можете получить fork из ее репозитория на github, а затем добавить свои изменения, чтобы вы могли ее поддерживать.

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

Просмотрите официальную документацию, чтобы получить обзор этой функции.

Как создать базовый плагин jQuery.

Ответ №2:

Во-первых, никогда не изменяйте исходный код библиотеки. Если вы это сделаете, это свяжет вас с этой конкретной версией кода. Если автор обновляет библиотеку, они нарушают сделанные вами дополнения. Если вы хотите создать дополнительную функциональность, создайте свои собственные методы расширения или прототипы.

Тем не менее, чтобы сделать то, что вам требуется, вам просто нужно изменить свой код, чтобы ссылаться только на элемент, который вызвал событие. Для этого используйте this ключевое слово в функции-обработчике. Попробуйте это:

 $("input").focus(function() {
  var $input = $(this).css("background", "lightblue");
  var position = $input.offset();
  console.log("left: "   position.left   ", top: "   position.top);
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />
<input />