私は最近不平を言っています。誰もが、数年前に比べてWebフロントエンドが非常に重くなっていることを知っています。さまざまなJSフレームワーク、さまざまなオブジェクト、および多くのプロジェクトで、パブリックモジュールが抽出されます。
これらのモジュールのUI表示は同じであり、違いはバックグラウンドロジックです。たとえば、企業旅行でビジネスを行っている場合、通常、コストセンターのJSパブリックモジュールがあります。顧客は、航空券を予約する際にこのコストセンターを埋めます。このコストセンターは、オンライン、オフライン、アプリなどの予約端に配布されています。これは、後の段階で顧客会社との毎月の決済にも便利です。
また、プロジェクトがより大きく、複雑になり、SOAになった後、多くの問題が発生することもわかっています。 Web内の理論と同じように、すべてのフロントエンドデータは信頼できないため、他のチームのインターフェイスデータは同じではありません。プロジェクトが若かったとき、それはそれほど充実していなかったので、ロジックエラーの場合にのみログを記録します。通常、通常のビジネスプロセスはめったに記録されません。結局のところ、情報ログは見苦しく見え、サーバーの帯域幅を消費し、Webのパフォーマンスをドラッグします。
しかし、プロジェクトは大きいです。ある日、プロジェクトで奇妙なバグに遭遇すると、不完全なログに依存し、最終的に肉眼でインターフェイスラインを追跡します。ただし、パラメーターが多すぎるため、インターフェイスパラメーターデータを正確に復元することは不可能です。ただし、それが間違いなくインターフェイスのリターンの問題であると100％確信していますが、完全なメッセージを取得することはできません。現時点では、インターフェイスプロバイダーを見つけることができません。当時私は無力でした。すべての行にログを持っている方が良いと思うなら、それは素晴らしいことです。
レッスンを学んだ後、プロセスログを記録する傾向がますます人気が高まり、最終的には年初に主要なイベントが引き起こされました。私は、Webバックエンドがこのようなものであると混乱した方法で多くのことを言ったので、現在のフロントエンドにログを記録する必要もありませんか？それはパブリックJSモジュールであるため、このモジュールはそれ自体でいくつかの方法をカプセル化している必要があり、サードパーティのプログラムに次のような独自のテキストノードを操作できるようにすることは絶対に不可能であることがわかっています。
コードコピーは次のとおりです。
<！ - 3番目のモジュール - >
会社：<入力タイプ= "テキスト" id = "company" value = "xxx Co.、Ltd。" />
従業員名：<入力タイプ= "テキスト" id = "username" value = "zhang san" />
<！ - >
<script type = "text/javascript">
//コストセンター
var costcenter =（function（）{
var company =（document.getElementById（ "Company"）|| ""）&& Document.getElementById（ "Company"）。value;
var username =（document.getElementById（ "username"）|| ""）&& document.getElementById（ "username"）。value;
var result = {
getInfo：function（）{
return {company：company、username：username};
}、
検証：function（）{
return boolean（company && username）;
}
};
返品結果;
}）（）;
</script>
操作を簡素化するために、サードパーティUIは会社名と従業員名にUIノードを提供し、コストセンタークラスをカプセル化して読書方法を提供します。私のスケジュールされたプログラムは、costcenter.getinfoを読むだけで、カプセル化にも役割を果たしていることがわかります。
しかし、問題はここで発生します。実際のプロジェクトでは、さまざまな理由により、コストセンターで値を取得することはできません。もちろん、それはまた、一般的なUIのバグかもしれません。
しかし、その時点では、値が実際に得られたかどうかはわかりませんでしたが、値が得られていなくても論理的には、原則として注文の提出を妨げることができませんでした。そのため、バグを徹底的に追跡するために、ログを記録するためにログセンターシングルトンクラスを書きました。通常、JSを使用してログを記録するこの方法があります。
<1> ajax
この方法は考えやすいですが、ネイティブXMLHTTPREQUESTを使用する場合は、ブラウザの互換性を考慮する必要があります。ただし、ネイティブが必要ない場合は、jQueryなどのサードパーティフレームワークに依存する必要があります。ただし、結局のところ、JQueryを使用していない多くの企業がまだあるため、実際のニーズに応じて使用する必要があります。
コードコピーは次のとおりです。
//ログセンター
var logcenter =（function（）{
var result = {
情報：function（title、message）{
// ajax操作
$ .get（ "http://xxx.com"、{"title"：title、 "message"：message}、function（）{
}、 "役職"）;
}
};
返品結果;
}）（）;
<2>画像
DOMには画像と呼ばれるオブジェクトがあるため、SRCをバックグラウンドURLを要求する目的に動的に割り当てることができます。同時に、タイトルとメッセージ情報をURLに渡す必要があります。 Image.srcへのこの動的な方法は、ブラウザの互換性の問題を考慮する必要はありません。これは非常に良いことです。
コードコピーは次のとおりです。
//ログセンター
var logcenter =（function（）{
var result = {
情報：function（title、message）{
// ajax操作
$ .get（ "http://xxx.com"、{"title"：title、 "message"：message}、function（）{
}、 "役職"）;
}、
info_image：function（title、message）{
//画像
var img = new Image（）;
img.src = "http://www.baidu.com?title=" + title + "＆message =" + message + "＆temp =" +（math.random（） * 100000）;
}
};
返品結果;
}）（）;
上記はこの記事の主な内容であり、今後も深く議論し続けます