「高品質のコードを書く - Web フロントエンド開発の実践方法」読書 Notes_html/css_WEB-ITnose

はじめに

ここ2週間、私はクローズド開発（プロジェクトメンバーが会議室で開発する）を採用している会社の新規プロジェクトに参加しており、夜遅くまで残業しているため時間がありません。オリジナルのブログを書くためのエネルギーを今日は共有します。この記事「高品質のコードを書く - Web フロントエンド開発を実践する方法」を読んでメモを取ります。

Text

1行をマスターしたければ、まず10行をマスターする必要があります。

フロントエンド開発の分野では、一つの専門性と複数の能力が非常に必要です。

テーブル レイアウトの欠点:

大量のコードと複雑な構造

タグのセマンティクスが不明瞭で、検索エンジンにとって不親切。

css レイアウト: div+css、または (x)html+css。

少量のコード、合理化された構造、新鮮なセマンティクス。

コードの量が少ないほど、ブラウザのダウンロード時間は短くなります

明確なセマンティクスは検索エンジンにとってより使いやすくなります。

まず HTML を決定し、セマンティック タグを決定してから、適切な CSS を選択します。

ブラウザは、タグのセマンティクスに基づいてデフォルトのスタイルを提供します。

Web ページのタグのセマンティクスが適切かどうかを判断する簡単な方法は、スタイルを削除して、Web ページの構造がよく整理され、秩序立っているかどうか、また読みやすいかどうかを確認することです。

Web ページの CSS 設定が DevTool で無効になっているかどうかをテストしますか?スタイルを削除した後、w3c 公式 Web サイトの効果をテストします。

タグ、特に h1 と h2 は検索エンジンの感度が高くなります。

ページ上のタグがデザインのニーズを満たせない場合、実装を支援するために div やspan などの非セマンティック タグが適切に追加されます。

テーブル レイアウトは 2 次元データの表示に適しています。

セマンティック タグを使用するときに注意する必要があるその他の問題:

非セマンティック タグ div および span の使用はできるだけ少なくしてください。

セマンティクスが明確ではなく、p または div のいずれかを使用できる場合は、p を使用してみてください。p にはデフォルトで上下のスペースがあり、スタイルを削除すると読みやすくなり、特殊な端末との互換性が向上します。 。

b、font、u などの純粋なスタイル タグを使用する代わりに、CSS 設定を使用します。意味を強調する必要があるテキストは、strong タグまたは em タグに含めることができます。

ファイルが分散しすぎたり、集中しすぎたりする問題に対する完璧な解決策はありません。実際の状況に基づいて適切に妥協する必要があります。

cssrest:

