커스텀 RequireJS 만들기

RequireJS는 다른 함수가 반환한 값에 의존하는 함수를 정의할 수 있다는 원칙에 따라 작동합니다. 이는 모듈식 코드를 작성하는 데 도움이 됩니다. 여기에서는 모든 기능이 단일 파일에 있다고 가정합니다.

질문은 다음과 같습니다.

define('moduleName',function(){
    return 1;
})


require(['moduleName'],function(module1){
    console.log(module1) // 1;
})

여기에서 define를 사용하여 종속성을 추가하고 require를 사용하여 functions를 추가합니다.require에 대한 첫 번째 매개변수는 종속성 배열입니다. 종속성은 define 함수를 사용하여 등록할 수 있습니다.

때로는 사전에 요청한 다음 함수를 정의할 수도 있습니다. 모든 종속성이 해결되면 사용자 정의 콜백이 자동으로 트리거됩니다.

먼저 결과, 종속성 및 종속성 매핑에 대한 레지스트리functions를 보관할 모듈 수준 변수를 선언하겠습니다.

const fnMap = {}; // mapping between a dependency function name to actual function reference
let registry = [] // list of functions and the names of their dependencies
const resultMap = {}; // mapping between dependency name and it's return value

이제 변수가 있으므로 define를 정의하겠습니다. :)

function define(name, cb){
    fnMap[name] = cb;

    const unresolvedRegistryItems = registry.filter(({ cb: userDefinedCb, dependencies }) => {
        const unresolvedDeps = dependencies.filter(dependencyName => {
            const fn = fnMap[dependencyName];
            return !fn;
        });

        if (unresolvedDeps.length === 0) {
            require(dependencies, userDefinedCb);
        } else {
            return true;
        }
    });
    registry = unresolvedRegistryItems;
}

보시다시피 먼저 fnMap에 종속성을 기록한 다음 모든 종속성이 해결된 registry에 대해 functions를 확인합니다. 그렇다면 require(구현 예정)을 트리거합니다.
마지막으로 종속성이 해결되지 않은 함수만 포함하는 필터링된 목록으로 registry 목록을 업데이트합니다.

이제 정의하겠습니다require

function require(dependencies, cb){
    const results = [];
    let isResolved = true;

    for (let i = 0; i < dependencies.length; i++) {
        const dependencyName = dependencies[i];
        const fn = fnMap[dependencyName];

        if (!fn) {
            isResolved = false;
            registry.push({
                cb,
                dependencies
            });
            return;
        } 

        const result = resultMap[dependencyName] || fn();
        results.push(result);
        resultMap[dependencyName] = result;
    }
    isResolved && cb.apply(null, results);
}

완제품: