フロントエンドJSプロジェクト開発仕様
2519 ワード
フロントエンドJSプロジェクト開発仕様
規範の目的は高品質のコードを書くためで、あなたのチームのメンバーに毎日気持ちが楽しくて、みんなが一緒にいるのは楽しいです.
「アリ規約」の冒頭の断片から引用します.
----現代のソフトウェアアーキテクチャの複雑性は共同で開発して完成する必要があり、どのように効率的に協同するのか.例えば、交通法規の制定は表面的には走行権を制限しなければならないが、実際には公衆の身の安全を保障している.ソフトウェアにとって、適切な規範と基準は決してコード内容の創造性、優雅性を消滅させるのではなく、過度な個性化を制限し、普遍的に認められている統一的な方法で一緒に仕事をし、協力効率を高め、コミュニケーションコストを下げる.コードの字の中の行間に流れるのはソフトウェアシステムの血液で、品質の向上はできるだけ少なく穴を踏んで、繰り返しの穴を踏んで、確実にシステムの安定性を高めて、コードは品質を出します.
一、プログラミング規約
(一)命名規範
1.1.1プロジェクトの命名
すべて小文字で区切られています.
正例:
mall-management-system
反例:mall_management-system / mallManagementSystem
1.1.2ディレクトリ名すべて小文字で区切られています.複数の構造がある場合は、複数のネーミング法を使用します.略語は複数ではありません.
正例:
scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc
反例:script / style / demo_scripts / demoStyles / imgs / docs
【特殊】VUEのプロジェクトにおけるcomponentsのコンポーネントディレクトリは、kebab-caseを使用して命名される正例:
head-search / page-loading / authorized / notice-icon
反例:HeadSearch / PageLoading
【特殊】VUEのプロジェクトにおけるcomponentsコンポーネントディレクトリ以外のすべてのディレクトリについてもkebab-caseネーミングの正例:page-one / shopping-car / user-management
反例:ShoppingCar / UserManagement
1.1.3 JS、CSS、SCSS、HTML、PNGファイル命名すべて小文字で区切られています
正例:
render-dom.js / signup.css / index.html / company-logo.png
反例:renderDom.js / UserManagement.html
1.1.4命名の厳格性コードの中の命名はピンインと英語を混合することを厳禁し、中国語を直接使用することは許されない.説明:正しい英語のスペルと文法は、読者が理解しやすく、曖昧さを避けることができます.ピンインのみのネーミングでも採用は避けてください
正例:
henan / luoyang / rmb , 。
反例:DaZhePromotion [ ] / getPingfenByName() [ ] / int = 3
完全に規範化されていない略語を根絶し、望文が意味を知らないことを避ける.反例:AbstraactClassの「略語」はAbsClassと命名された.conditionの「略語」はcondiと命名され、このような任意の略語はコードの読み取り性を著しく低下させる.
(二)HTML仕様(Vue Template同様適用)
1.2.1 HTMLタイプ
HTML 5を使用することを推奨する文書タイプの説明:.(text/html形式のHTMLを使用することをお勧めします.XHTMLは使用しないでください.XHTMLとその属性、例えばアプリケーション/xhtml+xmlのブラウザでの応用サポートと最適化の空間は非常に限られています).
Page title
![](images/company-logo.png)
1.2.2インデント
インデントには2つのスペース(tab)を使用します.
ネストされたノードはインデントする必要があります.
1.2.3ブロックコメント
各ブロック要素、リスト要素、表要素の後に、HTMLコメントのペアを追加します.コメント形式
![](images/header.jpg)