홈페이지>웹 디자인 튜토리얼>웹 표준화

웹 프론트엔드 개발 사양 문서(2014년 버전)

저자：Eve Cole 업데이트 시간：2024-12-30 10:51:21

사양

이는 코드의 표준화 및 유지 관리성을 향상시키기 위해 프런트 엔드 개발 팀이 따르고 합의한 코드 작성 표준입니다.

기본 원리

웹 표준, 시맨틱 HTML 준수, 구조와 성능, 동작의 분리, 뛰어난 호환성을 준수하며, 페이지 성능 측면에서 코드는 간결하고 명확하며 질서정연해야 서버 부하를 최대한 줄이고, 가장 빠른 구문 분석 속도.

일반 사양

1. 프로토콜 무시(생략): background: url(http://www.google.com/images/example); 특정 프로토콜을 사용해야 하는 경우를 제외하고는 https 프로토콜로 http 전환을 용이하게 합니다.
2. IDE를 사용하여 글을 쓸 때 명확한 수준의 들여쓰기를 달성합니다. 탭 키는 공백 4개로 대체됩니다.

다른 시스템의 편집 도구는 탭을 다르게 해석하기 때문에 Windows에서는 탭 키가 4개의 공백을 차지하는 반면 Linux에서는 8개의 공백을 차지합니다(탭 키 점유 위치를 직접 설정하지 않는 한 위치 길이).

예를 들어 숭고한 텍스트의 경우 이 도구에서 탭 키를 설정할 수 있습니다.

3. 라벨 속성에는 소문자를 사용하세요.

4. 차이를 방지하기 위해 끝에 공백을 두지 마십시오.

5. UTF-8(BOM 없음)을 사용하고 문서에 <meta charset="utf-8″>을 추가합니다.

6. 파일 이름은 소문자 ".js"를 사용하고, "_" 대신 "-"를 사용하는 것을 권장합니다.

7.TODO(연락처) 및 TODO: 작업 항목, @@을 사용하지 마세요.

HTML 개선 사양
1. html5 <!DOCTYPE html> 사용 사양
2. <img> 태그의 기본 형식은 src="" 문제를 방지하기 위한 <img src="xxx.png" alt="default text" />입니다.
3. <a> 태그의 기본 형식: <a href="###" title="링크 이름">xxx</> 참고: target="_blank"는 필요에 따라 결정됩니다.
4. <a> 태그는 ###을 사용하여 링크 자리 표시자를 예약합니다. 참조: 태그 자리 표시자 문제
5. 링크 주소 작성 시 리디렉션을 피해야 합니다. 예: href="http://itaolun.com/", 즉 URL 주소 뒤에 "/"를 추가해야 합니다.
6. 모든 태그는 XHTML 표준에 따라 닫혀야 합니다.
7. 태그 끝에는 항상 동일한 슬래시 형식을 사용하십시오. <br /> <hr /> 태그 사이의 공백에 주의하세요.
8. <b> <u> <i>와 같은 오래된 태그를 사용하지 말고 <strong> <em> 등으로 교체하세요.
9. data-xxx를 사용하여 다음과 같은 사용자 정의 데이터를 추가합니다. <input data-xxx="yyy"/>
10. 참조 HTML 기호 엔터티를 사용하여 인라인 스타일 시트에 style="xxx:xxx;" 특수 기호를 사용하지 마세요.
11. 설명 양식 요소(입력, 텍스트 영역)에 라벨을 추가해야 합니다. <p>이름: <input type="text" id="name" name="name" /></p>은 다음과 같이 작성해야 합니다. : < p><label for=”name”>이름: </label><input type=”text” id=”name” /></p>

CSS 개선 사양
1. 각 스타일 속성 뒤에 ";"를 추가합니다.
편리한 압축 도구 "문장 분할".
2. 클래스 이름 지정, "-"[빼기 기호 커넥터]를 사용하여 클래스의 문자를 구분합니다.
카멜케이스를 사용하는 것보다 "-"로 구분하는 것이 더 명확합니다.
제품군-제품-모듈-하위 모듈, 이름을 지정할 때도 이 방법을 사용할 수 있습니다.
ID: CamelCase 명명법:
이름 topBox목록 바닥글저작권
3. 공간 사용에는 다음 규칙이 적용됩니다.

 .호텔 콘텐츠 { 
글꼴 두께: 굵게; 
}

선택기와 { 앞에는 공백이 있어야 합니다. 속성 이름 뒤에는 공백이 있어야 합니다. 속성 이름 뒤에는 공백이 있어야 합니다. 앞에 공백을 추가하는 이유 중 하나는(금지됨) 두 번째로 IE 6에 버그가 있습니다. .버그를 찌르세요.
4. (권장) 속성 쓰기 순서. 예:

 .호텔 콘텐츠 {
     /* 위치*/
     디스플레이: 블록;
     위치: 절대;
     왼쪽: 0;
     상단: 0;
     /* 박스 모델 */
     너비: 50px;
     높이: 50px;
     여백: 10px;
     테두리: 1px 단색 검정;
     / *다른* /
     색상: #effefef;
}

위치 지정과 관련된 일반적인 항목에는 표시 위치 왼쪽 상단 부동 등이 포함됩니다. 상자 모델과 관련된 일반적인 항목에는 너비, 높이, 여백, 패딩, 테두리 및 기타 속성이 포함됩니다.

이 순서대로 작성하면 브라우저의 DOM 렌더링 성능이 향상될 수 있습니다. 예를 들어 웹 페이지에서 그림의 너비와 높이가 설정되지 않은 경우 그림이 로드되기 전에는 차지하는 공간이 0이지만, 이후에는 그림이 차지하는 공간이 0입니다. 로드된 경우 0 공간이 갑자기 늘어나서 그 아래의 요소가 재배열되고 렌더링되어 다시 그리기 및 리플로우가 발생합니다. CSS를 작성할 때 먼저 요소의 위치를 ​​지정합니다. 먼저 요소가 텍스트 흐름 내부인지 외부인지, 그리고 페이지의 위치를 ​​브라우저에 알려줍니다. 테두리 등. 공간을 차지하는 속성과 기타 속성이 이 고정된 영역 내에 렌더링된다는 것이 바로 그 의미입니다~
추천 기사:

설문 조사 결과: CSS 속성의 순서는 어떻게 됩니까?
http://www.mozilla.org/css/base/content.css
5. (권장) 특정 HTML 구조에 대한 스타일 작성 시 요소명 + 클래스명을 사용

 /* 모든 탐색은 ul용으로 작성되었습니다*/
ul.nav {
     ...
}

".a div"와 ".a div.b", 왜 후자가 더 좋나요? 요구 사항이 변경되어 ".a" 아래에 추가 div가 추가되면 초기 스타일이 후속 div에 영향을 미치나요~
6. (권장하지 않음) 즉, (금지) 표현식 사용에 필터 사용
여기서 가장 중요한 문제는 효율성에 특히 주의하고 CPU를 소모하는 것들을 줄여야 합니다~
7. CSS 주석은 한 줄에 주석을 달 때 "/* */"로 표시됩니다. 여러 줄에 주석을 달 때 주석이 달린 개체와 앞뒤 주석 문자는 각각 공백을 유지하고 별도의 줄을 차지합니다. 문자와 종료 주석 문자는 각각 한 줄을 차지합니다. 예를 들어:

 /* CSS에 주석 달기 */
/* 
테이블 {
    국경 붕괴: 붕괴;
} 
*/

JS 개선 사양

1. 줄 바꿈

각 코드 줄은 120자 미만이어야 합니다. 이 숫자보다 큰 경우 줄 끝 부분에 "." 또는 "+"와 같은 연산자를 배치하는 것이 좋습니다. 새 줄은 새 줄보다 한 단계 더 들여쓰기되어야 합니다.

함수나 메소드의 매개변수가 길면 적절히 나누어서 사용하세요.

return 키워드와 반환할 표현식 사이에는 줄 바꿈이 금지됩니다. 예를 들어:

 // 실제로 반환되는 것은 1이 아니라 정의되지 않았습니다.
함수 테스트() {
    반품
        1;
}

2. 코드 라인
 한 줄에 여러 개의 짧은 문장을 쓰는 것은 금지됩니다. 즉, 한 줄에 하나의 문장만 쓰는 것이 금지됩니다.
if, for, do, while, switch, case, default, break 및 continue와 같은 문은 한 줄을 차지합니다.
if, for, do, while 등 모든 루프 본문과 판단 본문의 실행문은 "{}"로 묶어야 하며, 중괄호는 생략할 수 없습니다. 예를 들어:

 // 틀린 경우 (i < 5) i += 1;
 
// (i < 5)인 경우 수정 {
    나는 += 1
}

3. 정렬 <br />코드 블록의 구분자 {}인 "{"는 이전 줄 뒤에 오고 앞의 공백으로 구분됩니다. "}"는 전용 줄을 차지하고 동일한 열에 위치해야 합니다. 이를 참조하는 문과 왼쪽 정렬됩니다.
위의 들여쓰기 방법은 if, for, do, while, switch, Case 문에서 함수 본문, 클래스 정의 및 프로그램의 시작 부분에 사용해야 합니다.
4. 공간
 키워드를 강조 표시하려면 키워드 뒤에 공백이 있어야 합니다.
함수 이름, 메서드 이름 및 왼쪽 대괄호 "(" 사이에는 공백이 있을 수 없습니다. 예를 들면 다음과 같습니다.

 // 잘못된 함수 getInfo () {
    // 코드
}
 
