미니 정의를 사용하여 프런트엔드 code_javascript 기술의 모듈식 관리 구현

미니 정의

require를 기반으로 하는 간단한 프런트엔드 모듈식 프레임워크입니다. require.js를 배우거나 긴 cmd/amd 사양을 읽는 데 시간을 보내고 싶지 않다면 이 미니 정의가 좋은 선택입니다. 이전에 sea.js 또는 require.js를 사용해 본 적이 있다면 mini-define이 더 효율적이고 가벼우며 사용하기 쉽습니다. 프로젝트 주소: github

사용방법

먼저 모듈을 정의하세요

모듈 정의

1: 정의 함수를 사용하여 모듈 정의

1.1 종속성 여부에 따라 두 가지 상황이 있습니다.

1.1.1: 종속성이 없는 모듈

코드 복사 코드는 다음과 같습니다.

          정의('id',function(){
                     // 여기에 코드를 입력하세요
        });

1.1.2: 종속 모듈

코드 복사 코드는 다음과 같습니다.

​​​​ 정의('id',['modeA','modeB'],function(A,B){
                     // 여기에 코드를 입력하세요
        });

1.2 처리 결과를 외부 사용을 위해 반환해야 하는지 여부에 따라 두 가지 상황이 있습니다.

1.2.1에는 반환 개체가 있습니다:

코드 복사 코드는 다음과 같습니다.

               정의('id',function(){
                   반품 {
                                                 // 여기에 코드를 입력하세요
                }
            });

1.2.2 객체가 반환되지 않음

코드 복사 코드는 다음과 같습니다.

               정의('id',function(){
// 여기에 코드를 입력하세요
            });

둘째: require() 함수를 사용하여 모듈 호출

2.1 요청한 모듈 수에 따라 두 가지 상황이 있을 수 있습니다.

2.1.1 단일 모듈 호출

require('modeId')

2.1.2 여러 모듈 호출
             require(['modeA','modeB']);
2.2 콜백 처리 여부에 따라 두 가지 상황으로 나눌 수 있습니다.

2.2.1 콜백 처리 기능이 있습니다

코드 복사 코드는 다음과 같습니다.

             require('modeId',function(mode){
                        //여기에 코드를 입력하세요
            });

require(['modeA','modeB'],function(A,B){
                        //여기에 코드를 입력하세요
            });

2.2.2 콜백 처리 없음
              require('modeId');
그런 다음 index.html 페이지

에서 필요한 모듈을 순서대로 참조하세요.

코드 복사 코드는 다음과 같습니다.

마지막 단계는 원하는 방식으로 lib 디렉터리를 병합하고 압축하여 min.js 파일을 생성하는 것입니다. 애플리케이션을 게시할 때 해당 index.html도 조정해야 합니다.

코드 복사 코드는 다음과 같습니다.

장점:

seajs.js나 원본 require.js에 비해 약 100줄 정도의 주석만 있는 코드는 가볍다고 표현하기에는 뚱뚱하고 얇아 보입니다.
고급 콘텐츠도 전혀 없고, 복잡한 기술도 없으며, 학습 비용도 거의 0에 가깝습니다.