JavaScriptはますます人気が高まっています。フロントエンド開発の最初の選択肢となっています。 JavaScript言語に基づいてNodeJSを使用すると、高性能バックエンドサービスを開発することもできます。 JavaScriptがハードウェアプログラミングの分野に登場するのを見ました。 JavaScriptは、徐々にオールラウンドの開発言語に進化しています。
しかし、JavaScriptをうまく使用するのは簡単ではありません。構文の習得と高品質のコードの書き方を知っていることに加えて、ほぼすべてのプロジェクトで遭遇するニーズシナリオを解決する方法を理解する必要があります。たとえば、日付の審査、テキストの強調表示、キャラクターの数を制限するなど。システム全体が肥大化し、システムのパフォーマンスにも影響します。私のアプローチは、これらの一般的なJavaScriptスニペットを収集して使用し、必要に応じて最初に使用することです。以下は、私が収集した10個の実用的なJavaScriptコードです。それらに基づいて、より強力なJSプラグインまたは機能機能を作成することもできます。
1.日付が有効かどうかを判断します
JavaScriptに含まれる日付関数はまだ単純すぎており、実際のプロジェクトで異なる日付形式を解析して判断するニーズを満たすことは困難です。 jQueryには、日付関連の処理を簡単にするためのサードパーティライブラリもありますが、巨大なサードパーティライブラリを導入せずに非常に単純な機能が必要になる場合があります。現時点では、次の日付検証コードを使用できます。これにより、日付形式をカスタマイズして日付の有効性を確認できます。
function isvaliddate（value、userformat）{// default formatが提供されていない場合、userformat = userformat || 'mm/dd/yyyy'; // //月、日、年の文字を除外してカスタムデリミターを見つけますvar delimiter =/[^mdy ]/.exec(userformat) [0]; //月、日、年に配列を作成する//インデックスVar format = userformat.split（delimiter）によるフォーマット順序がわかります。 //ユーザー日付から配列を作成するvarthedate = value.split（delimiter）;関数isdate（日付、形式）{var m、d、y、i = 0、len = format.length、f; for（i; i <len; i ++）{f = format [i]; if（/m/.test(f））m = date [i]; if（/d/.test(f））d = date [i]; if（/y/.test(f））y = date [i]; } return（m> 0 && m <13 && y && y.length === 4 && d> 0 && //それが月の有効な日であるかどうかを確認しますd <=（new Date（y、m、0））。getDate（））; } return isdate（thedate、theformat）;}使い方：
11月に31日間ないため、次の呼び出しがfalseを返します
isvaliddate（ 'dd-mm-yyyy'、'31/11/2012 '）
2。一連の要素の最大幅または高さを取得します
次の機能は、動的なレイアウトを実行する必要がある開発者にとって非常に便利です。
var getmaxheight = function（$ elms）{var maxheight = 0; $ elms.each（function（）{//場合によっては、bar height = $（this）.height（）; if（height> maxheight）{maxheight = height;}}）を代わりにbar height = $（this）.height（）;を使用する場合があります。 maxheightを返します;};使い方：
$（elements）.height（getmaxheight（$（elements）））;
3。テキストを強調表示します
ハイライトテキストの機能を実装できるJQueryのサードパーティライブラリがたくさんありますが、この関数を実装するには、次の小さなjavaScriptコードを使用することを好みます。それは非常に短く、私のニーズに応じて柔軟に修正することができ、自分でハイライトスタイルを定義できます。次の2つの機能は、プラグインを強調表示する独自のテキストを作成するのに役立ちます。
関数ハイライト（テキスト、ワード、タグ）{//タグが提供されていない場合のデフォルトタグタグ=タグ|| 'スパン'; var i、len = words.length、re; for（i = 0; i <len; i ++）{//すべての一致を強調するグローバルなregex re = new regexp（words [i]、 'g'）; if（re.test（text））{text = text.replace（re、 '<' + tag + '> $＆</' + tag + '>'）; }} return text;}また、ハイライト付き関数も必要です。
function unhighlight（text、tag）{//タグが提供されていない場合はデフォルトタグ= tag || 'スパン'; var re = new regexp（ '（<'+tag+'。+？> | <//'+tag+'>）'、 'g'）; text.replace（re、 ''）;}を返す使い方：
$（ 'p'）。html（highlight（$（ 'p'）。html（）、// text ['foo'、 'bar'、 'baz'、 'hello world']、//「強い」// customタグを強調する単語またはフレーズのリスト）;
4。テキストモーション効果
すべての単語が移動できるように、テキストの段落に動きを追加したい場合があります。次のjQueryプラグインコードを使用して、この効果を実現できます。もちろん、より良い結果を達成するには、CSS3トランジションスタイルを組み合わせる必要があります。
$ .fn.animateText = function（delay、klass）{var text = this.text（）; var letthes = text.split（ ''）; return this.each（function（）{var $ this = $（this）; $ this.html（text.replace（/./ g、 '<span> $＆</span>'））; $ this.find（ 'span.letter'）。各（function（i、el）{setimeout（function（）{$（）{$（）; deay * i}; }）;使い方：
$（ 'p'）。animateText（15、 'foo'）;
5。要素を1つずつ非表示にします
次のjQueryプラグインは、設定したステップの長さ（間隔時間）に応じて、要素のグループを1つずつ非表示にできます。リロードリスト要素で使用すると、良い結果が得られます。
$ .fn.fadeall = function（ops）{var o = $ .extend（{delay：500、//要素間の遅延速度：500、//アニメーション速度容易さ： 'swing' // other exceedプラグイン}、ops）; var $ el = this; for（var i = 0、d = 0、l = $ el.length; i <l; i ++、d+= o.delay）{$ el.eq（i）.delay（d）.fadein（o.speed、o.ease）; } $ elを返します;}使い方：
$（elements）.fadeall（{delay：300、speed：300}）;
6。テキストの単語の数を制限します
以下のスクリプトでは、指定された文字の長さに応じてテキストを傍受できます。テキストが傍受されると、楕円が自動的に続きます。
関数抜粋（str、nwords）{var words = str.split（ ''）; words.splice（nwords、words.length-1）; return words.join（ ''） +（words.length！== str.split（ ''）.length？ '…'： ''）;}7.対応するレイアウトの現在の適応性を決定します
多くのデザインでは、さまざまなデバイス上のウェブサイトまたはアプリケーションの表示に適応するために、レスポンシブレイアウトを採用しています。多くの場合、現在コードにある画面適応を決定する必要があります。
関数はbreakpoint（bp）{// css var bps = [320、480、768、1024]で設定したブレークポイント。 var w = $（window）.width（）; var min、max; for（var i = 0、l = bps.length; i <l; i ++）{if（bps [i] === bp）{min = bps [i-1] || 0; max = bps [i];壊す; }} return w> min && w <= max;}使い方：
if（is breakpoint（320））{// 320以下のブレークポイント} if（isbreakpoint（480））{// 320〜480}の間のブレークポイント}…8。グローバルカウント
一部のゲームまたは広告シナリオでは、ユーザーが現在のページのボタンをクリックする回数を記録する必要があります。この時点で、jqueryの.data（）関数を使用して処理できます。
$（element）.data（ 'counter'、0）// zeroでカウンターを開始します。click（function（）{var counter = $（this）.data（ 'counter'）; // get $（this）.data（ 'counter'、counter + 1）; // set //他のことをします...}}）;9。Youkuビデオを埋め込みました
関数empedyouku（link、ops）{var o = $ .extend（{width：480、height：320、params： ''}、ops）; var id = //?v/=(/w+)/.exec(link) [1]; return '<embed applaidfullscreen = "true" id = "embedid" quality = "high" align = "middle alscriptaccess =" allight "type =" application/x-shockwave-flash "src ="'+id+'？'+o.ops "';}}使い方：
empedyouku（ 'http://static.youku.com/v/swf/qplayer.swf'、{'wintype = adshow＆videoids = xmte3nzq0ntky＆isautoplay = false＆isshowrelatedvideo = false'}）;10。動的メニューまたはドロップダウンリストを作成します
多くのシナリオでは、メニュー、ドロップダウンリスト、またはアイテムを動的にリストする必要があります。以下は、上記の機能を実装する最も基本的なコードの一部であり、実際のニーズに応じてそれに応じて拡張できます。
function makemenu（items、tags）{tags = tags || ['ul'、 'li']; //デフォルトタグvar parents = tags [0]; var child = tags [1]; var item、value = ''; for（var i = 0、l = items.length; i <l; i ++）{item = item [i]; //項目と値が存在する場合は、（/:/.test(item））{item = items [i] .split（ '：'）[0]; value = items [i] .split（ '：'）[1]; } //タグ項目でアイテムをラップします[i] = '<'+child+''+（value && 'value = "'+value+'"'）+'>'+//値の場合は値+'</'+child+'>'; } return '<' + parent + '>' + items.join（ ''） + '</' + parent + '>';}使い方：
//ドロップダウンSelect MonthMakemenu（['1月：Jan'、 'February：February'、 'March：mar']、// item：value ['select'、 'option']）;
上記は、これらの実用的なJavaScriptコードスニペットのほんの一部です。また、このような基本的なコードスニペットを自分で収集または作成することに注意を払うことをお勧めします。多くのプロジェクトで使用したり、いくつかの変更を通じてより完全な機能を提供したりできます。これらのコードスニペットを使用すると、多くの開発時間を節約できます。