ホームページ > 記事 > ウェブフロントエンド > 「高品質なコードを書く?? Web フロントエンド開発の実践方法」読書後のエッセイ_html/css_WEB-ITnose
「高品質なコードを書く?? Web フロントエンド開発の実践方法」読書後のエッセイ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:06:35915ブラウズ
構造、スタイル、動作の分離
構造標準には XML 標準、XHTML 標準、HTML 標準が含まれ、動作標準には主に DOM 標準と ECMAScript 標準が含まれます。
通常のプロジェクトは上記の方法で分割されますが、私が今行っているプロジェクトでは、Webサイトのアーキテクチャ全体がモジュールに従って分割されています:
要件: ユーザーのニーズに基づいてWebサイトを生成することを目的としたWebサイトを設計します。
たとえば、企業の表示 Web サイトにはホームページ A が必要です。ホームページ A には、レイアウト (ヘッダー コンテナー、ナビゲーション コンテナー、フォーカス マップ コンテナー、次に 3 列コンテナー、次にフッター コンテナーなど) が含まれています。
各コンテナ内のモジュールは、ユーザーのニーズに応じてロードされます。ページ A にロードされる主なモジュールは、ヘッダー画像、製品ナビゲーション、フォーカス画像、最新ニュース、最新製品、連絡先情報、ページ末尾の著作権ステートメントです。 。
各モジュールにはスタイル (色、背景画像、マージンなど) があり、各モジュールには構成情報 (最新の製品モジュールに製品の説明が表示されるかどうかなど) があります。
構造、スタイル、動作の分離に従ってデザインする場合、上記の 7 つのモジュールのスタイル構成を CSS ファイルに抽出し、各モジュールのレンダリング JS を JavaScript ファイルに抽出する必要があります。この操作により大幅に改善できます。開発効率とメンテナンス効率は？
現在の実装は次のとおりです:
1. 最後のページには JS ファイルが 1 つだけあり、CSS と追加の JS ファイルはありません。
2. ページは、レイアウト (組版) とモジュール (機能) の 2 つの部分で構成されます。
3. サーバーは、ユーザーが要求したページに応じてデータベースから JSON 形式のページ レイアウト構成を読み取り、ユーザーが最終的なページ レイアウトを生成します。
4. サーバーは、ユーザーがリクエストしたページに基づいて、関連する各モジュールの HTML と、そのモジュールに対応する JS レンダリング スクリプトを出力します (JS レンダリング スクリプトには、JSON 形式でスタイル情報やその他の構成情報が含まれます)。
5. 出力ページ。
最終ページのソース コード出力は次のようになります:
-------------------------------- ---------------- ------------
ユニバーサル JS パッケージ
モジュール 1HTML
モジュール 2HTML
モジュール 3HTML
モジュール 1 スクリプト
モジュール 2 スクリプト
モジュール 3 スクリプト
---- ---------------------------------- -------------
サービスの場合 最後はプラグイン（DLLに相当）、プラグインテンプレート（例えばナビゲーションには水平ナビゲーションと垂直ナビゲーション)、プラグイン ビュー (ビューはテンプレートからスタイルを継承します。たとえば、水平ナビゲーションには水平ナビゲーション 1. 水平ナビゲーション 2 を含めることができます)。
ここで、ページ B にもページ A と同じスタイルと構成のナビゲーションが必要であるとします。サーバー側で必要なのは、次のことだけです。
1. ナビゲーション プラグインを選択します
2. で「水平ナビゲーション」テンプレートを選択します。ナビゲーション プラグイン
3. テンプレートの色、背景画像、アニメーション効果、その他の構成を設定し、TPL1 としてマークします
4. TPL1 を使用してビューを生成し、View1 および View2としてマークします
5. View1 をレイアウトに配置します。ページAの位置を変更し、ページBのレイアウト位置にView1を配置します。 レイアウト位置をView2に配置します今後AとBの背景画像を同時に変更する必要がある場合は、変更するだけで済みます。 TPL1 の背景画像
7 将来的に B の背景画像のみを変更する必要がある場合は、View2 の背景画像を変更するだけで済みます
HTML タグのセマンティクス
まず HTML を決定し、セマンティクスを決定しますタグを選択し、適切な CSS を選択します。Firefox の Web Developer プラグインを使用して CSS を無効にし、ページの表示効果を確認します。
たとえば、タイトルとコンテンツのモジュールスキーム:
<标题>这里是标题内容<a href="#">更多</a></标题><段落>段落一的内容</段落><段落>段落二的内容</段落>
ここでの「more」は実際にはタイトルタグに属すべきではありません。調整は次のとおりです:
<div><标题>这里是标题内容</标题><a href="#">更多</a></div><段落>段落一的内容</段落><段落>段落二的内容</段落>
ページコンテンツタグが満たされない場合。設計に必要な場合は、実装を支援するために DIV や SPAN などのセマンティックレス タグを適切に追加する必要があります。
CSS の品質を向上させる
CSS を整理する最も一般的な方法:base.css + common.css + page.css基本クラスはユニバーサルかつアトミックである必要があります。例:
.f12{font-size:12px;}.zoom{zoom:1;} 依存関係を示すにはダッシュを使用します関係: たとえば、「.timeList-lastItem」は「.timeList」スタイルに属します。
接頭辞を付けて開発者を示します: 例: 「.xf-timeList-lastItem」、「.jn-timeList-lastItme」。
より多くの組み合わせを使用し、より少ない継承を使用するという原則: クラスの不安定な部分を分離して 1 つのクラスに個別に設定し、残りの比較的安定した部分を別のクラスに設定します。これは、クラス (複数のクラス) を組み合わせることによって実現されます。最終的なスタイル。
CSS の重みの計算: HTML タグの重みは 1、クラスの重みは 10、ID の重みは 100 です。たとえば、「strong.demo」の重みは 10+1=11 です。 「#test.red」の重みは100+10=110となります。
CSS スプライト: これを実現するには、background-position を使用します。
CSS ハック:
1. IE の条件付きコメントは JS ハックにも使用できます
<!--[if gt IE 6]><link type="text/css" href="test.css" rel="stylesheet" /><![endif]-->
2. セレクター プレフィックス
"*html" アスタリスク プレフィックスは IE6 でのみ有効です。
」 *+html" アスタリスクとプレフィックスは IE7 でのみ有効です。
下位互換性にはいくつかのリスクがあり、将来の IE バージョンが *html および *+html を認識しないという保証はありません。
3. スタイル属性の接頭辞
"_width:60px;"只在IE6下生效；
"*width:60px;"在IE6和IE7下生效。
4. 超链接hover的兼容：
顺序：:link :visited :hover :active (lv ha)
display:inline-block
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta> <style type="text/css"> body,ul,li{margin: 0px;padding: 0px;} ul{list-style: none;} li{display: inline-block;*display: inline;*zoom:1;} ul li {border:solid 1px #eee;padding: 2px 20px;} </style></head> <body> <div> <ul><li>标题1</li><li>标题2</li><li>标题3</li></ul> </div> </body></html> position:absolute和float会隐式地改变display类型，不论之前设置了什么类型，都会让元素以display:inline-block的方式显示，就算显示设置display:inline或者display:block也无效。
IE6下的float双边距BUG就可以通过设置display:inline来解决。
水平居中的问题
给父元素设置text-align:center可以实现文本、图片等行内元素的水品居中。
确定宽度的块级元素可以通过设置margin-left:auto和margin-right:auto来实现。
不确定宽度的块级元素实现水平居中：
1. 可以通过将需要水平居中的块级元素放入table标签实现（不设置table标签的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中），缺点是增加了无语义的标签。
2. 改变块级元素的display为inline类型，然后使用text-align:center实现居中，缺点是块级元素变成行内元素后，无法设置长宽值等。
3. 通过给父元素设置float并设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中，缺点是设置了position:relative，如下所示：
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta> <style type="text/css"> body,ul,li{margin: 0px;padding: 0px;} .ccenter{position: relative;float: left;left: 50%;} .ccenter-in{position: relative;left: -50%;} .show{border:solid 1px #eee;margin: 10px;padding:10px;} </style></head> <body> <div class="ccenter"> <div class="ccenter-in show">这里的内容想要水平居中显示</div> </div> </body></html>
垂直居中的问题
父元素高度确定的单行文本的垂直居中可以通过设置line-height来实现。
CSS中有一个vertical-align属性只有在父元素为td或者th的时候才生效，在现代浏览器下（IE8+）可以设置块级元素的display类型为table-cell来激活vertical-align属性，但IE67下并不支持；
<!DOCTYPE html><html><head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta> <style type="text/css"> body,ul,li{margin: 0px;padding: 0px;} .ccenter{height: 200px;display: table-cell;vertical-align: middle;*position: relative;} .fixie67vmiddle{*position: absolute;*top: 50%;} .fixie67vmiddle-in{*position: relative;*top:-50%;} .show{border:solid 1px #eee;margin: 10px;padding:10px;} </style></head> <body> <div class="ccenter hcenter"> <div class="fixie67vmiddle"> <div class="ccenter-in hcenter-c show">这里的内容想要垂直居中显示</div> </div> </div> </body></html> 另外想要实现块元素居中，还可以通过更简单的方式：
.vhcenter{ width: 400px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -210px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */} 使用子选择器应对复杂变化
.content-lr-7025 .main{float:left;width:70%;}.content-lr-7025 .sidebar{float:right;width:25%;}.content-rl-7025 .main{float:right;width:70%;}.content-rl-7025 .sidebar{float:left;width:25%;} z-index相关问题以及Flash和IE6下的select元素
z轴在设置position:relative或absolute后被激活，z-index值越大越靠上。
z-index设置为负数可能会遇到些麻烦，例如当位于body之下时，可能事件会被透明的body挡住。
负边距引起的相邻元素位置重叠，取决于HTML标签出现的先后顺序，后出现的标签浮于先出现的标签之上。
Flash嵌入网页时有个wmode属性，可以设置为opaque和transparent来防止Flash始终浮于最上方。
select表单元素在IE6下会浮于绝对定位的元素之上，可以使用一个和绝对定位元素同样大小的firame元素，通过z-index放置在绝对定位元素之下，select元素之上来定位。
PNG图片的IE6透明问题
参考P130页。
通过滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_file',sizingMethod='crop')实现。
提高 JavaScript质量
匿名函数控制作用域。
定义命名空间。
统一入口。
JavaScript分层。
封装浏览器差异。
弹性编程，可扩展：组件通过class来标识，并通过实现getElementsByClassName来获取一组功能相近的标签。
可复用：组件指定根节点，保持每个组件之间的独立性。
通过传参实现定制。
this的指向
<a href="#" onclick="alert(this.tagName)">test1</a><a href="#" onclick="javascript:alert(this.tagName)">test2</a>
如上的test1显示的是A，但test2显示的是undefined。
同样的setTimeout和setInterval也会改变this指向，传递的相当于函数指针，this就变成window作用域了：
var test="hello";var o={ test:'o', go:function(){ alert(this.test); }};o.go(); // osetTimeout(o.go,1000); // hellosetInterval(o.go,2000); // hello 可以通过匿名函数来调整this指向，另外还可以通过call和apply来调整this指向。
自定义标签属性
JavaScript和HTML标签之间存在映射关系，HTML标签在JavaScript中作为DOM节点对象存在。
对于常规属性，通过使用n.xxx的方式读取，对于自定义属性，统一使用n.getAttribute方法读取。
自定义属性可以通过info=eval("("+info+")");来反序列化。
协作
1. 公共组件一人维护，各个子频道专人负责；
2. 视觉设计师完成设计后，和交互设计师沟通，确定设计可行性；然后先将设计图给公共组件维护者，看是否需要提取公共组件，然后再提交给相应频道的前端工程师，如果有公共组件要提取，公共组件维护者需要对频道前端工程师说明。
3. 如果没有公共组件提取，交互设计师直接和各栏目前端工程师交流，对照视觉设计师的设计图进行需求说明，前端工程师完成需求。
4. フロントエンドエンジニアは、設計図にコンポーネントが既に存在するかどうかを最初に確認し、存在する場合は、そのファイルに対応するコードを追加します。彼自身のチャンネル。
5. 制作プロセス中に、フロントエンド エンジニアがパブリック コンポーネントに追加されていない再利用性の高いコンポーネントを見つけた場合、パブリック コンポーネントのメンテナに説明し、パブリック コンポーネントのメンテナがそのコンポーネントを追加するかどうかを決定します。
6. パブリックコンポーネントメンテナーのパブリックコンポーネント説明文書には、読みやすいようにサポートする画像と説明テキストを提供する必要があります。