자 바스 크 립 트 에서 OOP 모드 를 적용 하여 모듈 화 관리

여기에 순수한 자 바스 크 립 트 의 네 임 스페이스 관리 플러그 인 을 기록 합 니 다:https://github.com/smith/namespacedotjs
이 플러그 인 은 대상 을 대상 으로 프로 그래 밍 모드 를 실현 한 토대 에서 파일 호출 기능 을 추가 하 였 습 니 다.즉,이 플러그 인 을 사용 하면 자바 의 package 를 관리 하 는 것 처럼 js 를 모듈 화 관리 할 수 있 습 니 다.페이지 에 수 동 으로 가입 하지 않 아 도 됩 니 다<script>호출.압축 된 코드 는 4KB,경량급 뿐이다.비동기 호출 방식 을 채택 해 사실상 요청 횟수 를 줄 이지 않 았 기 때문이다.이러한 방식 을 사용 하면 파일 에 직접 쓰 는 것 이 좋 습 니 다<script>Browserify 등 모듈 화 관리 플러그 인 방법 을 사용 하 는 것 과 같 습 니 다.한편 으로 는 우리 가 페이지 에 호출 할 스 크 립 트 를 수 동 으로 삽입 하 는 것 을 줄 일 수 있 고,다른 한편 으로 는 하나의 큰 파일 로 통합 할 필요 가 없 으 며,모든 스 크 립 트 파일 은 입구 파일 에서 통일 적 으로 관리 하고 필요 에 따라 불 러 옵 니 다.이상 적 이지 않 은 점 은 우리 가 기본적으로 자신의 스 크 립 트 만 관리 할 수 있 고 다른 플러그 인 을 관리 하기 어렵 다 는 것 이다.또 이런 방법 으로 는 요청 횟수 를 실제로 낮 출 수 없다.
사용 방법:먼저 페이지 에 플러그 인과 입구 파일 을 도입 합 니 다.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>sandbox</title>
    <script type="text/javascript" src="../Namespace.js"></script>
</head>
<body>
    <div id="console"></div>
    <script type="text/javascript" src="sandbox.js"></script>
</body>
</html>

직접 입구 파일 에 코드 모듈 쓰기:
<!-- lang: js -->
Namespace('com.sandbox', {

Console: {
    log: function(message) {
        var element = document.getElementById('console');
        element.innerHTML = element.innerHTML + message + '<br />';
    }
}
});
//       
com.sandbox.Console.log('hello world');

com.sandbox.*라 는 파일 패 키 지 를 만 들 고 js 파일 관 리 를 하 며 입구 파일 에서 xhr 방식 으로 호출 합 니 다.
<!-- lang: js -->
//      com/sandbox/SayHiClass.js   
//        ,             
Namespace.include('com.sandbox.SayHiClass', function() {
new com.sandbox.SayHiClass();
});

//                 
Namespace.use('com.sandbox.MyNameIsClass', function() {
new MyNameIsClass('peter');
});

//            
Namespace.from('com.sandbox.classes').use('com.sandbox.classes.*', function() {
new MyClass1();
new MyClass2();
});

좋은 웹페이지 즐겨찾기