本周学习小结4.12

前言

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

正文

• 页面跳转时传参
  我所作的其中一个页面有选择两个选项而后传递到结果页的功能。传递参数时，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的判断方法