前言

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

正文

• 页面跳转时传参

  我所做的其中一个页面有选择两个选项然后传递到结果页的功能。传递参数时，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（如：…）；兼容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的判断方法