前端入门小结

头像
tinylcy
    阅读 8 分钟

    今年暑假大部分时间是在要学校，前一阶段一直在学习Scala和理解Spark，但是苦于没有实际上手的项目，尽管看了不少论文和书，但不敢说自己理解的有多深刻，所以我打算暂时搁置这一部分的内容。后一阶段是出于导师的需要要解决针对海量数据进行频繁的模糊搜索带来的性能问题，其实一些关系型数据库比如MySQL有自带的Full Index，但是它们并不能很好的支持中文，于是我开始尝试使用Elasticsearch来解决问题。当然如果我使用Elasticsearch就意味着引人了第三方的工具，因此数据同步的问题就凸显出来。关于数据同步，elasticsearch-jdbc可以将MySQL中的数据同步到Elasticsearch，但是使用后我发现elasticsearch-jdbc存在两个严重的问题：一是elasticsearch-jdbc只适合数据库中的数据只增不减、不修改的情况，这显然是不合理的；二是当我同步的数据量很大时，elasticsearch-jdbc并不能很完整的导入数据，因此我只能自己实现数据同步，整个过程走了一些弯路，直到后来利用bulk index来批量建立索引和批量删除，同步的效率提高了20+倍，基本满足了性能要求。

    实现了搜索这一功能，接下来就是要把这一部分嵌入到一个平台，因此我开始接触Web编程以及前端。之前我对前端几乎没有什么了解，因此这一周除了体检(被检查出来早搏)、参加入学典礼之外，就是在琢磨css，JavaScript，jQuery了，并结合需求开发了网站的一部分。

    效果简介

    整个过程中，比较有意思的是实现弹出层的效果，弹出层在我们日常浏览网页的时候十分普遍，它具有更好的交互效果。如下是实现的效果图。

    图片描述

    静态页面实现

    实现弹出层效果的css代码如下。

    #mask {
    background: #000;
    opacity: 0.75;
    filter: alpha(opacity = 75);
    height: 1000px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000; /* 层级  */
}

    有两点需要注意：

    • opacity: 0.75;为设置遮罩层的透明度，但是IE不认opacity，所以还需要跟IE做下兼容：filter: alpha(opacity = 75);这里的0.75和75都代表透明度为75%。

    • 对于一层，它不仅只有X轴和Y轴，还有Z轴，也就是层级，z-index就是用来描述层级，它的数字越大，说明层级越高，所处的位置越上。

    接下来就是实现弹出界面，Elasticsearch的模糊搜索功能将用在此处，弹出界面的html以及css代码如下(存在命名不规范的情况)。

    <style type="text/css">

#queryItems {
    position: fixed;
    width: 1200px;
    height: 580px;
    z-index: 1001;
    background-color: #FCFCFC;
}

#queryItemsTop {
    width: 100%;
    height: 16px;
    background-color: #46A3FF;
}

#queryItemsClose {
    width: 38px;
    height: 20px;
    /* background-color: red; */
    background-image: url("../img/close.png");
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
}

#queryItemsMain {
    width: 100%;
    background-color: #FCFCFC;
}

#queryItemsHead {
    margin-top: 15px;
    width: 100%;
    height: 50px;
}

#searchitems {
    background-color: #46A3FF;
    width: 60px;
    height: 25px;
    color: white;
    font-weight: bold;
}

#queryItemsTbl {
    width: 100%;
    height: 100%;
}

#queryItemsFoot {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
}

#queryItemsTbl th {
    background-color: #F0F0F0;
    height: 40px;
}

#searchresult {
    width: 100%;
    border-collapse: collapse;
}

#itemsth1, #itemsth5, #itemsth10 {
    width: 5%;
}

#itemsth2, #itemsth3, #itemsth6, #itemsth7, #itemsth8, #itemsth9 {
    width: 10%;
}

#itemsth4 {
    width: 25%;
}

#buttons {
    float: right;
}

#itemscancle {
    width: 50px;
    height: 25px;
}

#itemsreplace {
    background-color: #46A3FF;
    width: 80px;
    height: 25px;
    color: #E0E0E0;
}

#itemsinsert {
    width: 80px;
    height: 25px;
}

#queryitemstitle {
    font-size: 13px;
    font-weight: bold;
    margin-left: 10px;
    color: white;
}
</style>

<body>
    <div id='queryItems'>
        <div id='queryItemsTop'>
            <label id='queryitemstitle'>查询标杆清单项</label>
        </div>
        <div id='queryItemsClose'></div>
        <div id='queryItemsMain'>
            <div id='queryItemsHead'>
                <input type='checkbox' id='systemcheck'>
                <label>系统标杆</label>
                &nbsp;<input type='checkbox' id='usercheck'>
                <label>用户标杆</label>
                &nbsp;<label>图集名称</label>
                <select id='imagesname'></select>
                &nbsp;<label>项目名称</label>
                <input type='text' id='projectname'>
                <input type='button' id='searchitems' value='查 询'>
            </div>
            <div id='queryItemsTbl'>
                <table id='searchresult'>
                    <tr>
                        <th id='itemsth1'>序号</th><th id='itemsth2'>清单编码</th><th id='itemsth3'>清单名称</th>
                        <th id='itemsth4'>项目特征描述</th><th id='itemsth5'>单位</th><th id='itemsth6'>工程名称</th>
                        <th id='itemsth7'>标杆类型</th><th id='itemsth8'>图集名称</th><th id='itemsth9'>图集代码</th>
                        <th id='itemsth10'>选择</th>
                    </tr>
                </table>
            </div>
            <div id='queryItemsFoot'>
                <div id='buttons'>
                    &nbsp;<input type='button' id='itemscancle' value='取 消'>
                    &nbsp;<input type='button' id='itemsreplace' value='替换清单'>
                    &nbsp;<input type='button' id='itemsinsert' value='插入清单'>&nbsp;
                </div>
            </div>
        </div>
    </div>
