Javascript 라이브러리 및 CSS 폴더 구조 구성을위한 모범 사례 [닫기]

웹 애플리케이션에서 js 및 css 폴더를 어떻게 구성합니까?

내 현재 프로젝트 구조는 다음과 같습니다.

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

그러나 많은 자바 스크립트 라이브러리 및 CSS 플러그인을 사용하면 더 복잡합니다. Javascript 플러그인은 자체 .js 파일과 함께 제공되며 때로는 자체 .css 파일과 함께 제공됩니다.

예를 들어 JQueryUI 플러그인과 함께 JQuery를 사용할 때 js / lib 디렉토리에 jquery.js와 jquery-ui.js를 넣습니다. 그러나 JQueryUI는 자체 CSS 파일과 함께 제공됩니다. 모범 사례를 위해 자바 스크립트 플러그인의 CSS를 어디에 넣어야합니까? 내 css와 javascript css 플러그인을 구별하기 위해 lib 폴더에 넣어야합니까? 아니면 다른 곳?

개인 취향 인 건 알고 있지만 프로젝트 폴더를 어떻게 구성하는지 알고 싶습니다.

미리 감사드립니다 :)

HTML5 애플리케이션에서 파일을 구성하는 데 권장되는 구조를 간략하게 설명하겠습니다. 이것은 어떤 종류의 표준을 만들려는 시도가 아닙니다. 대신 논리적으로 편리한 방식으로 파일을 그룹화하고 이름을 지정하는 방법에 대한 제안을 할 것입니다.

프로젝트

HTML5 애플리케이션을 빌드한다고 가정 해 보겠습니다. 경우에 따라 서버의 루트를 기본 컨테이너로 사용할 수 있지만이 기사에서는 HTML5 응용 프로그램이 폴더에 포함되어 있다고 가정합니다. 이 폴더 안에 애플리케이션 색인 파일 또는 기본 진입 점을 만들어야합니다.

• appcropolis 프로젝트
• my-index.html

일반적으로 애플리케이션은 HTML, CSS, 이미지 및 자바 스크립트 파일로 구성됩니다. 이러한 파일 중 일부는 응용 프로그램에 따라 다르며 다른 파일은 여러 응용 프로그램에서 사용할 수 있습니다. 이것은 매우 중요한 차이점입니다. 파일을 효과적으로 그룹화하려면 응용 프로그램 별 리소스에서 범용 파일을 분리하여 시작해야합니다.

• appcropolis 프로젝트
• 자원
• 공급 업체
• my-index.html

이 간단한 분리를 통해 파일을 훨씬 쉽게 탐색 할 수 있습니다. 공급 업체 폴더에 라이브러리와 범용 파일을 배치하면 편집 할 파일이 리소스 폴더 에 있다는 것이 분명 합니다.

HTML 코드를 제외하고 애플리케이션의 나머지 파일은 대부분 CSS, Javascript 및 이미지입니다. 이미 이러한 종류의 자산에 해당하는 폴더 안에 애플리케이션 파일을 그룹화했을 가능성이 있습니다.

• appcropolis 프로젝트
• 자원
• CSS
• js
• 이미지
• 데이터
• 공급 업체
• my-index.html

JS의 폴더는 자바 스크립트 코드를 개최한다. 마찬가지로 이미지 폴더는 index.html 또는 애플리케이션의 다른 페이지에서 직접 사용되는 이미지를 추가해야하는 위치입니다. 이 이미지 폴더는 스타일 시트 관련 파일을 호스팅하는 데 사용해서는 안됩니다. CSS 코드와 관련 이미지는 css 폴더 안에 있어야 합니다. 이렇게하면 다양한 테마를 쉽게 사용할 수있는 페이지를 만들 수 있고 응용 프로그램의 이식성을 높일 수 있습니다.

• appcropolis 프로젝트
• 자원
• CSS
• 블루 테마
• background.png
• 이미지
• background.png
• blue-theme.css
• my-index.css
• js
• my-index.js
• my-contact-info.js
• 이미지
• 제품
• computer.jpg
• 핸드폰 .png
• printer.jpg
• my-company-logo-small.png
• my-company-logo-large.png
• 데이터
• some-data.json
• more-data.xml
• table-data.csv
• extra-data.txt
• 공급 업체
• jquery
• 이미지
• ajax-loader.gif
• icons-18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• 일부 css 라이브러리
• some-plugin.jquery
• my-index.html
• my-contact-info.html
• my-products.html

이전 예는 css 폴더 의 내용을 보여줍니다 . 기본 CSS 파일로 사용해야하는 default.css라는 파일이 있습니다. 기본 스타일 시트에서 사용하는 이미지 는 이미지 폴더 안에 있어야 합니다. 대체 스타일 시트를 만들거나 기본 스타일 시트에 정의 된 규칙을 재정의하려는 경우 추가 CSS 파일과 해당 폴더를 만들 수 있습니다. 예를 들어 blue-theme.css 스타일 시트를 만들고 모든 관련 이미지를 blue-theme 안에 배치 할 수 있습니다.폴더. 한 페이지 (이 경우 my-index.html)에서만 사용되는 CSS 또는 Javascript 코드가있는 경우 페이지 이름이 같은 .css 및 .js 파일 내에서 페이지 특정 코드를 그룹화 할 수 있습니다 (ei my-index .css 및 my-index.js). CSS 및 Javascript 코드는 가능한 한 일반적이어야하지만 별도의 파일에 배치하여 예외를 추적 할 수 있습니다.

최종 권장 사항

폴더 및 파일 이름에 대한 몇 가지 최종 권장 사항을 작성해야합니다. 일반적으로 모든 폴더 및 파일 이름에 소문자를 사용해야합니다. 여러 단어를 사용하여 파일 또는 폴더의 이름을 지정하는 경우 하이픈 (예 : my-company-logo-small.png)으로 구분합니다. 이 기사의 조언을 따르면 여러 페이지를 결합하면서 공통 리소스를 함께 유지하고 사용자 정의 코드를 멋지게 분리 할 수 ​​있어야합니다.

마지막으로이 기사에서 권장하는 구조를 사용하지 않더라도 관례를 고수하는 것이 중요합니다. 그것은 당신의 생산성을 증가시키고 더 중요한 것은 당신이하는 일을 다른 사람들이 이해하기 쉽게 만들 것입니다.

출처 크레딧 : HTML, CSS 및 자바 스크립트 파일을 구성하는 방법

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

이것이 내 애플리케이션의 정적 리소스를 구성하는 방법입니다.