前端组件模块化

最新推荐文章于 2024-01-30 10:40:12 发布

fucktester

最新推荐文章于 2024-01-30 10:40:12 发布

阅读量300

点赞数

分类专栏： javascript 文章标签： javascript 模块化前端面试表单

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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

};