코드 사양의 목적은 고품질 코드를 작성하여 팀원이 매일 행복하고 모두가 함께 매일 행복하도록 하는 것입니다! []( 일반적으로 사용되는 코드 사양 조약을 나열해 보겠습니다. 나중에 개발할 예정입니다. 또한 코드 사양 규정을 개선하고 코드 사양 문서를 보다 완벽하게 만들기 위해 협력합니다.
1) 명명 규칙:
(1) 프로젝트 명명 규칙:
프로젝트 명명 규칙은 중간에 '-' 대시가 있는 모두 소문자를 사용하는 것입니다.
(2) 프로젝트 디렉토리 이름 지정:
프로젝트 디렉토리의 이름은 모두 소문자이며 중간에 '-'가 있습니다. 특별 참고 사항: vue 구성 요소 구성 요소 디렉토리 아래의 디렉토리는 큰 험프 명명 규칙을 사용합니다. vue 구성 요소 명명 사양을 참조하십시오.
(3) JS, CSS, SCSS, HTML, 그림 파일 명명 규칙:
모두 소문자 사용, '-'에서 대시 방식 사용;
(4) 파일 명명 엄격함:
네이밍 과정에서 중국어를 사용할 수 없다.한어 병음과 영어를 함께 엮고, 중국어와 영어를 함께 엮는다. 병음이 사용되더라도 모양을 줄이기 위해 피해야 하며, 명명에 비표준 약어를 사용하면 독자가 이해하기 어렵고 텍스트를 의미가 없게 만들 수 있습니다. 오랜 시간이 지나면 스스로 이해하지 못할 수도 있습니다.
2) HTML 사양:
(1) : 들여쓰기
HTML 요소는 탭 문자와 두 개의 스페이스 키를 사용하여 들여쓰기되어 코드 계층을 명확하게 만들 수 있습니다.
(2): 참고
중요한 구성 요소는 다음과 같은 html 주석을 추가해야 합니다. 테이블 형식, frome 형식 및 주석을 추가하는 기타 html 요소는 나중에 더 잘 수정할 수 있도록 합니다.
(3): 시맨틱 라벨링:
html5에 많은 시맨틱 태그 추가: 예:
및 기타 시맨틱 태그, 전체 페이지 div 태그를 끝까지 사용하지 마십시오.
(4): 요소 속성 값은 " "를 사용합니다.
요소 속성 값은 " " 큰따옴표를 사용합니다. vue 컴포넌트에서 속성 값의 문자 스플라이싱, 템플릿 구문 등으로 인해 요소에 대한 속성 선언 시 " " 큰따옴표를 사용하는 것이 표준입니다.
3) CSS 사양:
(1): 명명 규칙:
ID 이름은 카멜 케이스 명명 규칙을 사용합니다.
클래스 이름은 모두 소문자이며 밑줄로 구분됩니다.
scss의 변수, 함수, 혼합 및 자리 표시자는 큰 혹으로 명명됩니다.
참고: ID, 클래스, 요소의 목적과 용도를 반영할 수 있는 이름을 사용하십시오.
(2): 선택기:
css 선택기에서 html 태그 이름을 피하십시오; 성능, 구조, 동작 및 분리 원칙의 관점에서 css의 html 태그 이름은 페이지 태그 스타일을 오염시킵니다. 발생할 수 있는 몇 가지 잠재적인 문제도 있습니다.
하위 선택자: 체인 선택자를 작성할 때 성능 소모를 줄일 수 있는 반복 선택자 대신 하위 선택자를 직접 사용하는 것이 좋습니다.
(3): 속성 약어:
속성 약어를 사용해 보세요. 예: margin: 0, 0, 10px, 20px, margin-bottom: 10px는 권장하지 않음, margin-left: 20px
(4): 기타 사양:
각 선택자와 속성은 별도의 줄에 작성됩니다.
ID 및 레이블 선택기를 사용하지 마십시오. 오염된 페이지 스타일이 있습니다.
0 뒤의 단위는 생략합니다.
4) 자바스크립트 사양:
(1) 명명 규칙:
1. 소문자 카멜 케이스를 사용하여 lowerCamelCase의 이름을 지정하고 코드의 이름에 밑줄을 그을 수 없으며 밑줄 또는 달러 기호로 끝날 수 없습니다.
2. 메서드 이름, 매개 변수 이름, 멤버 변수 및 지역 변수는 모두 lowerCamelCase 스타일을 사용하며 험프 형식을 따라야 합니다.
3. 메쏘드의 이름은 동사 또는 동사+명사형이어야 한다.
추가, 삭제, 확인 및 수정은 세부사항에 대해 다음 5개 단어를 일률적으로 사용하며, 다른 단어는 허용하지 않음을 명시합니다(각 끝을 통일하기 위한 목적).
add / update / delete / detail / get 附： 函数方法常用的动词: get 获取/set 设置, add 增加/remove 删除, create 创建/destory 销毁, start 启动/stop 停止, open 打开/close 关闭, read 读取/write 写入, load 载入/save 保存, begin 开始/end 结束, backup 备份/restore 恢复, import 导入/export 导出, split 分割/merge 合并, inject 注入/extract 提取, attach 附着/detach 脱离, bind 绑定/separate 分离, view 查看/browse 浏览, edit 编辑/modify 修改, select 选取/mark 标记, copy 复制/paste 粘贴, undo 撤销/redo 重做, insert 插入/delete 移除, add 加入/append 添加, clean 清理/clear 清除, index 索引/sort 排序, find 查找/search 搜索, increase 增加/decrease 减少, play 播放/pause 暂停, launch 启动/run 运行, compile 编译/execute 执行, debug 调试/trace 跟踪, observe 观察/listen 监听, build 构建/publish 发布, input 输入/output 输出, encode 编码/decode 解码, encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩, pack 打包/unpack 解包, parse 解析/emit 生成, connect 连接/disconnect 断开, send 发送/receive 接收, download 下载/upload 上传, refresh 刷新/synchronize 同步, update 更新/revert 复原, lock 锁定/unlock 解锁, check out 签出/check in 签入, submit 提交/commit 交付, push 推/pull 拉, expand 展开/collapse 折叠, enter 进入/exit 退出, abort 放弃/quit 离开, obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集
4. 상수의 이름은 모두 대문자로 하고, 단어는 밑줄로 구분하며, 의미 표현은 완전하고 명료하도록 노력합니다.이름이 너무 길다고 생각하지 마세요.
긍정적인 예: 최대 재고 수
반례: MAX_COUNT
(2): 코드 형식:
1. 두 개의 들여쓰기를 사용하여 편집기의 들여쓰기 방법을 설정할 수 있습니다.
2. 논리, 의미, 비즈니스가 다른 코드 사이에 빈 줄을 삽입하여 구분하여 가독성을 높입니다.
3. 메서드, 변수, 클래스 등에 대한 코드 설명을 추가합니다.
4. 문자열, 작은따옴표를 균일하게 사용하고 큰따옴표에는 적합하지 않습니다.
(3): 객체 선언:
1. 리터럴 값을 사용하여 객체 생성
정례: let user = {};
반례: let user = new Object();
2. 객체 생성자 대신 리터럴 사용
(4): es6+ 사용:
코드 작성 과정에서 es6의 새로운 구문 설탕과 기능을 먼저 사용해야 코드를 단순화하고 코드 재사용성을 향상시킬 수 있습니다.
(5): js 기타 사양:
정의되지 않은 판단, 변수를 판단하기 위해 undefined를 직접 사용하지 말고 typeof와 문자열 'undefined'를 사용하여 변수를 판단하십시오.
조건판단과 루핑은 최대 3단계까지 있다 조건판단은 삼항연산자를 이용하여 해결하므로 조건판단은 사용하지 말고 너무 긴 삼항연산자를 사용하면 안된다 3단계를 초과하면 추출하여 작성한다 그것들을 함수로 만들고 명확한 주석을 작성하십시오.
this의 변환 명명: 컨텍스트에서 this의 이스케이프는 self를 사용해서만 명명할 수 있습니다.
console.log는 주의해서 사용하십시오. 성능 문제가 발생할 수 있습니다.
5), Vue 프로젝트 코드 사양:
vue 프로젝트 사양 및 vue의 공식 코드 사양이 우선합니다: (https://v3.cn.vuejs.org/api/sfc-spec.html)
Vue 공식 사양을 주의 깊게 읽으 십시오
(1) 구성 요소 사양:
1. 구성 요소 이름에 여러 단어가 있습니다.
2. 구성 요소 파일 이름은 Big Camel Case로 명명: PascalCase 형식
3. 기본 구성요소 파일명은 Base로 시작하며, 약어 대신 완전한 단어를 사용한다.
4. 상위 구성 요소와 밀접하게 결합된 하위 구성 요소는 상위 구성 요소 이름을 접두사로 사용하여 이름을 지정해야 합니다.
5. 템플릿 템플릿에서 컴포넌트를 사용할 때는 PascalCase 모드를 사용해야 하며 자동으로 닫히는 컴포넌트를 사용해야 합니다.
6. 소품 정의는 최대한 상세해야 합니다.
카멜케이스를 사용해야 함
유형을 지정해야 합니다.
의미를 나타내는 주석을 추가해야 합니다.
필수 또는 기본을 추가해야 하며 둘 중 하나를 선택하십시오.
업무상 필요가 있는 경우 검증자 검증 추가 필요
7. 구성 요소 스타일의 범위 설정
8. 특징적인 요소가 많으면 능동적으로 줄을 감는다.
(2) 템플릿에서 간단한 표현식 사용
구성 요소 템플릿에는 단순 표현식만 포함되어야 하며 복잡한 표현식은 계산된 속성 또는 메소드로 리팩터링되어야 합니다. 복잡한 표현식은 템플릿을 덜 선언적으로 만듭니다.
(3) 모든 지침은 약식을 사용합니다.
축약형을 사용하는 방법을 권장합니다. (v-bind:의 경우 @, v-on:의 경우 @, v-slot:의 경우 #)
(4) 레이블 순서를 일관되게 유지
<template>...</template> <script>...</script> <style>...</style>
(5) v-for에 대해 키 값 키를 설정해야 합니다.
v-for는 페이지 돔 번호 렌더링 성능을 최적화하는 데 도움이 되는 키 값 키를 설정해야 합니다.
(6), v-show 및 v-if 선택
런타임에 매우 자주 전환해야 하는 경우 v-show를 사용하고, 런타임에 조건이 거의 변경되지 않으면 v-if를 사용합니다.
(7), Vue 라우터 사양
1. 경로 지연 로딩(lazy loading) 메커니즘 사용
2. 라우터의 명명 규칙
3. 라우터의 경로 명명 규칙
4. 페이지 점프 데이터 전송은 라우팅 매개변수를 사용합니다.
6) vue 프로젝트 디렉토리 사양:
7) 기타 사양
(1) 쓸모없는 코드 삭제
git/svn과 같은 코드 버전 도구를 사용하기 때문에 쓸모없는 코드는 적시에 삭제해야 합니다.
(2) dom을 수동으로 조작하지 마십시오.
vue 프레임워크를 사용하기 때문에 프로젝트 개발에서 vue의 데이터 기반 업데이트 DOM을 사용하고 DOM 요소 추가, 삭제, 수정, 스타일, 이벤트 추가 등