システムフロントエンド開発に関すること_html/css_WEB-ITnose

はじめに: 私は最近、会社の新しい 3.0 スーパー マーケット フロントエンドの開発に参加する光栄に思いました。開発作業中にいくつかの問題に遭遇しました。みんなでフロントエンド^_^

概要 あまり多くはありません、そしてそれらは改善する必要があります。追加することを歓迎します...

質問 1: フロントエンドを開発するとき、< img> タグが空であるか、src 属性値が存在するが、サーバー側の画像が削除されると、ページの実行に影響する 2 つの問題が発生します。 '> 値が空であるため、ページが再ロードされ、すべてのリクエストが再実行され、ページの読み込み速度が大幅に低下します。サーバーの誤操作などの理由で画像が失われている場合、ブラウザ F12 で画像 URL を表示し、読み込みに失敗すると、ブラウザはエラーを報告します。深刻な場合は、UI が直接ブロックされます。上記の 2 つの状況について、私の個人的な提案は、画像が呼び出される場所に null 値の判定とデフォルトの画像表示を追加し、onerror 属性を使用して タグを追加することです。 onerror の使用時に指定されたデフォルトの画像も失われると、ブラウザはデフォルトの画像が見つかるまで、デフォルトの画像をループします。これを防ぐには、次のコード スニペットを使用します。属性 の場合、JS で this.onerror 属性を null に設定することもできます。

質問2: ページ上のドル記号の処理には、一般的に￥記号を使用してレンダリングを行っておりますが、現在判明している問題は、￥記号を使用すると互換性の問題(不完全な表示、不完全な表示など)が発生するということです。カーネルのバージョンが低い一部のブラウザでは表示されません)、この状況の発生頻度はそれほど高くありません

問題を防ぐために、ページ上の通貨記号の処理を文字エンコードまたは特殊記号の形式で表示できるようにすることをお勧めします。ブラウザの互換性の影響。

￥ 2.css を使用してフォント属性 font-family:Arial; を設定するか、Web ページで ¥ 記号を使用して表示します。 JDとタオバオをぜひご覧ください。

質問 3: ページ上のイベントの監視とバインドでは、HTML コードと JS コードが分離されるのが一般的ですが、このアプローチではイベントを直接バインドする現象が排除されないようです。とても便利ですが、いくつかの問題も伴います

(1)、Js は動作層を担当し、HTML は構造層を担当します。この 2 つを混在させることは、フロントエンドと一致しません。アーキテクチャ設計のアイデア

(2)、Js の記述 内部的には、後のメンテナンスに役立たず、メンテナンスコストが増加し、反復的な開発と機能拡張を実行できません

(3) HTML 構造で記述された Js 操作が多すぎます。 DOM ツリーの読み込みが妨げられ、ユーザー エクスペリエンスに影響します。

(4) 外部 JS は、圧縮、リクエストのマージ、帯域幅の使用量の削減に便利です (仕様に従って記述されています)。

HTML で書かれた Js と比較すると、外部 Js は複数の Htpp 接続を確立するだけで済みます。http ヘッダーの最適化は困難ですが、圧縮後のパフォーマンスの向上は欠点を上回ります。

------------------------------------------------ -------------------------------------------------- ------------------------私はゴージャスな境界線です--------------- --- ---------------------------------------------- --- ---------------------------------------------- --- -------------------------------

次は、webapi についての話をしましょう￣□ ￣｜｜

いつ最近 webapi を使用していましたが、単体テストを通じて webapi をデバッグした後、多くの問題を発見しました。ここで、その解決策を以下にまとめて共有します。

1. webapi には、データベースの CURD に対応する 4 つのリソース スケジューリング メソッドがあります。すべての GetXXX または PostXXX 関数に一致

webapi スケジューリング データベース操作

GetAsync--------->select

PostAsync-------->Insert

PutAsync--- --- ---->Update

DeleteAsync------>Delete

post と put の違いについて話しましょう。プロジェクトでは、post メソッドと put メソッドは、実際には両方のスケジュールに使用されます。同じ機能を実現できますが、put 後に返される結果は 1 つですが、post によって返される結果は、データベースでの update および add の実行後に返される影響を受ける行の数と組み合わせると、理解しやすいはずです。 -|

2. 作成者の API プロジェクトが 2.0 の場合、デフォルトで付属する一部のハイエンド DLL バージョン (シリアル化など) により、プログラムの Gload.cs で例外が発生し、バージョンが一致しません。

これについてはあまり言う必要はありませんが、私はこれに遭遇しました。解決策は、下位バージョンの DLL 参照を置き換えて、統一された方法で DLL ファイルを管理することです。

3.パラメータを渡す必要がある場合、より多くのパラメータがエンティティにカプセル化されます。パラメータが少ない場合は、接続が確立された後にパラメータを 1 つずつ渡すことは問題ないようです。 、オブジェクトを参照しない問題が発生します

。

デバッグ後、APIチャネルにはアクセスできるものの、取得したパラメータがnullになっていないことが分かり、アドレスを確認したところ問題はなかったのですが、ネットで調べてみると公式が推奨していることが分かりました。パラメーターを渡すときに [Frombody] マークを先頭に置くと、リクエストされた重みからデータを取得するように

API に指示され ([Frombody] は 1 つだけ存在できます)、追加後もプレイを続けることができます。 -；

追伸: [Frombody] キー値の形式でパラメーターを渡すと、値が取得されないため、データ内のキーをクリアして値のみを渡すことができます (詳細については、ぜひお知らせください) *、次の段落を追加します:

modules>

または、IIS の WebDAV Publishing サービスを削除します。

参考リンク:

http://www.dotblogs.com.tw/mantou1201/archive/2013/10/14/124074.aspx --api learning

http://www.liaodihen.com/Article/ 20140513061934963362.html --Frombody 説明

http://www.dotblogs.com.tw/mantou1201/archive/2013/10/14/124074.aspx --WebDav サービスの削除

何か間違っている、または不足しているものがあれば、追加してください！ 8-|

2015 年 12 月 5 日追加:

1. 前述の写真の手動処理方法を考慮すると、今日プロジェクトを整理しているときに、それが完璧ではないことがわかり、考えていませんでした。この問題は、プロジェクトの要件によって発生します。ただし、onerror 属性が呼び出された場合、画像の読み込みに失敗したときにこのイベントがトリガーされます。読み込みに失敗すると閲覧できない（srcが書き換えられる）ため、プロジェクトの実情に応じてこの方法を使用してください。