本論文では、フロントエンドの仕様を開発するための以下の側面を概説します
1.標準カタログを確立
2.フロントエンドの命名規則
3.フロントエンドの作業の規範
4.文書書かれた仕様を開発
1.建設遠位ディレクトリ指定
我々の命名法、ルートディレクトリ、ビジネスロジックのディレクトリや建物の他の側面について
1.1各部の名称：
- 簡潔な（次のように:)
* Srcのソースコード
* IMGイメージリソース
* JsのJavaScriptのスクリプト
*発サードパーティの依存関係
- 未使用の複数（:)以下
IMGSのドキュメントを使用しないでください*
1.2ディレクトリ（root）の機能構造によって（以下:)
- SRCソースコード（ロジック）
- ドキュメントのドキュメント
- DEPサードパーティの依存関係
- テストテスト
（以下のサービスロジックに応じて分割1.3フォルダ:)
- srcディレクトリの用語集：
- 一般的な公共資源
- 公共/静的静的リソース
- コンポーネントアセンブリ
- ビュー/ TPLテンプレートファイル
`` `
SRC
共通の公開リソース
IMG
logo.png
sprites.png
CSS
reset.css
JS
conf.jsプロジェクトプロファイル
公共/静的静的リソース
JS
CSS
TPL
index.htmlを
shopcar.html
IMG
部品アセンブリ
家
shopcar
ログイン
登録
ユーザー
リスト
ディテール
ビュー/ TPL TPLプロジェクトテンプレートは、テンプレートの略語です
`` `
1.4概要：
2つの方法で使用上のカタログの開発仕様
1.手動で作成するなどのWebPACK、がぶ飲み、とフロントエンドエンジニアリングツールを使用します
修正フレームワークが提供する2.ツールを足場
2.フロントエンドの命名規則
この部分、私は、次の2つの側面を説明します
CSSの命名規則：
- BEM仕様
- OOCSS仕様
仕様のJavaScriptの準備：
- JSLint
- eslint
2.1 CSSの命名規則
2.1.1 BEM仕様
- コンセプト：
CSSコードのモジュラー、再利用可能な、高いメンテナンス性と構造を実装するために開発者を支援するために設計されたフロントエンドの命名法、あるブロック要素モディファイ、。
- BEMは、CSSクラス名のコードの定義、およびそれぞれの名前であり、その構成要素は、特定の意味です。
- 単一の名前のCSSの構図 - ラテン文字、数字、から。
- ブロック要素の修飾子
- 独立した意味のあるエンティティ、例えばヘッダ、容器、メニュー、チェックボックス、等
- ブロック部と独立した意義、例えばヘッダのタイトル、メニュー項目、リストアイテムなど
- 符号ブロックまたは要素、あなたは表現のその形態、行動、状態など無効を変更するためにそれを使用することができ、など、固定、確認..
- ネーミング
単一の名前のCSSの構図 - ラテン語のアルファベット、数字、から。
- ブロック
独立した意味のある抽象ブロックまたはコンポーネントにちなんで名付けられたシンプルな接頭辞を使用してください。
`` `CSS
<！ - 例えば - >
。ブロック
。ヘッダ
.site検索
`` `
- 要素
__コネクタが接続し、ブロック要素に使用されます。
`` `CSS
<！ - 例えば - >
.block__element
.header__title
.site-search__field
`` `
- 修飾子
使用 - コネクタとブロック要素または修飾子を接続します。
`` `CSS
<！ - 例えば - >
.block - 修飾子
.block__element - 修飾子
.header - 隠します
.header__title - 色 - 赤色
.site-search__field - 無効
`` `
- 例
`` `HTML
<！ - HTMLファイル - >
<フォームクラス=「フォームフォーム - テーマクリスマスの形 - シンプル」>
<入力クラス= "form__input" タイプ= "テキスト" />
<入力クラス= "form__submit form__submit - 無効" タイプ= "提出" />
</フォーム>
`` `
`` `CSS
<！ - CSS - >
。形 {}
.FORM - テーマクリスマス{}
} {簡単 - .FORM
.form__input {}
.form__submit {}
.form__submit - 無効{}
`` `
- ボタンの例
`` `HTML
<！ - HTMLファイル - >
<ボタンクラス=「ボタン」>
通常のボタン
</ button>の
<ボタンクラス=「ボタンボタン - 状態 - 成功」>
成功ボタン
</ button>の
<ボタンクラス=「ボタンボタン - 状態 - 危険」>
危険ボタン
</ button>の
`` `
`` `CSS
<！ - CSSファイル - >
.button {
表示：インラインブロック。
国境半径：3px;
パディング：7px 12ピクセル;
国境：1pxの固体＃D5D5D5。
背景画像：リニアグラジエント（#EEE、#DDD）。
フォント：700 13px / 18pxのHelvetica、Arialの。
}
.button - 状態 - 成功{
色：#FFF;
背景：＃569E3D線形勾配（＃79D858、＃569E3D）を繰り返す-Xと、
ボーダーカラー：＃4A993E。
}
.button - 状態危険{
色：＃900;
}
`` `
2.1.2 OOCSS仕様
- コンセプト
オブジェクト指向CSS、CSSオブジェクト指向、再利用性の高い、低膨張、高結合CSSコードの開発を目的としました。
OOCSSオブジェクト指向の考え方の共通コードを引き抜い、スタイル、抽象的分離を定義することです。
- 概要：
ビューの目標点、他のクラス名に続い異なる特性として再利用するもの
`` `CSS
<！ - 例： - >
。リスト{
背景：#FFF;
}
.LIST - 幅{
幅：300ピクセル;
}
`` `
2.2 JSコードの仕様を書きます
・ JSLint
・ eslint
3.フロントエンドの作業の規範
、毎日、毎週、メッセージフォーマットの私たちの三つの側面を理解します
3.1次のように毎日を読み込みます
- あなたは午前中に何をしますか
- あなたは午後に何をしました
- どんな問題？解決策はありますか？
- 明日のための計画？（明日は何をするつもり）
- 最後に、最終的な表面日の内容に追いつくために
3.2次のように毎週の読み取り：
2016.07.25-2016.07.29週刊：
。私は、今週のメインコンテンツを動作します。
クラウドH5プレーヤーのアップグレードや大規模なデータの報告として、マクロの完了を§。
§修理XK-H5プレーヤーのバグ：サムスンの携帯電話は、シークスライドすることはできませんブラウザが付属しています。
ページとページの統計概要にアクセスするための予備的な生産データ端末を完了するために、バックオフィス・システム管理コンソールを§;
。仕事で既存のIi主な問題：
III - ウェブサーバ大規模なデータが複数のページ移植の互換性の問題、ブートストラップとjquery.easyui紛争管理コンソールのバックオフィスシステムの存在を示します;
IV。 - この問題を解決するためのアイデアが速くかもしれインラインフレームを使用するための最も効果的な方法ではないかもしれない、いつ、どのようにブラウザウィンドウのページを変更するには、コントロールする方法easyuiのiframeはiframeページを使用することがあり、IFRAMEの変更やその他の問題を追いました。
。V来週の作業計画：
先週未完成の管理コンソールの表示大規模なデータ・ページ制作を完了§。
あなたはIFRAMEと事件を解決しようとする時間を持っている場合は、作業終了後§。
何の兄弟が仕事を助けるために頼まないがあります§。
次のように3.3共通メッセージ形式は次のとおりです。
1.明確なメッセージが送信され、誰？
参加者は：あなたが不明な場合は、あなたの直接の上司（同僚）を尋ねることを忘れないでください、それについて考える必要があります
メッセージの2.件名：
テーマは1つのみを持っている必要があります
[ください]マーキングをし、他の言葉：必要に応じて、追加
3.メッセージ本文
コールをクリアするには：
コヒーレント例：
グッドリーダー：
以下は、/マーキングしてくださいしてくださいxxxに知られています
4. 署名：
何何何時間ジョブの名前のどの部分
5.アクセサリー
これは、別館に注意すべきで何をしているのですか？
6.転送;
オリジナルのメッセージを説明する必要があります。そして、明確な意思を書きます
4.文書書かれた仕様を開発
このセクションでは、次のセクションで説明します
・HTML仕様
・CSSの仕様
・Jsの仕様
4.1 HTMLの仕様
1.タグ配列は、次の属性を推薦する：クラス（クラスが高い再利用可能なコンポーネントで設計され、それが最初にすべきである）識別名（IDより具体的にはできるだけ使用しなければならない、それは第二に配置されるように読み取り専用無効に必要なビット）データ - *タイプhrefの値のプレースホルダのタイトル代替aria-用SRC *役割
2. ID /クラスの命名規則：BEM OOCSS SMACSS（拡張）
3.注仕様（好ましくは英語で）
4.2 CSSの仕様
1.属性の順序
場所属性（位置右上のzインデックス表示フロート等）
大小（幅、高さ、パディングマージン等）
一連のテキスト（文字行の高さの文字間隔のカラーテキストALIGN ECT）。
バックグラウンド（背景ボーダーなど）
他の（アニメーション遷移等）
そして、書かれたコメント
2.セレクタ（CSS3セレクター）を使用しないようにしよう
.content.first、子
3. [プロパティ]略語：
4.3 Jsの仕様
1.言語仕様
letキーワードに追加しなければならない変数を宣言します。VARを使用しないでください
矢印優先機能を使用します
接続文字列を使用して置換されたテンプレート文字列
2.セミコロンを使用します
如果仅依靠语句间的隐式分隔,有时会很麻烦,使用分号更能清楚哪里是语句的起止,而且有些情况下,漏掉分号会出 BUG
3. 块内函数声明
不要在块内声明一个函数,e.g.
if (x) {
function zxm() {}
}
如果确实需要,使用函数表达式来初始化变量
if (x) {
let foo = function() {}
}
4. 循环注意
forEach
map
filter
every
some
for..in
for...of
for循环 while
do...while
5. 命名规范：
camel 表示驼峰命名法 pascal表示 首字母大写
变量名: 必须使用 camel 命名法
参数名: 必须使用 camel 命名法
函数名: 必须使用 camel 命名法
方法/属性: 必须使用 camel 命名法
私有 ( 保护 ) 成员: 必须以下划线开头
常量名: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
类名: 必须使用 pascal 命名法
枚举名: 必须使用 pascal 命名法
枚举的属性: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API
命名空间: 必须使用 camel 命名法
语义: 命名同时还需要关注语义
6. 声明：
var let const 应该放在function 已进入函数的时候
注释变量的功能及代表的含义,且应以字母顺序排序.每个变量单独占一行以便添加注释
<!-- 举例： -->
var totalPrice = 1; //totalPrice表示商品购物车的总价 √
var num = 10,totalNum = 100 ; 不建议
7. 回调函数规范：
回调函数统一使用 Promise 函数,回调成功的参数统一为 res,错误参数为 err
let callback = new Promise((resolve, reject) => {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(err);
}
});
callback.then（（RES）=> {
console.log（ '成功コールバック！'、RES）;
}）。キャッチ（（ERR）=> {
console.log（ '失敗コールバック！'、ERR）。
}）;
8.句読点の規範
反統一引用符（）または引用符（「」）のない単一引用符（「」）、のJSを使用
9.機能デフォルト
デフォルト値は、裏に書かれた他のパラメータの関数であります
関数zxm（A、B、NAME = 'zxm'）{
console.log（名）
}