多くの人と同じように私は、「フロントエンドアーキテクチャ」という言葉があるのを聞くのは初めてのため、最初の反応がある可能性：このため、アーキテクチャが重要ですシステムの計画と拡張性の分野におけるバックエンドの開発「と言うのフロントエンドアーキテクチャがあります？」部門は、開発作業を開始する前に長い間、彼らはプロジェクトに参加するように招待された、関心が高まっ集め、彼らはクライアントアーキテクチャを議論することに構築するプラットフォームを必要とするだけでなく、どのようなテクノロジ・スタックを使用する？どんなタイプ？どのようにこれらの要素がありませんソフトウェアアーキテクトの役割をしているのですか？作成ランダムな意思決定をプロジェクトのすべてのステップは、全体的なアーキテクチャの指導の下で行われていることを確認し、そしてません。
今すぐフィールドのフロントエンド、JSフレームワーク、UIフレームワークやライブラリの富と、フロントエンドアーキテクチャは非常に重要になっている。大規模なプロジェクトは、合理的なフロントエンドアーキテクチャのデザインを持っていない場合は、フロントエンドのコードが異なるため、開発者のカジュアルかもしれさまざまなライブラリとUIフレームワークの導入は、コードの異常な量につながることは肥大化となり、最終的な結果は、コードを維持することができない可能性がなり、パフォーマンスの低下ページ、最後の私たちは、プロジェクトの開始前に、必要なだけなので、復興を打倒するために、フロントエンドのコードの同じ必要性アーキテクトは、標準化されたシステム設計を確立し、従わなければならないすべてのフロントエンド開発者のためのテストメカニズムを設計するためのフロントエンドアーキテクトと、プロジェクトが標準測定コードの品質、フロントエンドの開発者が楽しむことができ、より効率的な作業になります従って流れ、フロントエンドアーキテクチャの定義は、次の文によって要約することができます。
フロントエンドアーキテクチャは、フロントエンドのコードの品質を向上させ、効率的で持続可能なワークフローを実現するために設計されたツールとプロセスのセットです。
フロントエンドアーキテクチャ記事のこのシリーズは、それぞれ4つのコアのフロントエンドアーキテクチャ、即ちコード、プロセス、検査、ドキュメントを中心に展開します。
4つのコアフロントエンドアーキテクチャ
（A）コード
私たちは、生産現場で生成されたコードの多くに直面している場合には最終的な分析では、サイトのすべてのテキストファイルやリソースファイルの集まりです、あなたはそれがコードセクションにいかに重要であるかの期待を設定するためのコードとリソースを検索します私たちは、HTML、CSS、JavaScriptの場合達成するためのシステムアーキテクチャに焦点を当てます。
（B）工程
今長い年齢のFTPアップロードファイルを過ぎて、そして今、重要なのは、ワークフローがより複雑になったワークフロー効率的かつ回避エラーを構築するためのツールとプロセスを使用する方法を考えることです、それらの同じは彼らのツールについても同様です。これらのツールは、驚くべき結果の一貫性を維持するためのコードまでの生産性、効率性とスピードを向上させるためにもたらしただけでなく、リスクのオーバーエンジニアリングおよび抽象化を伴っている。そのため、既存のワークフローを変更する必要があること。
（C）試験
スケーラブルかつ持続可能なシステムの最適化を構築するために、我々は新しいコードとレガシーコードは、Googleのコードにも互換性があることを確認する必要があり、それらは独立した存在のより大きなシステムの一部ではありません、大規模なテストプログラムの適用範囲を作成し、缶古いコードが正常に機能していることを確認してください。
（D）のドキュメント
一般的には、文書の重要性を、残すためにチームの主要メンバーではない場合、我々はほとんど意識は決して。それが起こるまでは、私たちは手で作業を停止する必要があります、すべての文書の作成を優先。庁フロントエンド部門としてあなたは、プロジェクトの開発と同時に良いドキュメントを書くために良いことがあります。
コアコード
(一) HTML
アーキテクチャの前には、HTMLページの基礎は非常に重要であると。最初のHTMLが不十分である場合は、補うために、不要なCSSとJavaScriptの多くを書くつもり。逆に、初期のHTMLがあれば十分書かれている場合、あなたはベースの拡張性と保守性CSSとJavsScriptを書くことができます。
まず、HTMLコードを書くことが主なフロントエンドエンジニアのいくつかを見てみましょう。
<div id="header" class="clearfix">
<div id="header-screen" class="clearfix">
<div id="header-inner" class="container-12 clearfix">
<div id="nav-header" role="navigation">
<div class="region" region-navigation>
<div class="block block-system block-menu">
<div class="block-inner">
<div class="content">
<ul class="menu">
<li class="first leaf">
<a href="#">菜单1</a>
</li>
<li class="second leaf">
<a href="#">菜单2</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>このような「divLuandun」のコードでは、PSDは、単にマップを復元する。書き出すために主要フロントエンドの作業カットページに対処するための多くのですが、あなたは完全にHTML可読性と保守性を考慮していません。
その後、HTML5の後、すべての注意によって意味タグは、セマンティックタグを使用して、コードの可読性を向上させるだけでなく、SEOを助長する。フロントエンドアーキテクチャで必要とされるセマンティックHTMLタグを使用します考慮に入れると、このコードを記述するラベルの言語での外観をしてみましょう：
<header>
<section>
<nav>
<ul>
<li>
<a href="#">
菜单1
</a>
</li>
<li>
<a href="#">
菜单2
</a>
</li>
</ul>
</nav>
</section>
</header>10ページのメニューに数回あれば、それは余分な追加されます。しかし<li><a href="#">菜单N</a></li>、このような反復作業を与えることができ、Mustache書き込みHTMLのテンプレートエンジンの構文ヴューてきました、解決するためのテンプレートエンジンのこの種を、それは多くのを軽減しますワークロード：
<template>
<header>
<section>
<nav>
<ul>
<li v-for="(item, index) in navList" :key="index">
<a href="#">
{item}
</a>
</li>
</ul>
</nav>
</section>
</header>
</template>
<script>
export default {
data() {
navList:['菜单1','菜单2','菜单3','菜单4','菜单5','菜单6','菜单7','菜单8','菜单9','菜单10']
}
}
</script>また、当然のことながら、これらは事前に選択された建築家の技術のフロントエンドの選択に応じて必要とされ、プロジェクトにハンドルバー、ジェイド、artTemplate様々なテンプレートエンジンを使用することができます。フロントエンドアーキテクトがHTMLを生成するプロセスを評価する必要があるとして注文内容、要素、および使用されるCSSクラス名に、あなたは多くのコントロールをしている？あなたがシステム、または手動で処理する必要が使用して変更を行うことができますか？それははるかに困難になります将来的にこれらの要素を変更するテンプレートの使いやすさ？これらの質問に答えることによって、それはあなた自身のHTMLとCSSを構築する方法を覆すことがあります。
（B）CSS
こうした新しい名前空間を使用するなど、CSS洗練された方法を、建物の多くは、拡大したり、データがCSS、JavaScriptの内部で定義された属性があります。あなたは、ブートストラップ、ElementUIなUIフレームワークからこれらのメソッドの影を見つけることができます。以下は、一般的に使用される3種類の説明方法。
1.OOCSS法（オブジェクト指向CSSオブジェクト指向CSS）
<div class="toggle simple">
<div class="toggle-control open">
<h1 class="toggle-title">标题</h1>
</div>
<div class="toggle-details open">
详细内容
</div>
</div>上記のコードはOOCSS二つの主要な原則がありますが、HTMLコードの切り替えOOCSSメソッドを作成する方法を紹介します。
- 分離構造と外観
- 分離容器と内容
分離の構造および外観
本明細書でtoggleは、以下の構造を制御するために使用されるsimple分離性能である外観、構造及び外観を制御する。これは、現在のように、多重化の出現を可能にsimple直角皮膚、およびcomplex皮膚は丸い角であってもよく、また、添加影。
分離容器と内容は
、ここで使用toggle-titleするかどうかを、分離容器と中身のパフォーマンスであるtoggle-titleコンテナが使用されている<h1>か<h2>、または<div>、と組み合わせると、toggle-titleクラス名、そのようなコンテナの名前は、スタイル、プレゼンテーションの内容を定義されています。
2.SMACSS方法（CSSモジュラアーキテクチャスケーラブルなCSSのためのスケーラブルかつモジュラー・アーキテクチャ）
<div class="toggle toggle-simple">
<div class="toggle-control is-active">
<h2 class="toggle-title">标题2</h2>
</div>
<div class="toggle-detail is-active">
详细内容
</div>
</div>基本的に示してどのようにSMACSS方法上記のコードは、私の個人的な理解では、OOCSSは、より実際の思考のCSSの構文を提供し、アイデアは、コンテンツとコンテナの分離、分離の構造と外観を必要とします。しかし、 CSSのビルド仕様の完全なセットを提供していない、SMACSSは、システムのスタイルを提供することで、風のシステムは、5つの特定のカテゴリがあります。
- 基本：あなたは外観が現れるだろうかマークにCSSクラス名を追加しない場合
- レイアウト：ページは、いくつかの領域に分割されています
- モジュール：モジュール設計、再利用可能なユニット
- ステータス：特定の状態または症状、またはレイアウトモジュールの表示方法に記載
- トピック：あなたは別のテーマに切り替えることができます層のオプションの外観
財団
//base.css
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}コードに基づき、それは、例えば、いくつかの一般的なスタイルのページで指定しなければならないと、0に設定設定されているラベルの色。いくつかの一般的に使用されると同様にファイルを。bodymarginpaddingainitial.css
レイアウト
//layout.css
#header, #article, #footer {
width: 960px;
margin: auto;
}
#article {
border: solid #CCC;
border-width: 1px 0 0;
}ここで、このようなヘッド、サイドバー、身体及びこれらの下など、いくつかの共通のコンポーネント、のページレイアウトのレイアウトを指します。これらのコンポーネントは、複数のページレイアウト一般的になり、それはファイル、CSSにそれを置くのがベストです。簡単に再利用。SMACSSで、され、トップラベルレイアウトコンテナを設定することが推奨されid、各ページには、スタイルを保持するためのユニークなレイアウトコンテナを持って、この保証し、それが簡単に使用CSSやJSセレクタにもあるということ。もちろん、あなたもあなたはユニークなクラス名の交換を使用することができますid。
モジュール
//module.css
//module1
.module1 > h2 {
padding: 5px;
}
.module1 span {
padding: 5px;
}
//module2
.module2 > h2 {
padding: 10px;
}
.module2 span {
padding: 10px;
}モジュールは、ページを指すようナビゲーションバー、サイドバー、ダイアログボックス、または他のいくつかのウィジェットとして、一部を多重分離し、個別に抽出することができる。したがって、モジュールの使用を禁止するidのではなく、クラス名を介して。
状態
<div id="header" class="is-collapsed">
<form>
<div class="msg is-error">
There is an error!
</div>
<label for="searchbox" class="is-hidden">Search</label>
<input type="search" id="searchbox">
</form>
</div>状態は、既に上記のコードセクション、状態の異なる要素、提示パターンを定義する責任があるis-状態で表されるクラスの名前の先頭にis-collapsed、is-error他のクラス名が単独で使用されていないが、以前のレイアウトとモジュールが一緒に使用されます。次のコードは、モジュールとステータスバー]タブで使用されています。
//state.css
.tab {
background-color: purple;
color: white;
}
.is-tab-active {
background-color: white;
color: black;
}テーマ
// module-name.css
.mod {
border: 1px solid;
}
//theme.css
.mod {
border-color: blue;
}上記のコードを持って、より適切なここに皮膚として理解テーマは、例えば、中module-name.cssの色に加えて、定義された境界線のスタイル、でtheme.cssあなたはクラス名、他の色を定義する場合、境界ファイルの色の定義を、この利点は、ありますこれらのスタイルが色を持ってカバーするために、あなたは、クラス名によって肌の色を切り替えるために行くことができます。交換用のテーマ効果に達しました。
：SMACSS方法についての詳細は、以下を参照してください。 https://smacss.com/book
3.BEM方法（ブロック要素修飾修飾ブロック要素）
<div class="toggle toggle--simple">
<div class="toggle__control toggle__control--active">
<h2 class="toggle__title">标题3</h2>
</div>
<div class="toggle__details toggle__details--active">
...
</div>
...
</div>BEMはYandexのが提案したCSS方式にちなんで命名され、この方法は、可能な限り次の3つのコンポーネントを使用して、CSSクラス名を使用する必要があります：
- ブロック名：コンポーネントの名前
- ブロック内部の要素名：要素
- 修飾子：任意の関連するブロックに関連付けられた要素又は改質剤
ブロック名
多くの初心者である名前ブロックするinline-block実際のブロック名は、例えば、別個のモジュールまたはコンポーネントを指し、ブロック<header>、モジュールとして使用することができるが、モジュール間のモジュールとして使用することができます互いに入れ子にすることができる。上記のサンプルコードでは、それは別のモジュールであります<header><nav>toggle
素子の
素子手段は、ブロック名の後の要素を用いて、BEM方法でブロック名の他の部分で使用することができない__二重下線は、ブロック名を命名単一下線付きの利便性を使用することに同意するため理由は、接続。上記のサンプルコードでは、ブロック名+要素命名されます。toggle__controltoggle__title
修飾子
修飾子とSMACSS状態でBEMの方法と同様に、後ろの修飾子要素の使用が必要です--一部の人々は、このようなアプローチは、コードの冗長性になるだろうと感じるの接続を。、SMACSSの使用はis-activeまた、同じ役割を表すことができ、そしてなぜ上記のコードを使用するtoggle__details--active？私たちは、個々を見れば、実際には、ないopenとis-activeこれら二つの名前、我々は、彼らが何を意味するのか分からないが、あなたが見たときにtoggle__details--active、クラス名を、我々はそれがあることを知っている：この要素の名前がありdetails、位置toggle組み立て、状態active。
（三）のJavaScript
フレームを選択し
、私は反応して、角度に落ちたくないここで私は、私は大きな利便性をもたらし、当社の開発者にMVVMフレームワークを開発者知ってるのVue。ヴューの三の大枠組みを戦う、jQueryのを停止する必要はありませんDOM操作の形で開発するが、唯一のデータへの変更に関わる、データがDOMを駆動するように変更されます。これは、ビジネスロジックの処理を置くために多くの時間を費やすことができます。
三の大生態系の現在の枠組みでは、ビジネスフレームワークのほとんどは、より多くのフレームを選択し、そのようなのVueのコストを学習として、プロジェクトチームのメンバーのコストを、好みに応じて学習、3つの実際にはあまりないの違いを実装します私Vueのは開発者ですが、それは角に比べてはるかに小さいですが、私はJSXは構文は、コードは非常に楽しいなっ書き込むことができますリアクト使用に言わなければなりません。
ここで私が言いたいのです。 実際には、あなたはおそらく、任意のフレームを必要としません！
多くの成功したウェブサイトは、唯一のテンプレート構文の番号を使用し、プラス手動で作成したJavaScript関数の少量のサスファイルと数十から作成されています。場合は、十分に大きな規模プロジェクト、フレームによって運ばれるボリュームの交換コードのファイルサイズに犠牲にする必要が開発効率を向上させ、その後、どのような評価のJSフレームワークとUIフレームワークを導入し、簡単にあきらめてはいけないことは、プログラムを合理化を検討するための時間。
JavaScriptコードの仕様を選択します
それぞれの人が書き込みコードに別の方法では、一部の人が使用することを好むかもしれないです==が、使用するようないくつかの===、いくつかの人々は、それぞれの変数の使用に慣れているかもしれないvar宣言することが、いくつかは、使用することを好むvarと同時により多くの宣言にカンマ演算子を変数。コードは影響を与えないかもしれないプログラムを実行するために使用されるが、大企業では、開発し、複数の開発者に直面したとき、あなたが標準化されたコードを持っていない場合、その後の状況は、コードを維持することが困難になり、読みにくい表示されます。新しいチームメンバーに参加するために、すぐに関連するコードに慣れることができ、そしてコードはJavaScriptコードの仕様にかかわらず、大規模なプロジェクトや小規模プロジェクトの開発のメンテナンスを行うことができ、必要不可欠です。
同社は、独自のコードをカスタマイズするためのコードを調整しない場合は、私たちはあなたに以下の3つのコードの仕様をお勧めします大企業、によって開発されたコードの仕様を使用することができます。
AirbnbのJavaScriptは「JavaScriptコードを記述するための最も合理的な方法」として知られ、ほぼすべての言語ではJavaScriptを特徴覆い、GitHubの上の60,000スターの足を持って、インターネットで最も人気のあるJavaScriptコードの仕様です。
Googleのコードの美しさからだけではなく、より包括的なAirbnbコード仕様に比べてJavaScriptコード規格、およびコード角性能特性はJSがコードを書く当たり前でしたが、また、JS、インポート道に名前を付け、JSコードのドキュメントでは当たり前でした。はじめに、Googleチームは、プロジェクト内のすべての使用GoogleのJsの仕様は、Googleのスタイルコードと呼ばれるようにしたことを示しました！
標準JSは、強力なJavaScriptコードの仕様ではありませんリンタやコードの自動補正を来て、何も設定、自動書式コードは、初期のコード内で低レベルのエラーコードで見つけることができます。このコードの仕様は次のような多くの有名企業で採用されましたNPM、GitHubに、MongoDBののように。
以下の仕様は、標準規格との違いを使用していない仕様の使用を比較するために、airbnbのES5部分を撮影しました：
配列
- ダイレクト量を持つ配列を作成します
//bad
var items = new Array()
//good
var items = [];- 、配列のコピー使用
slice
var len = items.length;
var itemsCopy = [];
var i;
// bad
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
itemsCopy = items.slice();- 使用される
sliceベース配列の配列にオブジェクトを変換します
function trigger() {
var args = Array.prototype.slice.call(arguments);
}弦
- 単一引用符
''の文字列を包みます
//bad
var name = "LITANGHUI"
//good
var name = 'LITANGHUI'- プログラマブル使用して文字列の生成
joinの代わりにコネクタを使用しての接続を。特に、IE
var items;
var messages;
var length;
var i;
messages = [{
state: 'success',
message: 'This one worked.'
}, {
state: 'success',
message: 'This one worked as well.'
}, {
state: 'error',
message: 'This one did not work.'
}];
length = messages.length;
// bad
function inbox(messages) {
items = '<ul>';
for (i = 0; i < length; i++) {
items += '<li>' + messages[i].message + '</li>';
}
return items + '</ul>';
}
// good
function inbox(messages) {
items = [];
for (i = 0; i < length; i++) {
// use direct assignment in this case because we're micro-optimizing.
items[i] = '<li>' + messages[i].message + '</li>';
}
return '<ul>' + items.join('') + '</ul>';
}比較演算子＆等号
- 優先順位
===および!==代わり==と!= - ショートカットを使用します
// bad
if (name !== '') {
// ...stuff...
}
// good
if (name) {
// ...stuff...
}
// bad
if (collection.length > 0) {
// ...stuff...
}
// good
if (collection.length) {
// ...stuff...
}
ブランク
- インデントように2つのスペースを使用します
// bad
function () {
∙∙∙∙var name;
}
// bad
function () {
∙var name;
}
// good
function () {
∙∙var name;
}- 中括弧の前にスペースを入れてください
// bad
function test(){
console.log('test');
}
// good
function test() {
console.log('test');
}
// bad
dog.set('attr',{
age: '1 year',
breed: 'Bernese Mountain Dog'
});
// good
dog.set('attr', {
age: '1 year',
breed: 'Bernese Mountain Dog'
});- オペレータ離れスペース
// bad
var x=y+5;
// good
var x = y + 5;上記は、次のいくつかの記事の核心部分に4つのコアコードのフロントエンドアーキテクチャで、それぞれ他の三つのコアをご紹介します、彼らはプロセス、テストおよびドキュメントです。