前端组件模块化

来源：互联网发布：手机如何注册淘宝网店编辑：程序博客网时间：2024/06/07 09:35

面试问到的问题，怎么实现前端代码的可重复使用，前端出发请求，调用后台数据

在点击登录按钮后，会弹出“网站登录”的弹窗：该弹窗组件由一个遮罩层和窗体组成，遮罩可以阻止我们对周围元素的操作，窗体水平垂直居中，窗体内部是一个登录表单，点击右上角的关闭按钮时整个弹框组件消失。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src="js/baseTool.js"></script>    <script type="text/javascript" src="js/base.js"></script>    <script type="text/javascript" src="js/index.js"></script>    <link rel="stylesheet" type="text/css" href="css/index.css" /></head><body>    <header id="header">        <div class="logo"><img src="images/logo.gif" alt="" /></div>        <div class="member">个人中心            <ul class="member_ul">                <li><a href="###">设置</a></li>                <li><a href="###">换肤</a></li>                <li><a href="###">帮助</a></li>                <li><a href="###">退出</a></li>            </ul>            </div>         <div class="login">登录</div>    </header><!-- /header -->     <!-- 弹窗组件 -->    <div id="mask"></div>    <div id="loginBox">        <h2><img src="images/close.png" alt="" class="close">网站登录</h2>        <div class="user">账 号：<input type="text"  name="username" class="text" /></div>        <div class="pass">密 码：<input type="password" name="password" class="text" /></div>        <div class="button"><input type="button" class="submit" /></div>        <div class="other">注册新用户 | 忘记密码？</div>    </div></body></html>

#mask{//遮罩层    position: absolute;    z-index: 999;    top:0;    left: 0;    width: 100%;    height: 100%;     background: #000;    filter: alpha(Opacity=30);    opacity: .2;    display: none; }#loginBox{//窗体    position: absolute;    z-index: 1000;    width: 350px;    height: 250px;    border: 1px solid #ccc;    background-color: #fff;    display: none; }#loginBox h2{    height: 40px;    text-align: center;    line-height: 40px;    font-size: 14px;    letter-spacing:1px;    color: #666;    background: url(../images/login_header.png) repeat-x;    margin:0;    padding:0;    border-bottom: 1px solid #ccc;    margin:0 0 20px 0;}#loginBox h2 img{    display: block;    float: right;    position: relative;    top:10px;    right: 10px;    cursor: pointer;}#loginBox .user,#loginBox .pass{    font-size: 14px;    color: #666;    padding: 5px 0;    text-align: center;}#loginBox input.text{    width:200px;    height: 25px;    font-size: 14px;    border: 1px solid #ccc;    background-color: #fff;}#loginBox .button{    text-align: center;    padding: 10px 0;}#loginBox input.submit{    width: 107px;    height: 30px;    background: url(../images/login_button.png) no-repeat;    border: none;    cursor: pointer;} #loginBox .other{    text-align: right;    padding:15px 10px;    font-size: 14px;    color: #666;}

Base.prototype.center = function(width,height){    //将loginBox 设置为绝对定位    //将浏览器窗口的高度-窗体自身的高度后除以2后的值设置为top    //将浏览器窗口的宽度-窗体自身的宽度后除以2后的值设置为left    var top=(window.InnerHeight - height)/2 + "px";    var left=(window.InnerWidth - width)/2 + "px";    for (var i=0;i<this.elements.length;i++){        var element = this.elements[i];         element.style.top = top;        element.style.left = left;     }    return this;        }

//触发浏览器窗口事件Base.prototype.resize = function(fn){      window.onresize = fn;     return this;}

window.onload = function () {    //登录弹框    var mask = $().getId("mask");//获取遮罩层    var loginBox=$().getId("loginBox");//获取窗体    loginBox.center(350,250);//设置船体居中    //浏览器窗口改变时依然居中    $().resize(function(){        loginBox.center(350,250);    });    //默认弹窗隐藏，点击登录按钮时显示弹窗    $().getClass("login").click(function() {         /* Act on the event */         loginBox.show();         mask.show();     });    //点击关闭按钮时隐藏弹窗     $().getClass("close").click(function() {//点击窗体关闭按钮，         /* Act on the event */         loginBox.hide();         mask.hide();     }); };

0 0