// 올바른 함수 getInfo() {
    // 코드
}

함수 표현식을 선언할 때 함수와 왼쪽 대괄호 "(" 사이에 공백을 둘 수 없습니다. 예를 들면 다음과 같습니다.

 // 틀렸습니다 var user = function () {
    // 코드
}
 
// 올바른 var user = function() {
    // 코드
}

쉼표 뒤에 공백을 추가합니다.

할당 연산자, 비교 연산자, 산술 연산자, 논리 연산자, 비트 필드 연산자(예: "=", "+=" ">=", "<=", "+", "*", "% ", "&&) ", "||" 및 기타 이진 연산자 앞에는 공백이 와야 합니다.

"!", "~", "++", "--" 및 "&"(주소 연산자)와 같은 단항 연산자 앞뒤에 공백이 없습니다.

"." 및 "[]" 앞뒤에 공백이 없습니다.

5. 빈 줄

각 클래스 선언 뒤와 각 함수 정의 끝에 빈 줄을 추가합니다.

함수 본문 내에서 논리적으로 밀접하게 관련된 문장은 빈 줄로 구분하면 안 되며, 그 외의 부분은 빈 줄로 구분해야 합니다.

6. 엄격한 조건 연산자를 사용하세요. == 대신 ===를 사용하고 != 대신 !==를 사용하세요.

7. 추가 쉼표를 사용하지 마세요. 예: var arr = [1,2,3,]

8. 명령문은 function, if, switch, try 및 while을 제외하고 모두 세미콜론으로 끝나야 합니다.

9. 왼쪽 중괄호를 줄 끝에 배치하고 오른쪽 중괄호를 줄 시작 부분에 배치합니다.

10. new Number, new String, new Boolean, new Object({}로 대체), new Array([]로 대체) 등의 객체 유형을 구성하는 데 new를 사용하는 것은 권장되지 않습니다.

11. 배열 멤버 사이에 "," 뒤에 공백이 있어야 합니다.

12. js/json에서 javascript 예약 키워드 이름 지정을 사용하는 것은 금지되어 있습니다. 이는 IE에서 쉽게 오류를 일으킬 수 있습니다. 키워드(break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with), 키워드(추상, 부울, 바이트, 문자, 클래스, con) st, 디버거, 더블, 열거형, 내보내기, 확장, fimal, float, goto, 구현, 가져오기, int, 인터페이스, long, matative, 패키지, 비공개, 보호됨, 공개, 짧은, 정적, super, 동기화됨, 발생, 일시적, 휘발성 물질).

13. 개행 커넥터로 "" 대신 "+"를 사용하는 것이 좋습니다.

14. 프롬프트 정보는 간결하고 명확해야 합니다. 정보를 볼 때 오류를 즉시 찾을 수 있어야 합니다. 예를 들어 오류를 보고하기 위해 사용자 정보를 묻는 경우 "이 사용자는 존재하지 않습니다." " 대신 "백그라운드에서 반환된 데이터가 올바르지 않습니다", " 네트워크 시간 초과".

관련 기사