招聘官网项目总结

hi all，招聘官网项目告一段落了，下面对这对时间的开发做下总结。

一、整站的特点就是图片量巨大，所以对图片进行了大量的压缩合并和文件规整，并且多处使用了二倍图及对Retina屏做了相应的处理。

例：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .ywj-logo {
        background-size: 138px 89px;
        background-image: url(./images/[email protected]?v),none;
    }
    .ywj-icon-share {
        background-image: url(./images/[email protected]);
    }
}

二、整站的列表都是两端对齐排列。

例：

<ul class="CV">
     <li class="CW"><a href="./school.html#schoolpage1" class="CY"><i class="CX"></i>技术</a></li>
     <li class="CW"><a href="./school.html#schoolpage2" class="CY"><i class="CX"></i>设计</a></li>
     <span class="BI"></span>
</ul>

.CV {
    text-align: justify;
    line-height: 0;
    width: 1220px;
    margin: 0 auto;
}
.CW {
    display: inline-block;
    vertical-align: top;
    width: 123px;
    height: 123px;
    border-radius: 50%;
    background-image: -webkit-linear-gradient(top,#ed4621,#fa6a47);
    background-image: linear-gradient(to bottom,#fa6a47,#ed4621);
}
.BI {
    display: inline-block;
    width: 100%;
    height: 0;
    overflow: hidden;
}

好处就是简单方便。只要一个简单的text-align:justify声明，里面的元素就自动等间距两端对齐布局！根本无需计算每个列表元素间的margin间距，更不用去修改父容器的宽度。

三、整站的弹窗量很大，并且整站采用了全局委托，所以整站只有一个弹窗，弹窗的内容是根据点击的a链接的title类型来显示出其对应的内容。这样页面上想要弹出视频或图片都很方便了。（除了点击弹窗关闭按钮，按esc键也可关闭弹窗）

例1：

<a href="../../src/css/images/person/home.jpg" class="ywj-hd-play" title="video">
      <video src="../../src/css/video/home-max-2.mp4" controls="controls" style="display:none;"></video>
</a>

如果对应的是video视频，只需其父元素是a标签并且其title属性值为video即可。并且打开弹窗会自动开始播放视频，关闭弹窗即会暂停视频。

例2:

<a href="../../src/css/images/18-ywj-qr.jpg" class="ywjb-video-a" title="iframes">
      <iframe src="https://v.qq.com/iframe/player.html?vid=g0635jsczdq&tiny=1&auto=0" allowfullscreen class="jsBoxIframe"></iframe> 
</a>

如果对应的是iframe视频，只需其父元素是a标签并且其title属性值为iframes即可。并且打开弹窗会插入iframe，关闭弹窗即会移除iframe。(注：将iframe hide之后视频还是会继续播放，所以只能将其移除）

例3:

<a href="../../src/css/images/yw-qrcode.png" title="阅文招聘官方微信公众号" class="ywj-icon-share ywj-icon-wx" target="_blank">阅文集团官方微信公众号</a>

如果对应的是图片，只需在将其href属性值设为图片的地址即可。

四、整站的选项卡非常多，所以将其方法封装到commonBox()函数里了，调用的时候只需要传入参数（对应的ul，点击的nav) 即可。

self.commonBox(jsSclUl,jsSclPicNav);

若该选项卡需要自动轮播，即给jsSclpicNav设置data-play='true'属性。

五、发现iframe会阻塞页面的加载，所以将iframe的加载改为放在图片加载完之后。并且给iframe设置其对应的背景图片防止留白。
每个iframe都设置其对应的背景图：

改为图片加载完之后再加载iframe

before：

after：

六、招聘职位列表信息人工粘贴难免会遇到格式问题，前端这边也对其做了处理(处理掉了1、1.等多余字符）。

before:

after:

七、整站都将类名进行了压缩，所以不需要压缩的类名需要在config.json的classIgnore进行配置：

"compress": {
    "html": true,
    "className": true,
    "classIgnore": ["active", "checked", "disabled", "selected", "reverse", "jpg", "png", "svg", "gif","eot","woff","ttf","prev","next","ywjs-qa-close","index","ywj-login-btn","ywj-login-btn","ywj-bar","ywj-btn-a"]
    },

八、所有高亮，显示，隐藏等样式全部用类名active控制，这样在js里面只需removeClass('active')或者addClass('active')即可；

例：

.ywjb-job-msg {
    display: none;
}
.active.ywjb-job-msg {
    display: block;
}

以上就是本次招聘项目的小总结，有问题希望大家帮忙指出，蟹蟹～

招聘官网项目总结

猜你喜欢