一些问题

shengguo 发布于2019-08-30 12:48 / 1305人阅读

摘要：并且满足条件下一个标题高度高于滚动的高度和条件没有下一个标题的其中之一条件。解决了原来专题页面的几个问题，如海报与大小不一致问题。修正了一些边距的问题。下周工作计划确保页面的问题都解决，并完成测试。

2016年第四周周报 1. 上周工作内容

这一周主要把重心放在了项目方面，解决了以下几个问题：

border 1px的问题，直接上代码：

CSS部分：

.line{
    border-bottom: 1px solid #E6E6E6;
}
.iosx2line{
    border-bottom: 0.5px solid #E6E6E6;
}
.iosx3line{
    border-bottom: 0.35714px solid #E6E6E6;
}

JS部分：

    //解决border 1px问题，之所以引入这个js是因为我发现在chrome浏览器上模拟的时候并不支持低于1px像素的设置
    let dpr = window.devicePixelRatio,
        newsHead = $(".newsHead"),
        commentItem = $(".comment-item"),
        nList = $(".n-list,.newslist-digest"),
        mainShow = $(".mainshow-wrapper"),
        borderClass = "",
        isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/);

    if (dpr >= 2) {
        var testElem = document.createElement("div");
        testElem.style.border = ".5px solid transparent";
        document.body.appendChild(testElem);
        if (testElem.offsetHeight == 1){
            if(isMobile && dpr === 2){
                borderClass = "iosx2line";
            }else if(isMobile && dpr === 3){
                borderClass = "iosx3line";
            }else{
                borderClass = "line";
            }
        }else{
            borderClass = "line";
        }
        document.body.removeChild(testElem);
    }
    newsHead.addClass(borderClass);
    commentItem.addClass(borderClass);
    nList.addClass(borderClass);
    mainShow.addClass(borderClass);

标题栏置顶的问题
描述：在项目中需要将每个分栏的标题在不同的情况下分别置顶，做出原生的效果，JS代码如下：

const TopTitle = (() => {

const my = {

    config : {
    },

    init(){
      let h2s = $(".topNews>h2"),
          body = $("body"),
          posfixed = false;
      $(window).on("scroll",function(){
        let titleEle = $("#topTitle");
        h2s.forEach(function(item,index){
          my.config[my.getElementTop(item)] = {
            html :`${item.innerHTML}`,
            isfixed : false,
            element : item
          };
        })
        let tops = Object.keys(my.config),
            currentEle,
            nextEle,
            article,
            currentTop = my.getScrollTop();
        for(let i = 0,len = tops.length; i < len; i++){
          
          //前n-1个标题
          if(i !== (len - 1)){
            nextEle = my.config[tops[i+1]].element;
            article = $(nextEle).parents("article");
          }else{
            //最后一个标题
            currentEle = my.config[tops[i]].element,
            article = $(currentEle).parents("article");
          }
          //满足条件1：当前标题小于滚动的高度。并且满足条件2：下一个标题高度高于滚动的高度；和条件3：没有下一个标题;的其中之一条件。
          if(tops[i] <= currentTop && (tops[i+1] > (currentTop + 40) || !tops[i+1])){
            posfixed = false;
            //如果目前已经有标题被置顶
            if(my.config[tops[i]].isfixed === false){
              my.config[tops[i]].isfixed = true;
              article.append(my.config[tops[i]].html);
              if(!!titleEle){
                titleEle.remove();
              }
            }
            
          }else if(nextEle.getBoundingClientRect().top <= 40){
            console.log(11);
            if(posfixed == false){
              $("#topTitle").removeClass().addClass("posunfixed");
              posfixed = true;
            }
          }else{
            console.log(22);
            posfixed = false;
            titleEle.remove();
          }
        }
      })

    },

//获取当前页面滚动的高度
    getScrollTop(){   
        var scrollTop=0;   
        if(document.documentElement&&document.documentElement.scrollTop){   
            scrollTop=document.documentElement.scrollTop;   
        }else if(document.body){   
            scrollTop=document.body.scrollTop;   
        }   
        return scrollTop;   
    },

//获取元素在页面中的所在位置高度
　　getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualTop;
　　}
  }

return my;

})()

该部分并没有完善，效果还有区别，今天应该可以做完，做完继续更新。

解决了原来专题页面的几个问题，如：
1.poster海报与video大小不一致问题。
2.修正了一些边距的问题。

2. 下周工作计划

确保页面的问题都解决，并完成测试。

3.问题

多列多个元素布局的问题，目前我的布局：

