JS State Pattern

每个page作为一个state

定义pagestate类

const Pagestate =function(){
  let currentState = new homeState(this);

  this.init = function(){
    this.change(new homeState);
  }

  this.change= function(state){
    currentState = state;
  }
};

home state

//Home state
const homeState = function(page){
  document.querySelector('#heading').textContent = null;
  document.querySelector('#content').innerHTML=`
    <div class="jumbotron">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>
  `;
};

about state

//About state
const aboutState = function(page){
  document.querySelector('#heading').textContent ='About Us';
  document.querySelector('#content').innerHTML=`
    <p>This is the about page</p>
`;
};

contact state

//Contact state
const contactState = function(page){
  document.querySelector('#heading').textContent ='Contact Us';
  document.querySelector('#content').innerHTML=`
    <form>
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword">
      </div>
    </div>
  </form>
`;
};

初始化page

//Instantiate pageState
const page= new Pagestate();

//Init the first state
page.init();

定义三个button

//UI Vars
const home = document.getElementById('home'),
      about = document.getElementById('about'),
      contact = document.getElementById('contact');

//Home
home.addEventListener('click',function(e){
  page.change(new homeState);
  e.preventDefault();
});

//About
about.addEventListener('click',function(e){
  page.change(new aboutState);
  e.preventDefault();
});

//Contact
contact.addEventListener('click',function(e){
  page.change(new contactState);
  e.preventDefault();
});