フロントエンド開発に必要な共通ツール機能のまとめ

フロントエンド開発に必要な共通ツール機能のまとめ

1. 時刻の書式設定とその他の方法

moment.jsライブラリファイルの使用をお勧めします

2. テンプレート、ループ、MAPなどのメソッドの使用

underscode.js のメソッド

3. フォームをJSONにシリアル化する


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

$.fn.serializeJson = 関数() {
var serializeObj = {};
var 配列 = this.serializeArray();
var str = this.serialize();
$(配列).each(関数() {
if (serializeObj[this.name]) {
$.isArray(serializeObj[this.name]) の場合 {
serializeObj[this.name].push(this.value);
} それ以外 {
serializeObj[this.name] = [serializeObj[this.name], this.value];
}
} それ以外 {
シリアル化Obj[this.name] = this.value;
}
});
serializeObj を返します。
};

4. ... 充填を使用した文字列インターセプト


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

String.prototype.strcut = 関数(数値) {
var 長さ = this.length;
var tmp = this.substr(0, 数値);
if (this.length > 数値) {
tmp + = "…";
}
tmp を返します。
}

5. 時間の形式はxxxx日、xxx分前、日付です


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

Date.prototype.Format = function(fmt, current) {
if (現在) {
var diff = current - this.getTime();
(差分 < 5 * 60 * 1000)の場合{
「ただ今」を返します。
}
(差分 < 60 * 60 * 1000)の場合{
return (Math.floor(diff / (60 * 1000))) + "分前";
}
(差分 < 24 * 60 * 60 * 1000)の場合{
return (Math.floor(diff / (60 * 60 * 1000))) + "時間前";
}
(差分 < 30 * 24 * 60 * 60 * 1000)の場合{
return (Math.floor(diff / (24 * 60 * 60 * 1000))) + "日前";
}
(差分 < 12 * 30 * 24 * 60 * 60 * 1000)の場合{
return (Math.floor(diff / (30 * 24 * 60 * 60 * 1000))) + "一ヶ月前";
}
(差分>12 * 30 * 24 * 60 * 60 * 1000)の場合{
return (Math.floor(diff / (12 * 30 * 24 * 60 * 60 * 1000))) + "年前";
}
}
var o = {
"Y+": this.getFullYear(), //月
"M+": this.getMonth() + 1, //月
"d+": this.getDate(), //日
"h+": this.getHours(), // 時間
"m+": this.getMinutes(), // ポイント
"s+": this.getSeconds(), // 秒
"q+": Math.floor((this.getMonth() + 3) / 3), //四半期
"S": this.getMilliseconds() // ミリ秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
(変数 k が o の場合)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
fmt を返します。
};

6. URLの解析


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

関数parseUrl() {
var arr = location.search.split('?')[1].split('&');
var パラメータ = {};
(var i = 0, l = arr.length; i < l; i++) の場合 {
var パラメータ = arr[i].split('=');
パラメータ[パラメータ[0]] = パラメータ[1];
}
パラメータを返します。
}

7. パラメータを取得する


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

関数 getParameterByName(名前) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = 新しい RegExp("[\\?&]" + 名前 + "=([^&#]*)"),
結果 = regex.exec(location.search);
結果が null を返します。"" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

8. 関数スロットリングにより、リアルタイム検索機能などの頻繁なイベントトリガーがよりまばらになり、パフォーマンスが向上します。使用方法は、fnはイベント応答関数、delayは間隔時間、throttle(fn, delay)を呼び出してイベントに新しい関数を返すことです。


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

関数スロットル(fn, 遅延) {
var タイマー = null;
関数()を返す{
var コンテキスト = this、
args = 引数;
タイマーをクリアします。
タイマー = setTimeout(関数() {
fn.apply(コンテキスト、引数);
}、 遅れ);
};
}

9. フォームの複数送信を防ぐには、9のように新しい関数を返す


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

/**
* 複数回のクリックを防ぐ
*
* fnが完了したときに呼び出されるコールバック
* 関数 fn(イベント,終了) {
* (typeof end === "function") && end(); // 操作が完了しました
* }
*/function noRepeateTap(fn) {
var $obj;
関数(イベント)を返す{
$obj = $(これ);
($obj.data("loading") === "true") の場合 {
戻る;
}
$obj.data("読み込み中", "true").addClass('読み込み中');
fn.call(this, イベント, 関数終了() {
$obj.data("読み込み中", "").removeClass('読み込み中');
戻る;
});
}
}

例9


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

// イベントをバインドする
$(container).on('click', '.btn-cancel', noRepeateTap(cancel));
//イベント応答関数
関数キャンセル(イベント、終了) {
イベントをデフォルトにしない();
//非同期リクエストをシミュレートする
setTimeout(関数(){
end(); // 完了を通知するには、手動でインジェクション完了関数を呼び出す必要があります。この関数は、スタイルを調整するためにロードクラスクラスを自動的に追加し、完了後に自動的に削除します。
},5000)
}

<<:  Prometheusコンテナのデプロイメントのための実用的なソリューション

>>:  少なくともn日間連続してログインしているユーザーに対するSQLクエリ

推薦する

Centos7 に MySQL 8.0.23 をインストールする手順 (初心者レベル)

まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...

Zabbixを使用してOracleテーブルスペースの操作プロセスを監視する

0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...

Linux ファイルとユーザー管理の実践

1. /etc ディレクトリ内の、文字以外の文字で始まり、その後に文字と任意の長さのその他の文字が続...

MySQL 同期遅延が発生したときに Seconds_Behind_Master が 0 のままになる理由

目次問題の説明原理分析問題分析拡大する総括する問題の説明ユーザーはプライマリ データベースに対して変...

JavaScriptイテレータを学ぶ

目次導入js のイテレータはどのように見えるか反復プロトコル反復可能なプロトコルイテレータプロトコル...

Docker はキューとタスクのスケジューリングを実現するために Laravel アプリケーションをデプロイします

前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...

js のマクロタスクとマイクロタスクについての簡単な説明

目次1. JavaScriptについて2. JavaScript イベントループ3. マクロタスクと...

WeChatアプレットがシンプルな計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

血の写輪眼と輪廻眼の特殊効果コードを実現するためのHTML+CSS

結果 (完全なコードは下部にあります): 実装は難しくありませんが、繰り返しコードが多くなります。実...

DockerとFastDFSのインストールコマンドと使い方の詳しい説明

Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...

Linux で実行中のバックグラウンド プログラムを表示および終了する方法

Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...

友達やグループを見つけるためのJavaScriptのLayim

現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非...

React-vscode で jsx 構文を使用する際の問題と解決策

問題の説明プラグインをインストールした後、ES7 React/Redux/GraphQL/React...

ウェブページ作成のテスト問題を全て解けますか?

Web ページのデザインに関する質問です。すべてに答えられるでしょうか? 1. 単一選択の質問 (...

React 入門レベルの詳細なメモ

目次1. Reactの基本的な理解1. はじめに2. Reactの特徴3. Reactが効率的な理由...