웹 프론트엔드 HTML 튜토리얼 프론트엔드 개발에서 코드 주석의 역할과 사용법 시연

프론트엔드 개발에서 코드 주석의 역할과 사용법 시연

Sep 15, 2018 pm 05:41 PM

우리가 페이지를 작성할 때 댓글은 필수적인 부분입니다. 한편으로는 코드의 구조를 명확하게 볼 수 있어 찾기가 더 쉬워지고, 다른 한편으로는 동료들 간의 작업 인계에도 도움이 됩니다. . 물론코드 주석도 표준화된 방식으로 사용해야 합니다. 그래서 오늘은 프론트엔드 코드에 대한 설명에 대해 이야기해보겠습니다. 도움이 필요한 친구들이 참고하시면 좋겠습니다.

1. 코드 주석의 용도는 무엇인가요? 1. 의사 코드와 동일한 기능을 가지며, 다음에 구현할 함수에 대한 안내 알고리즘 아이디어를 작성합니다. 의사코드만큼 상세하지는 않습니다. 그러나 이 기능을 완성하기 위한 일반적인 알고리즘 아이디어도 지적된다. 2. 코드를 읽는 사람들에게 설명 메모를 제공하세요. 코드를 보는 사람은 본인뿐이라는 점에 유의하세요. 귀하의 코드를 보는 사람들이 귀하가 작성한 내용을 이해하기 위해 읽을 때마다 한 줄씩 읽지 않고도 코드를 빠르게 찾아볼 수 있습니다.


2. 코드 주석 사양은 다음 원칙을 따라야 합니다

1. 독자가 코드 논리와 구조를 더 잘 이해할 수 있도록 도와줍니다.2. 특별하거나 이해하기 어려운 작성 방법을 설명할 수 있습니다

3. : TODO, FIXME 등 특별한 의미를 지닌 표시

4. 파일 주석: 일부 규정에서는 파일 헤더에 작성자, 프로토콜 및 기타 정보를 표시하는 등 고정 형식의 주석을 작성하도록 요구합니다. 일부 규정에서는 API 클래스, 함수 등을 요구합니다. 문서 주석(예: jsdoc 스타일)을 사용합니다.
6. 주석 자체의 가독성을 보장하기 위해 특정 공백 및 빈 줄과 같은 통일된 스타일 사양을 따릅니다.


3. 방법 코드 주석 작성

1. HTML 코드 주석: ;

<!-- html中要注释的内容 -->
在web页面中,最常见的注释就是这种了。我们在布局页面结构的时候,会添加少许的注释方便我们查找与记忆我们的想法。
那么在页面中除了这样的注释外,还有那些注释呢,这里我列举一些:
If条件不同版本浏览器注释列表:
<!--[if !IE]>除IE外都可识别<![endif]--> 
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]--> 
<!--[if IE 6]> 仅IE6可识别 <![endif]--> 
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> 
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> 
<!--[if IE 7]> 仅IE7可识别 <![endif]--> 
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> 
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
로그인 후 복사
2. CSS 코드 주석: /* 주석 내용*/

HTML의 주석 형식과 다릅니다. CSS에서는 /* 주석 형식 */ 형식을 취합니다. 주석 내용에는 한 줄이나 여러 줄이 없습니다.

/*.aa,.bb {
                height: 100px;
                margin: 1px;
                background: #ccc;
            }*/
로그인 후 복사

3. JS 코드 주석: //Comment 내용; 또는 /* Comment 내용*/,

js의 주석은 htmlcss와 다르게 한 줄과 여러 줄로 구분되는데, 종류가 다양하다고 소개하겠습니다. 하나씩.

(1) // 슬래시 두 개는 한 줄 주석을 나타냅니다.

(2) 를 한 줄 주석으로 사용하세요. 여러 줄 주석

//          function out(obj){
//              obj.innerHTML = "移出了";
//              obj.style.background = "#ccc";        
//          }
로그인 후 복사


