모듈 관리의 간단 한 실현

모듈 관리의 간단 한 실현 방식Keep It Simple，Stupid
Q&A
1. 왜 이런 물건 이 있 을 까?
당신 의 코드 를 편리 하 게 조직 하여 프로젝트 의 유지 가능성 을 높 입 니 다.한 프로젝트 의 유지 가능성 이 높 지 않 고 프로그래머 의 수준 도 나타 내 는데 지금 은 점점 복잡 해 지 는 전단 프로젝트 라 는 점 이 특히 중요 하 다.
2. 왜 requirejs, seajs 등 을 필요 로 하지 않 습 니까?
그들의 기능 은 강하 지만 파일 의 부피 가 문제 입 니 다. 그 밖 에 업무 가 가끔 복잡 하지 않 을 수도 있 습 니 다. 처음에 말 한 것 처럼 keep it simple
3. 아래 의 실현 은 어디에서 왔 습 니까?
이것들 은 requirejs, seajs, comonjs 등의 실현 을 참고 하여 실제 프로젝트 에 사용 되 고 안정 적 인 운행 에 사용 되 며 효과 가 좋다.
4. 필드 적용
4. 567917. 모 바 일 페이지 는 js 를 html 페이지 에 주입 하면 모듈 로 딩 문 제 를 고려 하지 않 아 도 되 고 많은 코드 를 절약 하여 실현 에 있어 더욱 간단 합 니 다
4. 567917. 다 중 파일 로 딩 이 라면 파일 로 딩 순 서 를 수 동 으로 실행 해 야 합 니 다. 그러면 라 이브 러 리 로 의존 관 리 를 하 는 것 이 좋 습 니 다
이루다

(function(global){
    var modules = {};
    var define = function (id,factory) {
        if(!modules[id]){
            modules[id] = {
                id : id,
                factory : factory
            };
        }
    };
    var require = function (id) {
        var module = modules[id];
        if(!module){
            return;
        }

        if(!module.exports){
            module.exports = {};
            module.factory.call(module.exports,require,module.exports,module);
        }

        return module.exports;
    }

    global.define = define;
    global.require = require;
})(this);

사용 예시

define('Hello',function(require,exports,module){
    function sayHello() {
        console.log('hello modules');
    }
    module.exports = {
        sayHello : sayHello
    }
});

var Hello = require('Hello');
Hello.sayHello();

이루다

function Module(main,factory){
    var modules = {};
    factory(function(id,factory){
        modules[id] = {
            id : id,
            factory : factory,
        }
    });

    var require = function (id) {
        var module = modules[id];
        if(!module){
            return;
        }

        if(!module.exports){
            module.exports = {};
            module.factory.call(module.exports,require,module.exports,module);
        }
        return module.exports;
    }

    window.require = require;
    return require(main);
}

사용 예시

Module('main',function(define){
    define('Hello',function(require,exports,module){
        function sayHello () {
            console.log('hello');
        }
        
        //     
        module.exports = {
            sayHello : syaHello;
        }

        //  
        exports.sayHello = sayHello;
    });
    //mian，    
    define('main',function(require,exports,module){
        var Hello = require('Hello');
        Hello.sayHello();
    });
});

이루다
다른 스타일 의 모듈 관리

(function(global) {
    var exports = {}; //         
    var modules = {}; // 
    global.define = function (id,factory) {
        modules[id] = factory;
    }
    global.require = function (id) {
        if(exports[id])return exports[id];
        else return (exports = modules[id]());
    }
})(this);

사용 예시

define('Hello',function(require,exports,module){
    function sayHello() {
        console.log('hello modules');
    }
    //     
    return {
        sayHello : sayHello
    };
});

var Hello = require('Hello');
Hello.sayHello();

실천 하 다.
간단 하고 간단 한 모듈 화 관리 가 있 으 면 프로젝트 에서 우 리 는 이런 구 조 를 채택 할 수 있다.
-- proj

-- html
    -- index.html
-- css
-- js
    -- common
        -- module1.js（    1）
        -- module2.js（    2）
    -- page
        -- index.js（    ）
    -- lib
        -- moduler.js      

전단 구축 도구 (wepack, grunt, gulp 등) 에 맞 춰 이동 단 페이지 를 구축 할 수 있 습 니 다.
총결산
오늘날 의 틀 은 매우 많 고 할 수록 방대 하 다.프레임 워 크 는 일반적으로 통용 성 을 고려 하 는데 더욱 정교 해 지 는 프로젝트 에 있어 서 가끔 은 스스로 관건 적 인 점 을 실현 해 야 할 수도 있 고 학습 의 원천 은 바로 이런 소 가 강요 하 는 프레임 워 크 이다.