JS Module & Revealing Module Pattern

Module & Revealing Module Pattern

Module格式

//Basic structure

(function(){
  //Declare private vars and functions

  return{
    //Declare public var and functions

  }
})();

Module

return 的函数内容为可被外部调用的method；

  //Standard module pattern
const UICtrl = (function(){       //内部为private，无法被外面调用
  let text ='Hello world';

  const changeText = function(){
    const element = document.querySelector('h1');
    element.textContent=text;
  }
  return {
    callChangeText: function(){   //内部为public，可被外面调用
      changeText();
      console.log(text);
    }
  }
})();


UICtrl.callChangeText();

console.log(UICtrl);

Revealing Module Pattern

return 将private的函数放入return中，可以在外部访问；

//REVEALING MODULE PATTERN
const ItemCtrl = (function(){
  let _data = [];       //private varible

  function add(item){
    _data.push(item);
    console.log(`Item Added...`);
  }


  function get(id){
    return _data.find(item=>{
      return item.id===id;
    });
  }

  return {
    add:add,
    get:get
  }
})();

ItemCtrl.add({id:1,name:'John'});
ItemCtrl.add({id:2,name:'Mike'});
console.log(ItemCtrl.get(2));