[Javascript]Closureによるデータ操作とパッケージング

グローバル変数を使用する場合は?

let Rollover = {}
$(function(){
    Rollover.fdno = null
    Rollover.bskno = null
    Rollover.currst = null

    injectObj(Rollover,{
        callBskMstByFdidAndCurrst,
        callPositionList,
        callRollover,
        clearSelectedBsk
    })
})

function init() {
    var name = "blockjjam"; // name is a local variable created by init
    function displayName() { // displayName() is the inner function, a closure
        alert (name); // displayName() uses variable declared in the parent function
    }
    displayName();
}
init();
// init()의 name의 scope는 init함수 안에서만 생존

function makeFunc() {
  var name = "blockjjam"; (3)
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc(); // (1)
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc(); // (2)
//리턴된 displayName 함수를 실행(name 변수에 접근)

Closureでprivateメソッドを模倣する

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();

console.log(counter.value()); // logs 0
counter.increment();
counter.increment();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1

私たちは露出で外部データの漏洩を阻止します。

var tmp_bskMst = null;

var Rollover = (function(){
    let fdno = null
    let bskno = null
    let currst = null
    let bskMstList = null

    /** Async Process  **/
    function callBskMstByFdidAndCurrst(){
        clearSelectedBsk()
        setCurrst($("#sel_currst").val())
        //...
    }

    function callPositionList(idx){
        setFdno(bskMstList[idx].fdno)
        setBskno(bskMstList[idx].bskno)

        let url = '/order/rollover/list'
        let params = createAsyncJsonParam({fdno, bskno, state: currst})
				//...
    }

    function callRollover(){
        let url = '/order/rollover/toflask' // 명명법 수정 필요
        let params = createAsyncJsonParam({fdno, bskno, state:currst})
        //...
    }
    /** End Async Process  **/

    /** Util **/
    function clearSelectedBsk(){
        setFdno(null)
        setBskno(null)
        setCurrst(null)
        setBskMstList(null)
    }

    const setFdno = (input_fdno)=>{
        fdno = input_fdno === null? null : parseInt(input_fdno)
    }

    const setBskno = (input_bskno)=>{
        bskno = input_bskno === null? null : parseInt(input_bskno)
    }

    const setCurrst = (input_currst)=>{
        currst= input_currst === null? null : input_currst;
    }

    const setBskMstList = (input_bskMstList)=>{
        bskMstList = input_bskMstList === null? null : input_bskMstList.slice();
    }
    /** End Util **/

    return {
        callBskMstByFdidAndCurrst: callBskMstByFdidAndCurrst,
        callPositionList: callPositionList,
        callRollover: callRollover,
        clearSelectedBsk: clearSelectedBsk
    }
})();

let OrderHistory = {}
$(function (){
    OrderHistory.fdno = null;
    OrderHistory.bskno = null;
    OrderHistory.date = null;

		// 선언한 객체에 함수 객체를 주입해서 사용
    injectObj(OrderHistory, {callFindBskInfo})
    injectObj(OrderHistory, {setOneBskInfo})
    injectObj(OrderHistory, {callFindBskInfo})

    // 페이지 로드 시 Order History에 필요한 설정 정보 clear
    OrderHistory.clearSelectedBskInfo()
})

var tmp_bskMst = null;

var Rollover = (function(){
    //...

    return {
        callBskMstByFdidAndCurrst: callBskMstByFdidAndCurrst,
        callPositionList: callPositionList,
        callRollover: callRollover,
        clearSelectedBsk: clearSelectedBsk
    }
})();