本周学习小结4.12

2024年5月10日 69次阅读 来源: 范洋

前言

本周主要参与公司项目开发。这里就记录一下开发中遇到的问题与解决方法。

正文

    • 页面跳转时传参
      我所做的其中一个页面有选择两个选项然后传递到结果页的功能。传递参数时，vue-router的编程式导航有2种方法：param和query。我刚开始使用的是param，但是我在测试时发现，如果结果页进行了刷新，那么前面选择的选项内容会丢失。
      解决办法：使用另一种query方法传递参数。
      vue-router的query形式传参会把参数拼接到url后面，不像param是隐藏的，所以在页面刷新时，url及其参数也可以保存下来。拼接的形式类似于get请求的参数，如：

       /register?username='stupid'&password='man'

    • 传参时使用键值对保存参数
      问题形如：

      /register?info={'username':'stupid','password':'man'}

      因选择内容比较多，所以内容都存在一个对象里面，刚开始传递时我直接用键值对的形式传整个对象，经过我的测试，这样传参只有在页面直接跳转时才能正常获取参数，如果这时你刷新了页面，那么这个对象就会变成空，打印出来就是下面这样：

      [object object]

      解决方法：vue的router里面query存储的内容也是一个对象，所以我改用了直接把query赋值为对象参数，然后经过vue内部的操作，把选择对象内的每一项内容都提取出来以key=value的形式以&隔开拼接起来，这样如果再次刷新就不会丢失数据啦！
      param如果以键值对传递对象刷新会不会变成空？这个答案呢，刷新之后param整个都变成空了，当然没有任何参数啦~

    • 文本溢出显示省略号…
      在我写的内容中需要简略列出文章的列表，部分显示内容，所以需要这个功能。对于这个问题，有单行文本溢出和多行文本溢出。
      1.单行文本溢出
      比较简单，主要借用text-overflow:ellipsis。当然还有另外两个需要设置:

      width:xxxpx;    //限制单行文本显示的宽度
overflow:hidden;      //溢出隐藏，如果没有这一条，下面一条也不会生效
text-overflow:ellipsis;      //文本溢出时显示省略号
white-space:no-wrap;      //设置换行方式：不换行

      2.多行文本溢出
      与单行溢出的方法有点不一样

      width:xxxpx;
display: -webkit-box;    //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;   //必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3;     //用来限制在一个块元素显示的文本的行数
overflow: hidden;

      不过在我测试的时候，写在内部样式里面的时候没有生效，而我改到内联样式时就生效了。这个问题我也不知道为啥，也许是我某一行写茬了吧，有兴趣的朋友可以试试~
      不过上面这种方法有一定的局限性，看到-webkit就知道只适用于webkit内核的浏览器还有移动端。网上还有另一种方法，适用范围广，有需要的伙伴可以参照：

      p{
    position: relative; line-height: 20px; max-height: 40px;overflow: hidden;
}
p::after{
    content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

适用范围：
    该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注：

    将height设置为line-height的整数倍，防止超出的文字露出。
    给p::after添加渐变背景可避免文字只显示一半。
    由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。

    • js判断对象为空
      项目中，有时需要判断对象是否为空，如上面的两两配对，如果用户直接通过url进入的话，没有参数指定配对双方的内容，这时候需要设置默认项。不过在判断参数是否为空时遇到了一点问题，稍微百度了一下发现了以下几个简单方法：

         1.var a = {};
   if(!a){ console.log(1);}
   else if(a == null) { console.log(2);} 
   else { console.log(3);}     //结果为3
   
   2.var b = {};
   if(b == {}){ console.log(4);}
   if(b == '{}') { console.log(5);} 
   if(typeof(b) == 'object') { console.log(6);}     //结果为6
   
   3.var c = {};
   if(JSON.stringify(c) == "{}"){ console.log(7);}     //结果为7
   
   所以可以使用代码3的方法判断对象是否为空对象{}；

   如果对象不为空，并且知道对象不为空时，某个属性(比如{id:111})一定存在，则可以里这样判断：
   4.var d = {};
   var e = {id:111};
   if(d.id){ console.log(8);}
   if(e.id){ console.log(9);}     //结果为9
   
   小结：显然代码3的判断方式比较“强势”，但效率明显不如代码4的判断方法
        原文作者：范洋
        原文地址: https://segmentfault.com/a/1190000014478324
        本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
    点赞