코드를 통합하고 재사용하는 효과를 얻으려면 더 많은 예외와 적응성을 고려해야 하기 때문에 일반적으로 컨트롤을 만드는 것이 동일한 기능만 구현하는 모듈보다 더 복잡하다는 것을 알고 있습니다. 그리고 ASP.NET 컨트롤을 개발할 때 컨트롤의 기능과 UI 성능이 아무리 복잡하더라도 결국 클라이언트 브라우저에 표시되는 것은 HTML 코드와 스크립트의 조합일 뿐입니다.
이러한 컨트롤에 의해 생성된 HTML 코드의 형식을 마음대로 처리할 수 있습니까? 그렇다면 자유롭지 않다는 것은 무엇을 의미하는가? HTML 코드의 형식을 확인하고 HTML의 적절한 계층적 들여쓰기를 유지해야 합니까? 반대로 여기에서는 "쓸모 없는" 공백과 캐리지 리턴을 포함하여 컨트롤의 HTML 코드와 관련이 없는 모든 항목을 제거해야 합니다. 왜 쓸모없는 것을 강조합니까? 브라우저가 HTML 소스 코드를 처리할 때 연속된 공백과 캐리지 리턴이 처리되어 하나의 공백으로 표시되는 것을 알고 있습니다. 따라서 ASP.NET 컨트롤이 렌더링될 때 HTML 코드 전후 또는 중간에 불필요한 불필요한 공백이나 캐리지 리턴에 대해 신경 쓸 필요가 없는 것 같습니다. 그럼 다음 예를 살펴보겠습니다. <img id="analyticChart" src="ChartPic_000007.jpeg?B9FA64E7-2020-4430-AAF4-B20A51794909" usemap="#usemap_analyticChart">
<map id="usemap_analyticChart">
<지역>...<지역>
</map>
'www.downcodes.com
위의 코드 조각은 Dundas 웹 컨트롤의 웹 차트 컨트롤에서 출력된 HTML 코드입니다. 이 Chart 이미지를 Hot Area에 사용하면 문제가 없을 것 같습니다. 이 Chart만 단독으로 사용한다면 전혀 문제가 되지 않습니다. 그러나 Dundas Chart를 사용자 정의 WebControl에 결합하면 줄 바꿈 및 들여쓰기가 포함된 HTML 코드로 인해 문제가 발생합니다. 레이아웃 요구로 인해 이 차트를 테이블에 넣고 테이블이 차트를 둘러싸는 픽셀 테두리를 표시하도록 해야 합니다. 원래 이 차트의 모습은 그저 그림일 뿐이고, 이 조합에는 문제가 없어 보였지만, 실제 상황은 차트의 그림이 결코 외부 테이블을 채울 수 없었고(아래 그림 참조) 거기에 있었습니다. 사진 하단과 테이블 하단 가장자리에는 항상 3~4픽셀의 간격이 있습니다. 이 간격은 <img />와 <map> 사이의 공백과 줄바꿈으로 인해 발생합니다(IE에서는 이를 공백으로만 처리하지만).
|
Dundas Web Chart는 컴파일된 DLL로 출시되었기 때문에 출력되는 HTML에서 불필요한 공백과 캐리지 리턴을 삭제하는 것이 더 번거롭습니다. 렌더 스트림에서 HTML 코드만 꺼낸 다음 태그 사이의 공백과 캐리지 리턴을 수동으로 제거한 다음 이를 새 컨트롤의 출력 스트림으로 출력할 수 있습니다. 이 방법을 사용하면 일부 문제는 해결할 수 있지만 내부 제어가 너무 복잡하면 정확성과 효율성 측면에서 추가적인 부담이 됩니다.
따라서 위의 질문을 통해 우리는 ASP.NET 컨트롤을 만들 때 최종적으로 렌더링되는 HTML 코드가 컨트롤의 적응성을 향상시키기 위해 "코드 압축 원칙"을 따라야 한다는 것을 알 수 있습니다. 이 원칙에 따라 이전 예제는 다음과 같아야 합니다.
<img id="analyticChart" src="ChartPic_000007.jpeg?B9FA64E7-2020-4430-AAF4-B20A51794909" usemap="#usemap_analyticChart"><map id="usemap_analyticChart"><area>...<area></ 지도>
이러한 방식으로 차트 이미지는 이를 둘러싼 테이블 테두리에 밀접하게 인접해 있습니다.