フロントエンドJSプロジェクト開発仕様


フロントエンドJSプロジェクト開発仕様


規範の目的は高品質のコードを書くためで、あなたのチームのメンバーに毎日気持ちが楽しくて、みんなが一緒にいるのは楽しいです.
「アリ規約」の冒頭の断片から引用します.
----現代のソフトウェアアーキテクチャの複雑性は共同で開発して完成する必要があり、どのように効率的に協同するのか.例えば、交通法規の制定は表面的には走行権を制限しなければならないが、実際には公衆の身の安全を保障している.ソフトウェアにとって、適切な規範と基準は決してコード内容の創造性、優雅性を消滅させるのではなく、過度な個性化を制限し、普遍的に認められている統一的な方法で一緒に仕事をし、協力効率を高め、コミュニケーションコストを下げる.コードの字の中の行間に流れるのはソフトウェアシステムの血液で、品質の向上はできるだけ少なく穴を踏んで、繰り返しの穴を踏んで、確実にシステムの安定性を高めて、コードは品質を出します.

一、プログラミング規約


(一)命名規範


1.1.1プロジェクトの命名
すべて小文字で区切られています.
正例:mall-management-system反例:mall_management-system / mallManagementSystem1.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 / UserManagement1.1.3 JS、CSS、SCSS、HTML、PNGファイル命名
すべて小文字で区切られています
正例:render-dom.js / signup.css / index.html / company-logo.png反例:renderDom.js / UserManagement.html1.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のブラウザでの応用サポートと最適化の空間は非常に限られています).
  • 所定文字符号化
  • IE互換モード
  • 所定文字符号化
  • doctype大文字
  • 正例:
    
    
      
        
        
        Page title
      
      
        ![](images/company-logo.png)
      
    

    1.2.2インデント
    インデントには2つのスペース(tab)を使用します.
    ネストされたノードはインデントする必要があります.
    1.2.3ブロックコメント
    各ブロック要素、リスト要素、表要素の後に、HTMLコメントのペアを追加します.コメント形式
    ![](images/header.jpg)