这个是使用justify-content：flex-start,但是可以注意到的是，最左边和最右边的边距距离并不一致，而如果使用justify-content：space-between进行布局，又会导致最后一行元素也左右对称。
能不能达到下面原生的效果，如下图：

3.学习与成长

感觉在编程的时候，更重要的是思考好解决问题的逻辑和需要使用的设计模式与算法，一开始没有思考对正确的逻辑，结果导致在coding的时候不断的陷入困难，不得不推翻前面自己的假设，从新想设计思路。下次再在做类似问题的时候，思考好清晰的逻辑结构，确保逻辑不会出错，然后再进行从coding。

超融合服务器专线服务好一些vps 登录一些网站证书一些python程序一些免费加速器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115075.html

无人值守时代，运维如何保障发布质量？

摘要：摘要阿里巴巴千亿交易背后，如何尽量避免发布故障在面对实际运维过程中遇到的问题该如何解决阿里巴巴运维技术专家少荃，给我们带来了解决方案和思路。在阿里，这些屏幕包括监控发布单机器故障预警等。无人值守发布无人值守发布主要是把上述过程自动化智能化。摘要：阿里巴巴千亿交易背后，如何尽量避免发布故障？在面对实际运维过程中遇到的问题该如何解决？阿里巴巴运维技术专家少荃，给我们带来了解决方案和思路...

zombieda 2019-08-06 14:14 评论0 收藏0
无人值守时代，运维如何保障发布质量？

摘要：摘要阿里巴巴千亿交易背后，如何尽量避免发布故障在面对实际运维过程中遇到的问题该如何解决阿里巴巴运维技术专家少荃，给我们带来了解决方案和思路。在阿里，这些屏幕包括监控发布单机器故障预警等。无人值守发布无人值守发布主要是把上述过程自动化智能化。摘要：阿里巴巴千亿交易背后，如何尽量避免发布故障？在面对实际运维过程中遇到的问题该如何解决？阿里巴巴运维技术专家少荃，给我们带来了解决方案和思路...

LancerComet 2019-06-25 18:37 评论0 收藏0
无人值守时代，运维如何保障发布质量？

摘要：导读阿里巴巴千亿交易背后，如何尽量避免发布故障在面对实际运维过程中遇到的问题该如何解决近日，在大会上，阿里巴巴运维技术专家少荃，给我们带来了解决方案和思路。在阿里，这些屏幕包括监控发布单机器故障预警等。导读：阿里巴巴千亿交易背后，如何尽量避免发布故障？在面对实际运维过程中遇到的问题该如何解决？近日，在GOPS大会上，阿里巴巴运维技术专家少荃，给我们带来了解决方案和思路。 showIm...

Yu_Huang 2019-05-28 17:06 评论0 收藏0
无人值守时代，运维如何保障发布质量？

摘要：导读阿里巴巴千亿交易背后，如何尽量避免发布故障在面对实际运维过程中遇到的问题该如何解决近日，在大会上，阿里巴巴运维技术专家少荃，给我们带来了解决方案和思路。在阿里，这些屏幕包括监控发布单机器故障预警等。导读：阿里巴巴千亿交易背后，如何尽量避免发布故障？在面对实际运维过程中遇到的问题该如何解决？近日，在GOPS大会上，阿里巴巴运维技术专家少荃，给我们带来了解决方案和思路。 showIm...

2501207950 2019-07-16 16:33 评论0 收藏0
Jstorm到Flink 在今日头条的迁移实践

摘要：第二个问题就是说业务团队之间没有扩大管理，预算和审核是无头绪的。支持一些高优先级的比如说支持以及窗口等特性包括说。到现在为止，整体迁移完了，还剩下十个左右的作业没有迁移完。作者:张光辉本文将为大家展示字节跳动公司怎么把Storm从Jstorm迁移到Flink的整个过程以及后续的计划。你可以借此了解字节跳动公司引入Flink的背景以及Flink集群的构建过程。字节跳动公司是如何兼容以...

luckyyulin 2019-07-24 10:53 评论0 收藏0
前端架构师亲述：前端工程师成长之路的 N 问及回答

摘要：问题回答者黄轶，目前就职于公司担任前端架构师，曾就职于滴滴和百度，毕业于北京科技大学。最后附上链接问题我目前是一名后端工程师，工作快五年了。 showImg(https://segmentfault.com/img/bVbuaiP?w=1240&h=620); 问题回答者：黄轶，目前就职于 Zoom 公司担任前端架构师，曾就职于滴滴和百度，毕业于北京科技大学。 1. 前端开发问题大...

crossoverJie 2019-08-23 18:14 评论0 收藏0