관심사 분리
1. 관심사 분리
페이지 원칙 라벨, 스타일, 행위 세 가지를 분리하면 다음과 같다.
Document
WebUI Popover
This is webui popover demo.
just enjoy it and have fun !
// do something
이렇게 html, css, js는 모두 한 페이지에 있는데 만약에 변경이 필요하다면 매우 번거로워질 것이다. 코드량이 증가함에 따라 페이지도 난잡해지고 후기에 유지하기 어렵다.
Document
WebUI Popover
This is webui popover demo.
just enjoy it and have fun !
CSS, JavaScript'박리'페이지를 링크로 도입하면 이 세 가지가 서로 독립된다. HTML은 페이지 구조에 전념하고 CSS는 페이지 스타일에 전념하며 JavaScript는 페이지 행위에 전념한다. 이렇게 하면 서로 영향을 주지 않지만 서로 제약하고 페이지도 더욱 뚜렷해진다.
"비록 우리는 함께 있지 않지만, src/link 하나로 우리를 긴밀하게 연결할 수 있다."
2. 상태 이동
이상의 관심점 분리 원칙을 제외하고 매우 중요한 원칙, 즉 상태 이동도 있다.
$('.button').on('click',function(e){
let $button = $(e.currentTarget)
if($('.popover').hasClass('active')){
$('.popover').css('display','none') // not good
}else{
$('.popover').css('display','block')
}
})
$('.button').on('click',function(e){
let $button = $(e.currentTarget)
if($('.popover').hasClass('active')){
$('.popover').removeClass('active') // good
}else{
$('.popover').addClass('active')
}
})
JavaScript가 책임지는 내용은 페이지 스타일의 상태 변화라고 생각할 수 있습니다. 페이지의 스타일을 직접적으로 바꾸지 않고 페이지의 상태를 일부 요소에 제거하거나 특정한 클래스를 추가하여 간접적으로 스타일을 바꿀 수 있습니다. (다른 방법도 있지만 CSS 스타일을 바꾸는 것을 추천하지 않습니다) 이런 방법은 관심점 분리의 원칙을 간접적으로 나타냅니다.따라서 상태 이동도 관심점 분리의 일종으로 볼 수 있는데 목적은 모두 삼자 간의 관계를 더욱 잘 나타내기 위한 것이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
