모듈 패턴 공개, 정의되지 않은 속성

Question

app.js 및 utils.js 두 개의 파일이 Gulp를 통해 빌드 할 때 함께 연결됩니다.

반환 문 내에서 app.mapYear 값을 설정하려고 할 때 "정의되지 않은 getUrlParam 속성을 읽을 수 없습니다"오류가 발생합니다.

초기화 기능 내부에 app.mapYear 설정이 작동하는 것 같습니다. 왜 내가 내 반환 성명에 app.mapYear 설정할 수 없습니다 궁금하네요.

나는 여기에 간단한 것을 놓치고 있습니까? 더 좋은 방법이 있습니까? 내 코드에서 객체 속성을 산발적으로 설정하는 것을 막기를 바랍니다.

// app.js 
//***************** 
'use strict'; 

var app = app || {}; 
app = (function() { 

    const getMapYear =() => { 
     return app.utils.getUrlParam('year'); 
    }; 

    const mapYear = getMapYear(); 

    const init =() => { 
     //init offcanvas menu 
     $(document).foundation(); 

     // app.mapYear = mapYear(); 
    }; 

    return { 
     init, 
     mapYear 
    }; 

})(); 

$(function() { 
    app.init(); 
}); 


utils.js 
//***************** 

var app = app || {}; 

app.utils = (function() { 

    const getUrlParam =() => { 
     console.log(document.location.search); 
     return document.location.search; 
    } 

    return { 
     getUrlParam 
    }; 

})(); 

시간 내 주셔서 감사합니다.

편집 : 동일한 문제가있는 사람이라면 제공된 답변을 통해 해결할 수 있습니다.

컴파일하면 utils.js이 먼저 이어져 app.js이옵니다.

return { 
    init, 
    utils: app.utils, 
    mapYear: getMapYear() 
}; 

Answer 1

작동합니다 :

//utils.js 
 
//***************** 
 

 
var app = app || {}; 
 

 
app.utils = (function() { 
 

 
    const getUrlParam =() => { 
 
    console.log(document.location.search); 
 
    return document.location.search; 
 
    } 
 

 
    return { 
 
    getUrlParam 
 
    }; 
 

 
})(); 
 

 

 
// app.js 
 
//***************** 
 
'use strict'; 
 
//   |-- app contains the definition of (utils.js). 
 
var app = app || {}; 
 
app = (function() { 
 

 
    const getMapYear =() => { 
 
    return app.utils.getUrlParam('year'); // You can use «app.utils». 
 
    }; 
 

 
    const mapYear = getMapYear(); 
 

 
    const init =() => { 
 
    //init offcanvas menu 
 
    // $(document).foundation(); 
 

 
    // app.mapYear = mapYear(); 
 
    }; 
 

 
    return { 
 
    init, 
 
    mapYear, 
 
    app 
 
    }; 
 

 
})(); 
 

 
$(function() { 
 
    app.init(); 
 
    console.log(app); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

app.js에서, 당신은 utils.js의 contetns 이전 getMapYear를 호출하는 것은 평가되었고, app.utils 정의되었습니다 :

const mapYear = getMapYear(); 

따라서, app.utils app.js에서 내 반환 문은 다음과 같습니다 정의되어 있지 않으므로 호출 할 수 없습니다.

// in the app.js closure 
const getMapYear =() => { 
    return app.utils.getUrlParam('year'); 
}; 

const init =() => { 
    //init offcanvas menu 
    $(document).foundation(); 

    app.mapYear = getMapYear(); // call getMapYear later  
}; 

그것의 방법을 호출 할 때 app.utils 개체가 이미 있는지 확인합니다 : utils.js로드가 완료되면 당신은 getMapYear를 호출해야합니다.

주 : 그러나이 방법에서, app.mapYear 당신이 app.init()라고 후에 만 ​​존재한다. 이 순서에서