요약
: 프론트엔드 개발자는 코드 주석의 목적과 원칙을 깊이 이해하고 주석 규칙을 따르고 도구와 결합하여 사용해야 합니다. 코드의 가독성과 유지관리성을 향상시켜 코드 품질을 향상시킵니다.

위 내용은 프론트엔드 개발에서 코드 주석의 역할과 사용법 시연의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

2023년에 주목받을 프런트엔드 개발 트렌드를 알아보세요! 2023년에 주목받을 프런트엔드 개발 트렌드를 알아보세요! Mar 14, 2023 am 09:37 AM

프런트엔드 개발 트렌드는 항상 진화하고 있으며 일부 트렌드는 오랫동안 인기를 유지하고 있습니다. 이번 글에서는 2023년에 주목받을 프론트엔드 개발 트렌드를 요약하고 공유해보겠습니다~

프론트엔드 개발에 PHP와 Angular를 사용하는 방법 프론트엔드 개발에 PHP와 Angular를 사용하는 방법 May 11, 2023 pm 04:04 PM

인터넷의 급속한 발전과 함께 프론트엔드 개발 기술도 지속적으로 개선되고 반복되고 있습니다. PHP와 Angular는 프런트엔드 개발에 널리 사용되는 두 가지 기술입니다. PHP는 양식 처리, 동적 페이지 생성, 액세스 권한 관리와 같은 작업을 처리할 수 있는 서버측 스크립팅 언어입니다. Angular는 단일 페이지 애플리케이션을 개발하고 구성 요소화된 웹 애플리케이션을 구축하는 데 사용할 수 있는 JavaScript 프레임워크입니다. 이 기사에서는 프론트엔드 개발에 PHP와 Angular를 사용하는 방법과 이들을 결합하는 방법을 소개합니다.

Flet: 크로스 플랫폼 Flutter 기반 Python 프레임워크 Flet: 크로스 플랫폼 Flutter 기반 Python 프레임워크 Apr 20, 2023 pm 05:46 PM

어제 저는 Python 데스크톱 개발 라이브러리의 전체 컬렉션에 대한 작은 헤드라인을 게시했는데, 제 동료가 Flet 라이브러리를 발견했습니다. 이것은 매우 새로운 라이브러리입니다. 첫 번째 버전은 올해 6월에 출시되었습니다. 매우 새롭지만, 거대한 Flutter의 지원을 받으며 현재는 지원하지 않지만 Python을 사용하여 전체 플랫폼 소프트웨어를 개발할 수 있습니다. 모든 플랫폼, 작성자의 계획에 따르면 Flutter가 지원하는 것은 무엇이든 앞으로도 지원될 것입니다. 어제 간단히 연구했는데 모든 사람에게 정말 좋습니다. 나중에 일련의 작업을 수행하는 데 사용할 수 있습니다. FletFlet은 프런트 엔드 개발 경험이 없어도 원하는 언어로 대화형 다중 사용자 웹, 데스크탑 및 모바일 애플리케이션을 구축할 수 있는 프레임워크입니다. 주인

코드를 밝히세요: PHPDoc을 사용하여 코드 베이스를 밝히세요 코드를 밝히세요: PHPDoc을 사용하여 코드 베이스를 밝히세요 Mar 01, 2024 pm 03:07 PM

PHP 개발자로서 명확하고 유지 관리가 가능한 코드를 작성하는 것은 매우 중요합니다. 코드 주석은 이 목표를 달성하는 열쇠이며, PHP의 문서 생성 표준인 phpDoc은 강력하고 표준화된 주석 도구를 제공합니다. PHPDoc 기본 사항 PHPDoc 주석은 /* 및 / 태그로 둘러싸여 있으며 특정 구문을 따릅니다: /*** 함수 또는 클래스 설명 ** @param 유형 $ 매개변수 이름 설명 * @ 반환 유형 설명 */ 함수 주석 함수 주석은 다음을 제공합니다. 정보: 함수 설명 매개변수 유형 및 설명 반환 값 유형 및 설명 예: /*** 두 숫자의 합을 계산합니다 ** @paramint$a 첫 번째 숫자 * @paramint$b 두 번째 숫자 * @returnint 및 *

프론트엔드 개발과 백엔드 개발의 차이점과 연관성 프론트엔드 개발과 백엔드 개발의 차이점과 연관성 Mar 26, 2024 am 09:24 AM

프론트엔드와 백엔드 개발은 완전한 웹 애플리케이션을 구축하는 데 있어 두 가지 필수 측면이지만 둘 사이에는 분명한 차이점이 있지만 밀접하게 연관되어 있습니다. 이 기사에서는 프런트엔드 개발과 백엔드 개발 간의 차이점과 연관성을 분석합니다. 먼저 프론트엔드 개발과 백엔드 개발의 구체적인 정의와 업무를 살펴보겠습니다. 프론트엔드 개발은 주로 사용자 인터페이스와 사용자 상호작용 부분, 즉 사용자가 브라우저에서 보고 조작하는 부분을 구축하는 일을 담당합니다. 프런트 엔드 개발자는 일반적으로 HTML, CSS, JavaScript와 같은 기술을 사용하여 웹 페이지의 디자인과 기능을 구현합니다.

세션 저장소를 사용하여 프런트엔드 개발 효율성을 높이는 방법을 알아보세요. 세션 저장소를 사용하여 프런트엔드 개발 효율성을 높이는 방법을 알아보세요. Jan 13, 2024 am 11:56 AM

sessionStorage의 역할을 익히고 프런트엔드 개발 효율성을 높이려면 구체적인 코드 예제가 필요합니다. 인터넷의 급속한 발전과 함께 프런트엔드 개발 분야도 날이 갈수록 변화하고 있습니다. 프런트엔드 개발을 할 때, 우리는 종종 대량의 데이터를 처리하고 후속 사용을 위해 브라우저에 저장해야 합니다. SessionStorage는 임시 로컬 저장소 솔루션을 제공하고 개발 효율성을 향상시킬 수 있는 매우 중요한 프런트 엔드 개발 도구입니다. 이번 글에서는 sessionStorage의 역할을 소개하겠습니다.

프론트 엔드 개발의 JavaScript 비동기 요청 및 데이터 처리 경험 요약 프론트 엔드 개발의 JavaScript 비동기 요청 및 데이터 처리 경험 요약 Nov 03, 2023 pm 01:16 PM

프론트엔드 개발에서의 JavaScript 비동기 요청 및 데이터 처리 경험 요약 프론트엔드 개발에서 JavaScript는 페이지에서 대화형 및 동적 효과를 얻을 수 있을 뿐만 아니라 비동기 요청을 통해 데이터를 얻고 처리할 수도 있는 매우 중요한 언어입니다. . 이 기사에서는 비동기 요청 및 데이터를 처리할 때의 몇 가지 경험과 팁을 요약하겠습니다. 1. XMLHttpRequest 개체를 사용하여 비동기 요청을 만듭니다. XMLHttpRequest 개체는 JavaScript에서 전송하는 데 사용됩니다.

node.red 란 무엇입니까? node.red 란 무엇입니까? Nov 08, 2022 pm 03:53 PM

node.red는 하드웨어 장치, API 및 온라인 서비스를 새롭고 흥미로운 방식으로 연결하기 위한 흐름 기반 로우 코드 프로그래밍 도구인 Node-RED를 의미합니다. 이는 다음을 사용하여 흐름을 쉽게 연결할 수 있는 브라우저 기반 편집기를 제공합니다. 편집 패널의 다양한 노드를 클릭 한 번으로 런타임에 배포할 수 있습니다.

See all articles