</body>

    JS实现动态效果

    实际上，上面的html并不是预先就已经存在的(css是预先写好的)，而是当我触发相应的事件后动态生成的，也就是在原有的页面后追加遮罩层和弹出层。利用JavaScript来实现动态效果，代码如下：

    function queryItems() {
    var oMask = document.createElement("div");
    oMask.id = "mask";
    // 获取页面的高度和宽度
    var sHeight = document.documentElement.scrollHeight;
    var sWidth = document.documentElement.scrollWidth;
    // 获取页面的可视高度和宽度
    // 如果页面是竖向的页面，那么可视宽度和页面宽度是相等的
    var wHeight = document.documentElement.clientHeight;
    oMask.style.height = 768 + "px";
    oMask.style.width = sWidth + "px";
    document.body.appendChild(oMask);
    var queryItems = document.createElement("div");
    queryItems.id = "queryItems";
    queryItems.innerHTML = "<div id='queryItemsTop'>"
            + "<label id='queryitemstitle'>查询标杆清单项</label>"
            + "</div>"
            + "<div id='queryItemsClose'></div>"
            + "<div id='queryItemsMain'>"
            + "<div id='queryItemsHead'>"
            + "<input type='checkbox' id='systemcheck'>"
            + "<label>系统标杆</label>"
            + "&nbsp;<input type='checkbox' id='usercheck'>"
            + "<label>用户标杆</label>"
            + "&nbsp;<label>图集名称</label>"
            + "<select id='imagesname'></select>"
            + "&nbsp;<label>项目名称</label>"
            + "<input type='text' id='projectname'>"
            + "&nbsp;<input type='button' id='searchitems' value='查 询'>"
            + "</div>"
            + "<div id='queryItemsTbl'>"
            + "<table id='searchresult'>"
            + "<tr>"
            + "<th id='itemsth1'>序号</th><th id='itemsth2'>清单编码</th><th id='itemsth3'>清单名称</th>"
            + "<th id='itemsth4'>项目特征描述</th><th id='itemsth5'>单位</th><th id='itemsth6'>工程名称</th>"
            + "<th id='itemsth7'>标杆类型</th><th id='itemsth8'>图集名称</th><th id='itemsth9'>图集代码</th>"
            + "<th id='itemsth10'>选择</th>" + "</tr>" + "</table>" + "</div>"
            + "<div id='queryItemsFoot'>" + "<div id='buttons'>"
            + "&nbsp;<input type='button' id='itemscancle' value='取 消'>"
            + "&nbsp;<input type='button' id='itemsreplace' value='替换清单'>"
            + "&nbsp;<input type='button' id='itemsinsert' value='插入清单'>&nbsp;"
            + "</div>" + "</div>" + "</div>";
    document.body.appendChild(queryItems);
    var dHeight = queryItems.offsetHeight;
    var dWidth = queryItems.offsetWidth;
    queryItems.style.left = (sWidth - dWidth) / 2 + "px";
    queryItems.style.top = (wHeight - dHeight) / 2 + "px";
    var oClose = document.getElementById("queryItemsClose");
    oMask.onclick = oClose.onclick = function() { // 关闭弹出框
        document.body.removeChild(oMask);
        document.body.removeChild(queryItems);
    }
}

    需要注意的有如下几点：

    • 在页面中创建元素结点：

        var oMask = document.createElement("div");

    • 遮罩层需要多大？因此需要获取页面的高度和宽度，要注意的是这是网页的高度和宽度，而不是屏幕的高度和宽度。然后就是把获取到的高度和宽度赋给遮罩层(oMask)，因为我的实际页面高度小于屏幕高度，为了让遮罩层铺满全屏于是将sHeight的值定义为768px，不要忘了加上单位px。

        var sHeight = document.documentElement.scrollHeight;
    var sWidth = document.documentElement.scrollWidth;
    oMask.style.height = 768 + "px";
    oMask.style.width = sWidth + "px";

    • 如果仅仅是这样新创建的结点还只是停留在JS里面，要把结点插入到文档中，需要执行：

        document.body.appendChild(oMask);

    • 可视区域是真用户正看到的区域的大小，其中可视区域的宽度和页面的宽度相同(大部分网页都是竖着浏览的)，获取可视区域高度的代码如下：

        var wHeight = document.documentElement.clientHeight;

    • 在插入遮罩层之后，我们采用相同的方法插入弹出层，如何让弹出层出在屏幕的正中央？我们需要获取弹出层的高度和宽度,利用可视区域的高度和宽度，以及弹出层的高度和宽度，最终确定弹出层的定位。

        var dHeight = queryItems.offsetHeight;
    var dWidth = queryItems.offsetWidth;
    queryItems.style.left = (sWidth - dWidth) / 2 + "px";
    queryItems.style.top = (wHeight - dHeight) / 2 + "px";

    • 设置弹出层关闭：可以点击弹出层的右上角，或者是点击遮罩层，设置onclick事件即可：

        var oClose = document.getElementById("queryItemsClose");
    oMask.onclick = oClose.onclick = function() { // 关闭弹出框
        document.body.removeChild(oMask);
        document.body.removeChild(queryItems);
    }
    javascript
    tinylcy
    682 声望25 粉丝
    « 上一篇
    Scala：协变点和逆变点
    下一篇 »
    Spring MVC + Hibernate + MySQL + Maven集成

    引用和评论

    推荐阅读
    头像
    如何实现一个Web Server

    tinylcy赞 1阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新