구성 요소화된 전단 개발 프로세스

배경.

앞장서는 학생들은 다 알고 있다. 페이지가 많으면 물건이 어지러워지기 때문에 우리는 하나의 개발 절차를 통일해야 한다.개발 절차의 좋고 나쁨은 페이지 개발의 효율에 직접적인 영향을 주고 게임의 시간에 간접적으로 영향을 미친다.

개발 프로세스의 목표

페이지를 빠르게 완성할 수 있습니다.

구성 요소화 방식을 통해 코드의 재사용을 확보하고 중복 노동을 피한다.

페이지가 상륙한 후에 효율적으로 운행할 수 있도록 보증한다.

개발 프로세스의 범주

문서의 보관 규범.

코드의 조직 구조와 인코딩 규범.

발표 전략.

전체 프로세스에 필요한 개발 도구를 지원합니다.

모든 팀은 자신의 개발 절차 규범을 가지고 있다.실제로 가장 좋은 절차 규범은 존재하지 않고 가장 적합한 것만 있다.다음은 여러 팀의 개발 절차를 정리하고 귀납한 통용적인 개발 절차 규범을 소개한다.

폴더 사양

프로젝트 폴더가 p/라고 가정합니다.그러면 이 폴더에는 다음이 포함됩니다.

p/assets/저장 개발 도구

p/dev/개발 상태를 저장하는 프로젝트 파일

p/dpl/저장 프로젝트의 공용 구성 요소 라이브러리

p/release/발표된 프로젝트 파일 저장 (여기 파일은 모두 압축되어 있음)

p/dev/내 구조는 다음과 같습니다.

p/dev/website1/public/전역 공용 프로젝트 (전역 공용 파일 저장)

p/dev/website1/프로젝트1/프로젝트1

p/dev/website1/프로젝트2/프로젝트2

....

여기서 각 항목의 구조는 다음과 같습니다.

p/dev/website1/project1/page1.html

p/dev/website1/project1/assets/page1.js

p/dev/website1/project1/assets/page1.css

p/dev/website1/project1/assets/images/

p/dev/website1/project1/include/page1.inc

p/dpl/내 구조는 다음과 같습니다.

p/dpl/system/시스템 js 모듈

p/dpl/controls/UI 모듈

p/dpl/widgets/업무 구성 요소

여기서 각 폴더의 구조는 다음과 같습니다.

p/dpl/system/category1/component1.html

p/dpl/system/category1/assets/component1.js

p/dpl/system/category1/assets/component1.css

p/dpl/system/category1/assets/images/

p/release/내부 구조:

온라인 파일 규범에 따라 p/dev/와 같을 수도 있습니다.

구성 요소화 개발 실현

1. 전역에서 공용하는 js와 css

전역에서 공용하는 js와 css는 p/dpl/에서 일부 구성 요소를 선택하여 합성하는 도구입니다.p/dev/website1/public/assets/common에 넣습니다.js (또는.css)

2. 비전역 공용 js와 css

웹 페이지에서 다음 코드를 사용하여 구성 요소를 로드할 수 있습니다.

using("System.Category1.Component1");

var comp1 = new Component1();

여기서 System.Category1.Component1은 p/dpl/system/category1/assets/component1에 비칩니다.js (또는.css).
using의 역할은 페이지에 스크립트를 가져오는 것과 같습니다.페이지가 발표되면 using는 구성 요소의 원본 코드로 대체되며 동적 불러올 필요가 없습니다.

3. 异步载入js和css

프로세스 자체는 비동기적으로 구성 요소를 불러오는 기능을 제공하지 않으며 프로젝트에서 어떠한 제3자 모듈 캐리어를 사용하여 비동기적으로 불러올 수 있다.예를 들면 다음과 같습니다.

use(["System.Category1.Component1"], function(Component1){

      var comp1 = new Component1();

});

4. html的复用

html 파일에 다음과 같은 코드를 쓰면 대응하는 html 부분을 페이지에 삽입할 수 있다.

<script>include('../public/include/topbar.inc');</script>

5. 总结

release의 파일만 최종적으로 상륙할 수 있습니다.dpl의 구성 요소를 사용하려면 두 가지 방법만 있습니다.

개발 전에 스크립트를 통합하여 dev에 지정한 디렉터리에 저장합니다.(예를 들어 프로젝트1/assets/common.js)

발표 시 dev에 자동으로 통합됩니다.(using 교체)

页面的发布

페이지 게시는 주로 다음과 같은 작업을 수행합니다.

페이지의 요청 수를 줄이기 위해include와using 등을 내장한다.

js와 css를 압축합니다.

파일 위치를 다시 변경하여 실제 프로젝트 수요에 적응(예를 들어 js와 css를 추출하고 html를 필터해야 함)