如何通過JS文件來渲染網頁（即將html代碼寫在JS中，封裝成一個模塊，需要時調用）：

本文轉載自查看原文 2019-03-12 19:42 3490

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Highcharts教程--把js代碼從html中抽離出來，放到單獨的一個js文件中。由html頁面調用在HTML網頁上打印需要的內容，JS代碼如何將Js代碼封裝成Jquery插件封裝html代碼塊到js函數中函數直接寫在html頁面的