최근에는 기사, PPT 등 '모듈화'에 푹 빠져 관련해서 많은 생각을 하게 되었습니다. 이 기간 동안의 "모듈화"에 대한 나의 생각을 정리하자면 대부분은 페이지 재구성 작업에 대한 나의 경험과 이해를 바탕으로 한 것이므로 어느 정도 한계가 있으며 복습을 통해 새로운 것을 배울 수 있기를 바랍니다. 과거.
"Modular"는 "Ajax"처럼 우리가 과거에 사용해왔던 기술과 방식을 유행하는 이름일 뿐입니다. 그러나 페이지 재구성의 발전 추세에 따라 사람들은 그것에 점점 더 많은 관심을 기울이고 있으며 무의식적으로 "모듈화"에 대해 이야기하는 경우가 많지만 "모듈화"가 무엇인지 정말로 이해하고 있습니까?
모듈성이란 무엇입니까?
CNKI에는 "모듈성"에 대한 28가지 해석이 있습니다. '모듈식' 사고가 널리 사용되고 있음을 알 수 있다. 페이지 재구성에서 "모듈화"에 대한 가장 가까운 설명은 아마도 소프트웨어 개발에서의 설명일 것입니다.
먼저 Baidu의 항목이 " 모듈성 "을 어떻게 설명하는지 살펴보겠습니다.
모듈화란 복잡한 문제를 해결할 때 소프트웨어 시스템을 위에서 아래로 계층별로 여러 모듈로 나누는 과정을 말합니다. 각 모듈은 특정 하위 기능을 완성하며, 모든 모듈은 특정 방식으로 조립되어 전체 시스템에 필요한 기능을 완성합니다. 모듈에는 인터페이스, 기능, 로직 및 상태와 같은 기본 속성이 있습니다. 기능, 상태 및 인터페이스는 모듈의 외부 특성을 반영하고 로직은 모듈의 내부 특성을 반영합니다. 소프트웨어 아키텍처에서 모듈은 결합, 분해, 교체가 가능한 단위입니다.
관련 서적도 꽤 많이 있고, 관심 있는 학생들이 검색해 볼 수도 있습니다. 우리가 배우는 것은 사고방식이라는 점을 강조할 필요가 있습니다.
페이지 제작이 왜 모듈화되어야 합니까?
사이트의 콘텐츠가 증가하고 코드가 비대해지고 있으며 이는 점차 클라이언트 경험(주로 열기 속도)과 유지 관리 효율성에 영향을 미칩니다. 이러한 문제를 해결할 수 있는 방법이 있나요?
우리는 코드 중복성 감소, 코드 재사용 개선, 이미지 압축 등을 쉽게 생각할 수 있지만 이를 달성하는 방법은 무엇입니까? 모듈식 사고를 해결할 수 있어 코드 중복을 효과적으로 줄이고 코드 재사용을 향상할 수 있습니다. 더 중요한 것은 여러 사람의 유지 관리를 지원하고 유지 관리 비용을 줄일 수 있다는 것입니다. CSS 작성 방법은 더 유연하고 코드 결합을 쉽게 일으킬 수 있습니다. 모듈화를 사용하면 결합도 어느 정도 줄어들 수 있으며 이는 버그를 찾는 데도 도움이 됩니다. 그러므로 우리는 사이트 초기 단계에서 사이트를 작성하기 위해 "모듈식 사고"에 더 많은 관심을 기울이고 이를 활용해야 합니다.
앞서 자주 언급한 사이트 성능 최적화의 상당 부분에는 코드 재사용 개선, 개발 효율성 향상 등과 같은 "모듈화"도 포함됩니다. "모듈화"에는 다음과 같은 많은 이점이 있습니다.
코드 재사용 개선, 개발 효율성 향상, 통신 비용 절감, 결합 감소, 릴리스 위험 감소, 버그 발견 시간 감소 및 비용 수정, 페이지 내결함성 향상, 신속한 반복 구현 향상, 그레이스케일 릴리스 지원 향상이 가장 중요하다고 생각합니다. , '개선' 코드 재사용률'은 모듈화의 가장 중요한 특징 중 하나이기도 합니다.
"모듈성"을 달성하는 방법은 무엇입니까?
여기서 가장 큰 문제는 HTML과 CSS의 "모듈성"입니다. 스키닝을 구현하는 방법을 살펴볼 수 있습니다.
동일한 클래스 이름, 파일 변경(JS)
동일한 파일, 클래스 이름 변경(JS)
여기에서 HTML과 CSS의 인터페이스 구현을 볼 수 있습니다.
이 인터페이스를 더 잘 구현하려면 CSS에서 도입한 세 가지 클래스 이름 메서드에 관련(상호작용, 디자인, 페이지, 개발) 규칙, 규칙 및 사양이 있어야 합니다. 예를 들어 모든 현재 상태는 동일한 클래스 이름 "nonce"를 사용해야 합니다. " , 회색으로 표시된 모든 성능은 원래 클래스 이름 뒤에 "_n", 탭 구현 등을 사용합니다. 이러한 규칙, 규칙 및 사양을 사용하면 HTML 코드를 쉽게 템플릿화하고 인터페이스 사양과 통합할 수 있습니다.
먼저 이해해야 할 두 가지 오해가 있습니다.
모듈화한다고 해서 어느 위치에서나 사용할 수 있다는 의미는 아닙니다. (모듈화된 코드 세그먼트에도 적용 가능한 범위 제한이 있으며 인터페이스 규칙을 제공하는 환경이 필요합니다.)
모듈화되었다고 해서 변경할 수 없다는 의미는 아닙니다. (모듈화된 코드 세그먼트는 실제 필요에 따라 수정될 수 있습니다.)
완전히 독립적인 모듈을 동일한 프로젝트에 배치하는 경우 프로젝트 자체의 성능과 상호 작용의 통일성이 있으므로 이러한 부분은 중복성을 줄이기 위해 공통 정의로 제안될 수 있습니다. , 완전히 분리하는 것은 불가능합니다. 따라서 모듈화에서 매우 중요한 점은 "적절한 결합"입니다. 공개 정의에서는 모듈 스타일의 구현을 조정해야 하며 이러한 조정은 "인터페이스" 구현에도 영향을 미칩니다.
이 문서에서는 주로 모듈식 사고 방식에 대해 설명하므로 구체적인 구현 세부 사항은 향후 문서에서 논의할 것입니다. 관련 내용은 이전에 작성한 " IKEA 가구 디자인의 모듈화 "를 읽어보실 수 있습니다. 함께 토론하는 것을 환영합니다.