每个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();
});