実用的なJavascriptのコード（翻訳）

オリジナルます。http：//www.bestdesigntuts.com/10-time-saving-javascript-code-snippets-for-web-developers

1.同じ高さまたは幅

VAR getMaxHeight =関数（$エルムズ）{
　　VARのmaxHeight = 0。
　　$ elms.each（関数は（）{
　　　　//いくつかのケースでは、outerHeight（）の代わりに使用することもできます
　　　　VARの高さ= $（この）.heightを（）;
　　　　場合（高さ>のmaxHeight）{
　　　　　　のmaxHeight =高さ;
　　　　}
　　}）;
　　maxHeightを返します。
}。

2.日付 - 日付の検証を確認します

関数isValidDate（値、userFormat）{
　　// 設定し、デフォルトのフォーマット形式が提供されない場合 
　　userFormat = userFormat || 'MM / DD / YYYY';
　　//は、カスタム除外することで、区切り文字を見つける
　　// 月、日、年文字の
　　VaRの区切り文字を= /[^mdy]/.exec(userFormat)[0 ];
　　// 月、日、年を持つ配列を作成します
　　// 私たちは、インデックスによってフォーマット順序を知っている
　　VAR theFormat = userFormat.split（区切り文字）。
　　// ユーザの日付からアレイ作成
　　VAR theDate = value.split（デリミタ）

　　関数ISDATE（日付、フォーマット）{
　　　　VARM、D、Y、I = 0、LEN = format.length、F。
　　　　用（; iはLEN <I ++はI {）
       　　、F = [i]のフォーマット。 
     　 　 もし（/m/.test(f））、M = 日付[I]。
     　    もし（/d/.test(f））、D = 日[I]。 
     　　  もし（/y/.test(f））Y = 日付[I];     
　　} 
   リターン（M> 0 && M <13 && Y && y.length === 4 && D> 0 && D <=（新しい日付（Y、M、0 ））のgetDate（）。 ）。
　　// それは月の有効な日だかどうかをチェック
　　} 
　　戻りISDATE（theDate、theFormat）。
}

3.ブレークポイント-Setブレークポイントを設定します

機能isBreakPoint（BP）{
     // あなたのCSSに設定されたブレークポイント
    のvar BPS = [320、480、768、1024 ]。
    VAR = W $（ウィンドウ）.width（）;
    VARの最小、最大、
    ため（VAR I = 0、L = bps.length; iがLに<; Iは++ ）{
          場合（BPS [I] === BP）{ 
              分 = BPS [I-1] || 0 ; 
              最大 = BPS [i]は、 
              破ります;    
         }   
     } 
    戻り <= W分> W && マックス。
}

4.テキストを強調

JavaScriptライブラリの数は、テキストを強調表示するために用意されています。しかし、それを行うには非常に簡単な方法があります：

機能ハイライト（テキスト、単語、タグ）{

//デフォルトのタグなしタグが提供されていない場合は
、タグ=タグ|| 'スパン';

VAR I、LEN = words.length、再;
{（iは++; iがLEN <I = 0）のための
すべての一致を強調表示する//グローバル正規表現
=新しい正規表現（単語[i]は、G ''）を再。
もし（re.test（テキスト））{
テキスト= text.replace（再、 '<' +タグ+」クラス=」ハイライト」> $＆ '）;
}
}
テキストを返します。
}

5.アニメーション効果

あなたのテキストに面白いアニメーション効果を提供するために探しですか？この目的のために、次のコードスニペットを使用します。

$ .fn.animateText =関数（遅延、のklass）{
VARテキスト= this.text（）。
VARの手紙= text.split（」）;
this.each（関数（）{戻り
、これは$（この）= VAR $を
$ this.html（text.replace（/./ G、 ' $＆ '））;
$ this.find（' span.letter'）を.each（関数（I、EL）{
たsetTimeout（関数（）{$（EL）.addClass（のklass）;}、遅延* I）;
}）;
}）;
}。

6.フェージングの要素

コンポーネントのグループは、このコードスニペットを使用してフェードさせることができます。

$ .fn.fadeAll =関数（OPS）{
= $ .extend O VAR（{
遅延：500、//要素間の遅延は
速度：500、//アニメーションの速度の
容易さ： 'スイング' //他の必要緩和プラグイン
}、OPSを）;
変数$エル=この;
（VAR I = 0、D = 0、L = $ el.lengthため、I $ el.eq（I）.delay（D）.fadeIn（o.speed、o.easeは）;
}
$ ELを返します;
}

7.カウントのクリック数

要素がクリックされた回数をカウントする必要があります。次のコードは、コードを複雑にすることなく、それを行うには、次のことに役立ちます。

$（要素）
.DATA（ 'カウンタ'、0）//ゼロでカウンタを開始
.click（関数（）{
VARカウンタ= $（この）.DATA（ 'カウンタ'）; //取得
$（この）.DATA （ 'カウンタ'、カウンター+ 1）; //設定
//は何かを行います...
}）;

8.埋め込みのYouTube

ここではカスタムパラメータと一緒にYouTubeの動画を埋め込むためのコードは次のとおりです。

関数embedYoutube（リンク、OPS）{

= $ .extend O VAR（{

幅：480、

高さ：320、

params：」

}、OPS）。

ID = /\?v\=(\w+)/.exec(link)[1]でした。

リターン「<IFRAMEのスタイル=」表示：ブロック;」 '+

"タイプ=」text / htmlの」 '+

"幅=」 '+ o.width +'」高さ=」」+ o.height +

'『SRC =』 http://www.youtube.com/embed/' + ID + '？' + o.params +

「＆＃038;のwmode =透明」FRAMEBORDER =」0 "/> ';

}

9.アクティブなメニューを作成します。

一つは、アニメーションの方法でメニューを生成するには、次のスクリプトを利用することができます。ドロップダウンリストなどとしてメニューを作成する方法はいくつかありますが、さらに多くの。

関数makeMenu（項目、タグ）{

タグ=タグ|| [ 'UL'、 'リー']。//デフォルトのタグ

VaRの親=タグ[0];

VARの子=タグ[1];

VaRの項目、値=「;

{（; iはLを<I ++がVAR I = 0、L = items.length）のために

項目=項目[I]。

//別々の項目と値値が存在する場合

IF（/:/.test(item））{

項目=項目[I] .split（ '：'）[0];

値=項目[I] .split（ '：'）[1]。

}

//タグ内のアイテムをラップ

項目[I] = '<' +子供+」「+

存在する場合（値&&「の値=」 '+値+'」 '）+は、'> '+ //値を追加します

アイテム+ '</' +子供+ '>';

}

リターン '<' +親+ '>' + items.join（」）+ '</' +親+ '>';

}

テキストの10削減

任意のテキストの抜粋は、このコードの用途に特定の長さを短くすることができます。

関数抜粋（NWORDS STR）{

VaRの言葉= str.split（ ''）;

words.splice（NWORDS、words.length-1）。

リターンwords.join（」「）+

（words.length == str.split（」「）.LENGTH？ '＆hellip;'：！「）;

}

ます。https：//www.cnblogs.com/JoannaQ/p/3284416.htmlで再現