私の独自の要件を関数に組み込むために、非圧縮jQueryライブラリを編集するにはどうすればよいですか？

Question

私は、特定の要件を関数に含める必要があるタスクを持っています。 jQueryのCDNコードは、私たちが使用する通常の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);  
    }); 
}); 

Answer 1

最初に、ライブラリのソースを決して修正することはありません。そうすると、コードの特定のバージョンにつながります。作者がライブラリを更新した場合、作成した追加情報が破損します。追加機能を作成する場合は、独自の拡張メソッドまたはプロトタイプを作成します。

しかし、あなたが必要とすることを行うには、単にイベントを発生させた要素を参照するだけでコードを修正する必要があります。これを行うには、ハンドラ関数内でキーワードを使用します。このお試しください：私の経験から

$("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 />

Answer 2

を、何をやろうとしていることは推奨されません。ライブラリがメンテナンスされていない場合を除いて、githubリポジトリからフォークを取得し、変更を追加してメンテナンスできるようにします。

この場合、jQueryは独自のコードを追加するソースを編集することは悲惨です。代わりに、提供されているプラ​​グインアーキテクチャを使用して、既存のコードに機能を追加します。

この機能の概要については、公式ドキュメントを参照してください。

How to create a basic jQuery plugin.