如何通过JS文件来渲染网页（即将html代码写在JS中，封装成一个模块，需要时调用）：

时间：2021-01-25 20:14:13

在动态渲染之前，需要在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();

 

标签：

相关文章