招聘官网项目总结

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

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

例：

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

 

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

例：

<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

例：

<iframe data-src="//v.qq.com/iframe/player.html?vid=d0609afn3e6&amp;tiny=1&amp;auto=0" allowfullscreen=""></iframe>

这时候iframe视频只是一张图片，等所有的图片资源全部加载完毕之后，再为其设置src属性引入视频：

例：

<iframe data-src="//v.qq.com/iframe/player.html?vid=d0609afn3e6&amp;tiny=1&amp;auto=0" allowfullscreen="" src="//v.qq.com/iframe/player.html?vid=d0609afn3e6&amp;tiny=1&amp;auto=0"></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;
}

 

js事件委托：

冒泡：气泡从水底往上升，由深到浅，升到最上面，气泡会经过不同层次的水，相对应的：气泡就相当于事件，而水则相当于整个dom树，事件从dom树的底层，层层往上传递，直至传递到dom的跟节点。所以当一个span标签上面有一个click事件，那么当它被点击时，会触发事件冒泡，直至到达body，经过的每一个有click的标签都会被被触发其click事件。

终止冒泡的方法：

1.event.stopPropagation();

2.节点只处理自己触发的事件即可，不是自己的事件不处理：event.target引用了产生此event对象的dom节点，而event.currentTarget则引用了当前处理节点。我们可以通过判断这两个target是否相等而处理事件。

例如：

$(".box1").click(function(){
    if(event.target == event.currentTarget){
        alert("我是div");
    }
});

方法一在于取消事件冒泡：即当某些节点取消冒泡厚，事件不会再传递，方法二在于：不阻止冒泡，过滤需要处理的事件，事件处理后还会继续传递。

<script>
    window.onload=function(){
    document.getElement("body",addEventListener("click",eventPerformed);)}
    function eventPerformed(){
        var target =event.target;
        switch(target id){
            case  "span";
            alert("我是span");
            break;
            case "div";
            alert("我是div");
            break;
    }
}
</script>    

我们把本来每个元素都要处理的函数，都交给其祖父节点body来完成，这个就叫事件委托。

优点：

1）管理等函数变少了，不需要为每个元素都添加监听函数，对于同一个父节点下面类似的子元素，可以委托给父元素的监听函数来处理。

 

2）可以方便地添加和修改元素，不需要为每个元素的改动而修改事件。

3）js和dom节点之间的关联变少了，减少了因循环引用而带来的内存泄漏发生的概率。

语法：

$(selector).delegate(childSelector,event,data,function()}

 

ajax篇：

1)$.each()遍历数组：

var arr= [[1,2],[3,4],[5,6]];
    $.each(arr1,function(i,item){
    console.log(item);   
});

output：

[1,2];
3;
4;

i为arr的序列数，item为arr数组里面的每一项。（里面的每一项可以是数组也可以是字符串,arr是要循环的数组。

$.each()遍历对象的属性：

var obj = {one:22,two:23,three:24};
$.each(obj,function(key,value){
     console.log(key);
});

output:
one 
two
three

var obj = {one:22,two:23,three:24};
$.each(obj,function(key,value){
    console.log(value);
});

output:
22
23
24

var obj = {one:22,two:23,three:24};
$.each(obj,function(key,value){
    console.log(obj[key]);
});

output:
22
23
24

2)ajax 请求数据：

&.ajax({
    url:"",
    dataType:"json",
    type:"POST",
    success:function(data){
        //do something
    }，
    error:error;
});

 3)根据url获取参数时候要进行容错性处理：

先复习以下几个方法的使用：

.split():

var string = "hello";
string.split("");
output:
["h", "e", "l", "l", "o"]
var string = "hello";
string.split("");
var string2 = string.split("");
console.log(string2);
output:
 ["h", "e", "l", "l", "o"]

／/使用.split()方法会直接返回使用.split()方法后的值

其他使用方法：

"hello".split("")    //可返回 ["h", "e", "l", "l", "o"]
"2:3:4:5".split(":")    //将返回["2", "3", "4", "5"]
"|a|b|c".split("|")    //将返回["", "a", "b", "c"]
"hello".split("", 3)    //可返回 ["h", "e", "l"]

.indexOf():

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

.replace():

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

var keyValue = 'key=1';
var str = keyValue.replace("key=",'hah');
console.log(str);

output:
hah1

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURIComponent(test1)+ "<br />")
document.write(decodeURIComponent(test1))

output:

http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
http://www.w3school.com.cn/My first/