在动态渲染之前，需要在index.html中做好静态布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" > </head> <body> <div class = "register_login"> <!-- <div class = "register content"> <div class="logo"> <img src="https://cas.1000phone.net/cas/images/login/logo.png"> </div> <form class = "register-form"> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <input type="email" class="form-control register_username" id="register_username" placeholder="Username"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="register_password" placeholder="Password"> </div> <button type="button" class="btn btn-success register_btn1" id = "register_btn1">去登陆</button> <button type="submit" class="btn btn-info register_btn" id = "register_btn">注册</button> </form> </div> --> <!-- <div class = "register content"> <div class="logo"> <img src="https://cas.1000phone.net/cas/images/login/logo.png"> </div> <form class = "register-form"> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <input type="email" class="form-control register_username" id="exampleInputEmail1" placeholder="Username"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="button" class="btn btn-success register_btn1" id = "register_btn1">去注册</button> <button type="submit" class="btn btn-info register_btn">登录</button> </form> </div> --> </div> </body> </html> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script> <script src = "./js/page.js"></script> <script src = "./js/login.js"></script> <script src = "./js/register.js"></script>
在page.js中创建page对象
function Page() { this.container = $(".register_login"); //console.log(this.container); this.flag = true; this.init(); } Page.prototype = { init:function(){ this.createContent(); }, createContent:function(params=this.flag){ this.container.html('') if(params){ this.login = new Login(this.container); }else{ this.register = new Register(this.container); } } } new Page();
创建Login对象：
//创建一个Login： function Login(container) { //容器实例属性： this.container = container; //调用入口方法： this.init(); } //引入html标签： Login.template = ` <div class = "register content"> <div class="logo"> <img src="https://cas.1000phone.net/cas/images/login/logo.png"> </div> <form class = "register-form"> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <input type="email" class="form-control register_username" id="exampleInputEmail1" placeholder="Username"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="button" class="btn btn-success register_btn1" id = "register_btn1">去登陆</button> <button type="submit" class="btn btn-info register_btn">注册</button> </form> </div>` //Login的原型方法： Login.prototype = { init:function(){ this.createDom(); }, createDom:function(){ this.el = $("<div class='content'></div>"); this.el.append(Login.template); console.log(Login.template) this.container.append(this.el); } } new Page();
创建Register对象：
//创建一个Register： function Register(container) { //容器实例属性： this.container = container; //调用入口方法： this.init(); } //引入html标签： Register.template = ` <div class = "register content"> <div class="logo"> <img src="https://cas.1000phone.net/cas/images/login/logo.png"> </div> <form class = "register-form"> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <input type="email" class="form-control register_username" id="exampleInputEmail1" placeholder="Username"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="button" class="btn btn-success register_btn1" id = "register_btn1">去登陆</button> <button type="submit" class="btn btn-info register_btn">注册</button> </form> </div>` //Register的原型方法： Register.prototype = { init:function(){ this.createDom(); }, createDom:function(){ this.el = $("<div class='content'></div>"); this.el.append(Register.template); console.log(Register.template) this.container.append(this.el); } } new Page();