数年前、JavaScriptを書いている限り、AddEventListenerやAttachEventなど、高度なテクノロジーや機能のためではなく、基本的なタスクのみであり、その理由はさまざまなブラウザ間の違いによって引き起こされるいくつかの一般的に使用される関数を使用する必要があります。時間が経つにつれて、テクノロジーは絶えず改善されていますが、パフォーマンスや機能のいずれかで、ほぼすべてのWebプログラマーにとって不可欠なJavaScript機能がまだあります。
高周波呼び出しを防止する関数
このデバウンス関数は、イベント駆動型のタスクを実行する人にとって、パフォーマンス向上関数です。スクロール、サイズ、キー*、およびその他のイベントを使用してタスクをトリガーするときにダウンスケーリング関数を使用しない場合、大きな間違いを犯します。次のダウン周波数デバウンス関数のデバウンスは、コードを効率的にすることができます。
//関数を返します。それが呼び出され続ける限り、//トリガーされません。この関数は、// nミリ秒の要求を停止した後に呼び出されます。 「即時」が渡された場合、Trailing.Function Debounce（func、wait、interim）{var timeout; return function（）{var context = this、args = arguments; var Later = function（）{timeout = null; if（！interim）func.apply（context、args）; }; var callnow = intime &&！timeout; ClearTimeout（Timeout）; Timeout = setimeout（後で、待ちます）; if（callnow）func.apply（context、args）; };}; // usagevar myefficientfn = debounce（function（）{//すべての課税物}、250）; window.addeventlistener（ 'resize'、myefficientfn）;debounce関数は、指定したコールバック関数のみを特定の時間間隔で1回実行できるようにするため、実行頻度を減らします。このような制限は、高周波トリガーイベントに遭遇した場合に特に重要です。
時間/周波数サイクル検出機能を設定します
上記のデバウンス関数は、イベントの助けによってトリガーされます。しかし、時にはそのようなイベントが利用できないことがあるので、たまにそれをチェックするために自分自身の関数を書くことができます。
function Poll（fn、callback、err、timeout、interval）{var starttime =（new date（））。getTime（）; var pi = window.setinterval（function（）{if（math.floor（（（new date）.gettime（） - starttime） / 1000）<= timeout）{if（fn（））{callback（）;}} els {window.clearInterval（pi）; err（）;}}}}}}繰り返しの呼び出しを禁止し、実行を1回だけ許可する関数が一度
多くの場合、オンロードを使用して荷重が完了したときに1回だけ実行されるように制限するのと同じように、何らかのアクションを1回だけ実行する必要があります。次の関数により、操作を1回実行でき、繰り返し実行されません。
function and（fn、context）{var result; return function（）{if（fn）{result = fn.apply（context || this、arguments）; fn = null; } return result; };} // usagevar canonlyfireonce = and（function（）{console.log（ 'fired！'）;}）; canonlyfireonce（）; //「解雇！」 canonlyfireonce（）; // nadaこの一度関数は、提供する関数が1回だけ実行され、繰り返される実行を防ぐことができます。
getabsoluteurrlのリンクの絶対アドレスを取得します
リンクの絶対アドレスを取得することは、あなたが思うほど簡単ではありません。以下は、入力した相対アドレスに基づいて絶対アドレスを取得できる非常に実用的な機能です。
var getabsoluteurl =（function（）{var a; return function（url）{if（！a）a = document.createelement（ 'a'）; a.href = url; return a.href;};}）ここでは、A Tag HREFを使用して、完全な絶対URLを生成します。これは非常に信頼性が高くなります。
JavaScript関数がシステムネイティブ機能であるかどうかを判断する
多くのサードパーティのJSスクリプトは、新しい機能をグローバル変数に導入し、システムのネイティブ機能を上書きするものもあります。次の方法は、それがネイティブ機能かどうかを確認するためです。
;（function（）{// var var toString = object.prototype.tostring; //分解された機能のソースvar fntostring = function.prototype.tostring; // falueの内部 `[class]]`を解決するために使用されます。 。 +？constructor/] $ // regexpをテンプレートとしてコンパイルします。 .replace（/[。*+？^$ {}（）| [/] ////]/g、 '// $＆'）//「toString」の言及を `。*？`に置き換えます。 .replace（/function）。 Renative.test（fntostring.call（value））//ホストオブジェクトチェックへのフォールバック一部の環境は、//通常のネイティブパターンに準拠していないDOMメソッドを表しますiSnative;}（）; // usageisnative（alert）;この方法はそれほど簡潔ではありませんが、それでもタスクを完了することができます！
JavaScript Insertruleを使用して新しいCSSルールを作成します
CSSセレクター（document.queryselectorallなど）を使用してノデリストを取得し、各スタイルを順番に変更する場合があります。実際、これは効率的なアプローチではありません。 JavaScriptを使用して新しいCSSスタイルルールを作成するための効率的なアプローチです。
//より良いシートのビルドシートシート=（function（）{// build style var style = document.createelement（ 'style'）; style.setattribute（ 'media'、 'screen'）; style.appendChild（document.createTextNode（ ''））; document.head.appendChild（style）; style.sheet.cssrules.length）;}これらのプラクティスは非常に効率的です。 AJAXを使用して新しいHTMLをロードする場合など、いくつかのシナリオでは、新しくロードされたHTMLコンテンツを操作する必要はありません。
Webページ要素に特定の属性とスタイルMatchesselectorがあるかどうかを判断する
関数Matchesselector（el、selector）{var p = element.prototype; var f = p.matches || p.webkitmatchesselector || p.mozmatchesselector || p.msmatchesselector || function（s）{return [] .indexof.call（document.queryselectorall（s）、this）！== -1; }; return f.call（el、selector）;} // usagematchesselector（document.getelementbyid（ 'mydiv'）、 'div.someselector [some-aTtribute = true]'）これらの7つのJavaScript関数は、すべてのWebプログラマーがそれらの使用方法を知っている必要があることです。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。