JavaScript 最もよく使用されるカスタム関数 10 個 [推奨]_JavaScript スキル

(10)addEvent
インターネット上で最も人気のあるバージョンは、Scott Andrew のバージョンです。かつて JavaScript コミュニティでコンテストが開催されていたと言われています (このイベントは、『Pro Javascript Techniques』の 100 ページにあります)。 PPK の閲覧 Web サイトではイベントの追加と削除の機能を求めていましたが、彼が優勝しました。以下は彼の実装です:

コードをコピー コードは次のとおりです:

function addEvent( elm, evType , fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true; >else if (elm.attachEvent) {
var r = elm.attachEvent('on' evType, fn);//IE5
return r;
}
else {
elm[ 'on' evType] = fn;//DOM 0
}
}

以下はディーン・エドワーズ版です

コードをコピーします コードは次のとおりです:

// addEvent/removeEvent、Dean Edwards 著、2005

// Tino Zijdel からの入力
// http://dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, handler) {
//一意のイベント ID ごとのイベント ハンドラー
if (!handler.$$guid) handler.$$guid = addEvent.guid ;
//要素のイベント タイプのハッシュ テーブルを作成します
if (! element.events) element. events = {}; //「要素/イベント」のペアごとにイベント ハンドラーのハッシュ テーブルを作成します。
var handlers = element.events[type]; handlers) {
handlers = element.events[type] = {};
//既存のイベント ハンドラー (存在する場合) を保存します
if (element["on" type]) {
handlers[ 0 ] = element["on" type];
}
}
//イベント ハンドラー関数をハッシュ テーブルに保存します
handlers[handler.$$guid] = handler; / /すべての作業を行うグローバル イベント ハンドラーを割り当てます
element["on" type] = handleEvent;
}//一意の ID の作成に使用されるカウンター
addEvent.guid = 1;
function RemoveEvent(element, type, handler) {
//ハッシュ テーブルからイベント ハンドラー関数を削除します
if (element.events && element.events[type]) {
delete element.events[ type][handler.$$guid];
}
};
function handleEvent(event) {
var returnValue = true
// イベント オブジェクトをキャプチャします (IE はグローバル イベントを使用します) object)
event = events || fixEvent(window.event);
//イベント処理関数のハッシュ テーブルへの参照を取得します
var handlers = this.events[event.type] ; 🎜>//各ハンドラー関数を実行します
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) = == false ) {
returnValue = false;
}
return returnValue;
//IE のイベント オブジェクトにいくつかの「不足している」関数を追加します
function fixEvent(event) ) {
//標準の W3C メソッドを追加します
event.preventDefault = fixEvent.stopPropagation;
return イベント; = function() {
this.returnValue = false;
fixEvent.stopPropagation = function() {

};
この関数は非常に強力で、IE のこのポインティング イベントが常に最初のパラメーターとして渡される問題を解決し、クロスブラウザーも問題ありません。

さらに、HTML5 ワーキング グループのバージョンも大切にしました:





コードをコピー


コードは次のとおりです:

var addEvent=(function(){
if(document.addEventListener){
return function(el,type,fn){ if( el.length) { for(var i=0;iaddEvent(el[i],type,fn);

}else{ el.addEventListener(type,fn,false); } }else{ return function(el,type,fn){ if(el.length) { for(var i=0;iaddEvent(el[i],type,fn);

}
}else{
el. attachEvent('on ' type,function(){
return fn.call(el,window.event);
});
}
}
}); ();



(9) addLoadEvent()

この関数については以前に説明しましたが、主要なライブラリは基本的に少し遅いです。それを使用して domReady のバージョンを実装します。以下は Simon Willison の実装です:




コードをコピー


コードは次のとおりです:


var addLoadEvent = function( fn) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {

window.onload = fn;
window.onload = function() { oldonload() }
}

;
(8) getElementsByClass()
私は収集癖があり、多くのバージョンを手元に持っていますが、最終的には自分でブレインストーミングを行って実装しました。以下は私の実装です:

コードをコピー コードは次のとおりです:

var getElementsByClassName = function (searchClass , ノード,タグ) {
if(document.getElementsByClassName){
return document.getElementsByClassName(searchClass)
}else{
node = ノード ||
tag =タグ || "*";
varclasses = searchClass.split(" "),
elements = (tag === "*" && node.all) : node.getElementsByTagName(tag) 、
パターン = []、
returnElements = []、
現在、
一致;
var i = class.length
while(--i >= 0) {
patterns.push("(^|\s)" クラス[i] "(\s|$)"));
var j = elements.length; >while( --j >= 0){
current = elements[j];
match = false;
for(var k=0, kl=patterns.length; kmatch = pattern[k].test(current.className);
if (!match) Break;
if (match) returnElements.push(current); (7) cssQuery()

エイリアスは getElementsBySeletor で、Dean Edwards によって最初に実装されました。 Prototype.js 、 JQuery 、およびその他のクラス ライブラリには対応する実装があり、その中でも JQuery は $() セレクターに統合されており、その評判は以前のものを上回っています。ただし、IE8 などの最先端のブラウザでは、querySelector メソッドと querySelectorAll メソッドが既に実装されており、IE6 と IE7 が廃止されると、それらは役に立たなくなります。 Wuyou にはその実装原理の説明があります。長すぎるのではみ出さないので詳しくは原作者サイトをご覧ください。

(6) toggle()

は DOM 要素を表示または非表示にするために使用されます。

コードをコピーします

コードは次のとおりです。
function toggle(obj) {
var el = document.getElementById(obj);

if ( el.style.display != 'none' ) { el.style.display = 'none'; else { el .style.display = ''; } }

(5) insertAfter()

DOM は insertBefore のみを提供します。私たちにとって必要なinsertAfterを自分で実装してください。しかし、Firefox を除くすべてのブラウザがこのメソッドを実装するようになったので、insertAdjacentElement の方が良い選択だと思います。 Jeremy Keith のバージョンは次のとおりです。




コードをコピー

コードは次のとおりです。
function insertAfter(親、ノード、参照ノード) {
parent.insertBefore(node,referenceNode.nextSibling);
}

(4) inArray() は判定に使用 配列に特定の値が存在するかどうかを確認します。 以下のメソッドは Prototype クラス ライブラリから取得されます。

コードをコピー

コードは次のとおりです。
Array.prototype.inArray = function (value ) {
for (var i=0,l = this.length ; i if (this[i] === value) {

return true; } } return }; 別のバージョン:

コードをコピーします


コードは次のとおりです。


var inArray = function (arr,value) {

for (var i=0,l = arr.length ; i if (arr[i] === 値) {
return

} } return }; 🎜> (3) getCookie()、setCookie()、deleteCookie() BBS や商用 Web サイトで頻繁に使用されるはずです。ユーザーにログインするためにパスワードの入力を求める理由はありません。毎回。自動ログイン機能を実装するにはCookieを使用する必要があります。

コードをコピー


コードは次のとおりです:

function getCookie( name ) {
var start = document.cookie.indexOf( name "=" );
var len = 開始名.長さ 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) は null を返します。
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}
function setCookie( name, value, Expires, path, domain, secure ) {
var today = new Date();
today.setTime(today.getTime() );
if (期限切れ) {
期限切れ = 期限切れ * 1000 * 60 * 60 * 24;
}
varexpires_date = new Date(today.getTime() (expires) );
document.cookie = name '='scape( value )
( ( 期限切れ ) ? ';expires='expires_date.toGMTString() : '' ) //expires.toGMTString()
( ( path ) ? ';path=' パス : '' )
( ( ドメイン ) ? ';ドメイン=' ドメイン : '' )
( ( セキュア ) ? ';セキュア' : '' );
}
function deleteCookie( name, path, domain ) {
if ( getCookie( name ) ) document.cookie = name '='
( ( path ) ? ';path=' path : '')
( ( ドメイン ) ? ';ドメイン=' ドメイン : '' )
';期限切れ=木曜日、1970 年 1 月 1 日 00:00:01 GMT';
}

（2）getStyle() と setStyle()
のすべての UI コントロールの存在する関数、自動的に配置形式と取得形式。短く写すこともできますが、長く写すこともできますが、要精确取得样式、一字：难！その近傍の currentStyle 会が返す auto，inhert， ' ' 等让你哭笑不得值，这还没有上 IE 怪奇癖モード带来的难度呢！バージョン:

复制代代码如下:

function setStyle(el,prop,value ){
if(prop == "opacity" && ! "v1"){
//IE7 bug:filter 滤镜要求 hasLayout=true 方可执行（否则没有效果）
if (!el .currentStyle || !el.currentStyle.hasLayout) el.style.zoom = 1;
prop = "フィルター";
if(!!window.XDomainRequest){
value ="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" value*100 ")";
}else{
value ="alpha(opacity=" value*100 ")"
}
}
el.style.cssText = ';' (小道具「:」値);
}
function getStyle(el, style){
if(! "v1"){
style = style.replace(/-(w)/g, function(all, letter){
リターンレター.toUpperCase()
});
return el.currentStyle[スタイル];
}else{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}

有关setStyle还可看我另一
（1）$()
は名前に設定されており、最も重要な関数の数は省略可能です。最後に Prototype.js によって実現されましたが、洪門の荒い時間に続いて起こる珍事であり、多数の種類があります。 >
代码如下:

function $() { var elements = []; for (var i = 0; i var element = argument[i]; if (typeof element == 'string')

element = document.getElementById(element);

if (arguments.length == 1)
要素を返します。
elements.push(要素);
}
要素を返します。
}