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) 要素。 events = {}; //「要素/イベント」のペアごとにイベント ハンドラーのハッシュ テーブルを作成します。
var handlers = element.events[type];
if (!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; (element, type, handler) {
//ハッシュテーブルからイベントハンドラー関数を削除
if (element.events && element.events[type]) {
delete element.events[type ][handler. $$guid];
}
};
function handleEvent(event) {
var returnValue = true;
//イベント オブジェクトをキャプチャします (IE はグローバル イベント オブジェクトを使用します) >event =event || 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.preventDefault;
return event;
fixEvent.preventDefault; {
this.returnValue = false;
fixEvent.stopPropagation = function() {
this.cancelBubble = true;この関数は非常に強力で、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){

(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); }
return returnElements;
}
}


(7) cssQuery()
エイリアスは、Dean Edwards によって最初に実装されました。 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,node,referenceNode) { 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 コントロールのすべてに存在する関数であり、セットアップ形式と取得形式を自動的に記述します。可用很長，但要精确取得样式，一字：难！ しかし我发现许多问题都是端的IE，微软的公開人员好像出来不打算给出getComputedStyle之関数，之近傍的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）$()
は名前に使用され、最大の関数であり、どの程度の流量を節約できるかを指定します。

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

function $() {
var 要素 = [];
for (var i = 0; i var element = argument[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
要素を返します。
elements.push(要素);
}
要素を返します。
}