非推奨 * { margin: 0; padding: 0 }, 推奨されるものをリストします。 {margin:0; padding:0; color:#000; font-size:12px;} と記述することも推奨されません。これは CSS の継承を破壊するためです。

.fl { float: left; display: inline } ここで、display: inline は、IE6 の二重マージンのバグを解決するためのものです。

.zoom {zoom: 1 } は IE の独自プロパティであり、IE の hasLayout をトリガーするために使用されます。ズームが無効な場合、「position:relative」を設定して hasLayout をトリガーできます。

補足:

ブラウザのデフォルトのスタイルをリセットする、推奨: https://github.com/necolas/normalize.css

モジュールの分割:

モジュール間に同じ部分が含まれないようにしてください。同一の部分がある場合は、抽出して独立したモジュールに分割する必要があります。

モジュールは、再利用性を高めるために、数をできるだけ少なくしながら、できるだけシンプルにする必要があります。

キャメルケースは単語を区別するために使用され、下線は従属を示すために使用されます。例: .timeList-lastItem。

このスタイルの命名方法を学びましょう:

.fr { float: right; }

.w25 { width: 25%; }

より多くの合成を使用し、継承を減らします。

スタイル設定間に矛盾がある場合、最も重みの高いスタイルが使用されます。

HTMLタグの重み：1、クラスの重み：10、IDの重み：100。

重みが同じ場合は、最も近い定義原則が使用されます。

スタイルを簡単に上書きできるようにして保守性を向上させるには、CSS セレクターの重みをできるだけ低くする必要があります。

CSSハックの方法は、通常、セレクタープレフィックス方法とスタイル属性プレフィックス方法です。

タグの 4 つの状態は、l(link)ov(visited)e h(hover)a(active)te の順に定義されており、これが愛憎原則です。

ブロックレベル要素とインライン要素:

ブロックレベル要素は幅と高さの属性を設定できますが、インライン要素は幅と高さの属性の設定に影響しません。

ブロックレベルの要素では、マージンとパディングの属性を設定できます。インライン要素はマージンとパディングの水平方向を設定します。つまり、-left と -right は有効ですが、垂直方向の -top と -bottom は無効です。

表示属性を変更して、ブロックレベル要素とインライン要素を切り替えます。

hasLayout:

は、ボックス モデルを解析するために IE ブラウザーによって設計された独自の属性です。これは、もともと、インライン要素の hasLayout がトリガーされた場合に使用されるように設計されています。ブロックレベル要素のいくつかのプロパティを持ちます。

display: inline-block

インラインのブロックレベル要素。ブロックレベル要素の特性を持ちます。幅、高さ、マージン、およびパディングの値を設定でき、また、インライン要素の特徴: 排他的な行を占有しません。

は hasLayout をトリガーします。垂直方向の配置は *vertical-align: -10px を設定することで解決できます。

E6、IE7 およびその他のブラウザを display: inline-block と互換性を持たせるには、次のような問題があります。

inline 要素に対してのみ display: inline-block を実装できます。ブロックレベルの要素にはできません。

*vertical-align は IE のハックであり、これも不親切ですので、できれば使用しないでください。

IE6 と IE7 は、display: inline-block への CSS 設定をサポートしていませんが、実際には、IE6 と IE7 の CSS 解析エンジンにはまだ display: inline-block があります。たとえば、img タグと button タグの両方には、display: inline- があります。ブロックの特徴として、幅と高さを設定できますが、専用の行を占有しません。

float

は、通常のドキュメント フローの配置を変更し、周囲の要素に影響を与えます。

Position: ABS および float: left または float: right は、以前の要素のタイプに関係なく (display: none を除く)、要素は display: inline-block モード: you で表示されます。幅を高く設定できる場合、デフォルトの帯域幅は親要素を占有しません。

センタリング

水平センタリング

(1) テキストやピクチャなどのインライン要素の水平センタリング: text-align: centerを親要素に設定します
(2) 配置を決定するブロックレベル要素の水平センタリングwidth: 要素に margin-left: auto と margin-right: auto を設定します
(3) 幅が不確かなブロックレベルの要素を水平方向に中央揃えします:
I. テーブルの折り返しを使用し、margin: 0 auto を設定します。 利点: 賢いアプローチ。短所: 非セマンティックなタグが追加され、タグのネストレベルが深くなります。
II. 表示: inline/inline-block を使用します。 長所: シンプルで明確な構造。欠点: inline を使用すると、インライン要素になり、幅、高さなどの特定の機能が欠如します。
III. 親要素に対して、position:relative、set float、position:relative および left:50% を使用します。子要素の位置を :relative および left:-50% に設定します。利点: 明確な構造。欠点:position:relative にはいくつかの副作用が伴います。

垂直方向のセンタリング

(1) 親要素の高さが不確かなテキスト、画像、ブロックレベルの要素の垂直方向のセンタリング: これを実現するには、親コンテナに同じ上下のパディングを設定します。
(2) 親要素の高さによって決定される単一行のテキストの垂直方向の中央揃え: line-height: 親要素の高さ。
(3) 親要素の高さが決定されている複数行のテキスト、画像、およびブロック レベルの要素を垂直方向に中央揃えにします:
I. テーブルの折り返しを使用すると、デメリット: 非セマンティックなタグが追加され、ネスト レベルの数が増加します。
II. display: table-cell をサポートする IE8 と Firefox の場合は、display: table-cell とvertical-align: middle を使用して、それをサポートしない IE6-7 の場合は、親とを分離するという特定の形式のハックを使用します。子要素を設定します。欠点: 位置: 相対、位置: 絶対の設定は、メンテナンスに役立ちません。

グリッド レイアウト

サイドバーとメインの間のスタイルの左右に関係なく、HTML タグでは、メイン タグがサイドバーの前にロードされていることを確認してください。

最も外側のコンテナのみに特定の幅が与えられ、他のすべてのコンテナの幅はパーセンテージで設定されます?? グリッド レイアウト。

z-index

Z 軸は、要素の位置が絶対位置または相対位置に設定された後にアクティブになります。

負のマージンを設定すると、隣接する要素の位置が重なる可能性があります。どちらが上に表示されるかは、HTML タグが表示される順序によって決まります。後から表示されるタグは、最初に表示されるタグの上に表示されます。

IE6 での選択オクルージョンの問題については、同じサイズの iframe を使用して選択をカバーできます。

コンポーネントの上下マージンの重複問題と IE の hasLaout によるバグを回避するために、特別な必要がある場合を除いて、すべてのモジュールは margin-top を使用して上下マージンを設定します。

Javascript

匿名関数を使用してスクリプトをラップし、グローバル変数を効果的に制御し、潜在的な競合を回避します。

JS が競合を引き起こすのを防ぐには、グローバル変数の急増を避け、名前空間を適切に使用し、コードに必要な注意を加える必要があります。

DOMReady は初期化関数を呼び出すのに window.onload よりも適しています。

ページの最後、つまり タグの前で init 関数を呼び出します。この時点では、ページ内の DOM ノードがすべて「ロード」されているわけではありませんが、すべて「生成」されている必要があります。 " これにより、DOMReady の効果がシミュレートされます。

CSS をページのヘッダーに配置し、HTML 要素を読み込む前にそのスタイルを読み込みます。これにより、HTML のスタイルが設定されていない状態を回避でき、最初に Web ページをユーザーに表示してから読み込みます。ページのスクリプトを使用して、JavaScript が Web ページのレンダリングをブロックするのを防ぎ、ページが空白になる時間を短縮します。

ベースレイヤと共通レイヤは両方ともフレームワークレベルに属し、ページレイヤはベースレイヤのインターフェイスと共通レイヤのコンポーネントを呼び出すことができます。

関数内の特定の要素が不安定な場合、それを関数から分離してパラメーターとして渡すことで、関数から不安定な要素を切り離すことができます。

高品質コンポーネントの機能:

ブラウザ間の互換性

使いやすいコンポーネント

再利用可能なコンポーネント

拡張可能なコンポーネント

コードはよく整理されており、結合度が高く、結合度が低くなります。

プロセス指向には 3 つの問題があります:

データと処理関数の間に直接の相関関係がない。操作を実行するとき、対応する処理関数を選択するだけでなく、それに必要なデータを準備する必要もあります。つまり、操作を実行するときは、処理機能とデータの両方に注意を払う必要があります。

データと処理関数は同じスコープ内で公開されます。プログラム全体のすべてのデータと処理関数は相互にアクセスできます。開発やメンテナンスの後期段階では、システム全体に影響を及ぼしやすく、変更がより困難になります。

プロセス指向の考え方は、プロセッサにデータを入力し、プロセッサが内部で演算を実行し、プロセッサが結果を返すという典型的なコンピュータの考え方です。

オブジェクト指向:

プログラムでは、「オブジェクト」を「オブジェクト」と呼びます。オブジェクトは、「状態」と「アクション」に対応する「プロパティ」と「動作」の 2 つの部分で構成されます。 「客観的な世界におけるオブジェクトの。」

属性の本質は実際にはプロセス指向のデータである変数ですが、動作の本質は実際にはプロセス指向の処理関数である関数です。違いは、プロセス指向では、データと処理機能は関連しておらず、一緒に特定のオブジェクトに属していることです。オブジェクト指向では、オブジェクト内のデータと処理関数が定義され、このオブジェクトのプロパティと動作として存在します。

凝集性:

これは、オブジェクトまたはクラスによって提供されるインターフェイスが非常にシンプルで理解しやすく、複雑な基礎となる操作がオブジェクトまたはクラスのインターフェイス内にカプセル化され、ユーザーに対して透過的であることを意味します。

ユーザーは、クラスが提供するインターフェイスを知るだけでよく、低レベルの詳細が少なくなるほど、オブジェクトの集約度が高くなります。

結合:

低結合とは、クラス間の通信に関連付ける必要があるインターフェイスの数が少ないことを指します。結合が大きいほど次数が低くなります。

全体的な観点からプログラムの品質を決定するのは、OOP ではなく、OOA と OOD です。

OOA と OOD は特定の言語とは何の関係もありませんが、OOP は言語に直接関連しています。

Javascript はプロトタイプベースの言語であり、new によってインスタンス化されたオブジェクトのプロパティと動作は 2 つの部分から構成され、1 つはコンストラクターから、もう 1 つはプロトタイプから提供されます。

このキーワードがコンストラクターまたはプロトタイプに現れるかどうかに関係なく、このキーワードを通じて、プロパティとメソッドをコンストラクターとプロトタイプの間で通信できます。

JavaScript では、スコープを通じてパブリックまたはプライベートが実現されます。

this.XXX で定義されたプロパティはパブリックですが、var XXX で定義されたプロパティはプライベートです。

プライベート プロパティのスコープはクラスのコンストラクター内にのみあります。

パブリックかプライベートかに関係なく、すべてのプロパティと動作をコンストラクターに書き込むことはお勧めできません。メモリ内にはクラスのプロトタイプが 1 つだけ存在するため、プロトタイプに記述された動作はインスタンス化時にすべてのインスタンスで共有でき、インスタンスのメモリにコピーされることはなく、クラスに記述された動作が再びコピーされることもありません。インスタンスのメモリ内では、インスタンス化時にコピーが各インスタンスにコピーされます。

プロトタイプにビヘイビアを記述するとメモリ消費量を削減できます。 特別な理由がない限り、ビヘイビアーを可能な限りプロトタイプに記述することをお勧めします。

プロトタイプに記述された動作はパブリックである必要があり、プライベート プロパティにはアクセスできません。

プロトタイプでプライベート動作を定義しますが、プロパティと動作の名前の前に「_」を追加することでプライベートであることを規定します。これは実際には動作をプライベートにするわけではない命名規則ですが、これによりプライベート動作が可能になります。エンジニアは、それがプライベートであるように設計されていることを知っており、それをパブリックな動作のように呼ぶことを避けます。

set メソッドを使用して属性を設定する場合、属性 valueChange をリッスンするためのエントリ ポイントがあります。

Javascript の継承には、コンストラクターとプロトタイプのそれぞれのプロパティと動作の継承が含まれます。

JavaScript での function の 2 つの使用法:

関数として存在し、「function test() {}; test();」のように、「()」を使用して直接呼び出されます。test は、関数。「()」記号によって直接呼び出されます。これはウィンドウオブジェクトを指します。

「function test() {}; new test();」のように new を使用して呼び出されるクラスのコンストラクターとして存在し、test はクラスのコンストラクターとして機能し、テスト クラスは new を通じてインスタンス化されます。 。これはインスタンス オブジェクトを指します。

関数オブジェクトの呼び出しまたは適用関数を通じて、関数コンテキストを変更できます。

値とアドレスによる受け渡し:

数値型、ブール型、文字型などの基本的なデータ型の場合、代入時にデータのコピーが行われ、コピーされたデータが割り当てられます。これは通常、いわゆる値渡しです。

配列やハッシュ オブジェクトなどの複雑なデータ型の場合、データをコピーするのではなく、メモリ アドレスを使用して値を直接割り当てます。これは一般にアドレス転送として知られています。

プロトタイプは本質的にハッシュオブジェクトなので、直接代入されるとアドレスが渡されます。

Bird.prototype = new Animal(); // Bird.prototype.constructor は Animal を指します

Bird.prototype.constructor = Bird // Bird.prototype.constructor は Bird を指します

カスタム クラスであろうと JavaScript の組み込みクラスであろうと、クラスにはプロトタイプがあります。

組み込みクラスのメソッドはオーバーライドできますが、プロパティはオーバーライドできません。

組み込みクラスのプロトタイプを直接変更する代わりに、カスタム クラスを定義し、組み込みクラスのインスタンスをパラメーターとしてコンストラクターに渡し、カスタム クラスに拡張メソッドを定義します。このアプローチの考え方は、組み込みクラスを別の層でカプセル化して、組み込みクラスのプロトタイプが汚染されないように保護することです。

HTML タグで定義された属性を JavaScript で取得するには、次の 2 つの方法があります:

DOM ノード オブジェクトの getAttribute メソッドを使用する。

DOM ノード オブジェクトのプロパティを通じて (互換性の向上)。

互換性の観点から、通常の属性を読み取るにはnode.XXXを使用し、カスタム属性を読み取るにはnode.getAttribute("XXX")を使用することをお勧めします。

複合型データを文字列に変換することをデータのシリアル化といい、その逆の操作をデータの逆シリアル化といいます。

文字列の逆シリアル化は、eval 関数を通じて実現されます。

イベント オブジェクトの動作は、IE と Firefox では異なります。

IE では、イベントはグローバル スコープ内にあるウィンドウ オブジェクトの属性です。

Firefox では、イベント オブジェクトはイベントのパラメーターとして存在します。

(バブリング メカニズムを使用して) 祖先ノードでイベントをリッスンすると、メモリのオーバーヘッドを効果的に削減できます。たとえば、jquery の delegate() メソッドです。