2018我的前端工作

先占坑，这两天趁着不忙把博客更新下，真的好久没更了，大概内容有以下几部分（算是笔记吧）-2019-01-21

• css
• js
• vue
• 微信小程序
• 工作总结

css

• 字数过多省略号代替(需固定元素宽度)

  /* 单行省略 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;/* 两行省略 */
  text-overflow -o-ellipsis-lastline
  overflow hidden
  text-overflow ellipsis
  display -webkit-box
  -webkit-line-clamp 2
  line-clamp 2
  -webkit-box-orient vertical

• inlineblock元素需设置统一的vertical-align 避免父元素高度不能正常显示

JavaScript

• 简单的if判断可以使用三目运算符替代，精简代码

• 字符串判断为空或多个空

  let commentTest = this.data.commentContent.split(' ').join('')     // commentTest.length 为0

• 手机号判断

  if (number.length == 0 || !(/^1[3456789]\d{9}$/.test(number)))

• 通过url跳转传参

  function getQueryVariable(variable){var query = window.location.search.substring(1);var vars = query.split("&");for (var i=0;i<vars.length;i++) {var pair = vars[i].split("=");if(pair[0] == variable){return pair[1];}}return(false);
  }
  var id= getQueryVariable("id");

• 元素内容复制到剪贴板

  <!-- jQuery -->
  $('.copy').click(function (e) { e.preventDefault();const input = document.createElement('input');document.body.appendChild(input);input.setAttribute('value', $('.dan').html());input.select();if (document.execCommand('copy')) {document.execCommand('copy');console.log('复制成功');showNotice('复制成功')}document.body.removeChild(input);
  });

• 非点击事件触发的windos.open() 如ajax请求 在成功后调用该方法被拦截 异步请求改为同步

• jQuery页面滚动

  $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); // 滚动到顶部
  $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); // 滚动到指定位置

• 谷歌浏览器本地静态文件不支持操作cookie

• 用jQuery的prop()改变checkbox的checked不触发change事件解决：在改变checked状态后用change()$('.' + item + 'Input').prop('checked', true).change();

vue

• 通过Vue.set 和Vue.delete 二次操作对象
• better-scroll在移动端使用需点击时初始化scroll时设置option的click

• vue-router中keep-alive的使用：

  <!-- 把需要缓存的组件name放入include即可 不会影响子路由动画 -->
  <transition :name="transitionHome"><keep-alive include="home,shop,rank,user"><router-view></router-view></keep-alive>
  </transition>

微信小程序

• 使用scroll-view作横向滚动时
  • 定宽
  • 设置滚动项display：inline-block;
  • 设置滚动视图容器white-space: nowrap;
  • 滚动项不要用float
• 在onReady query.selectAll获取的数据时在其函数里对数据进行处理并setData
• 修改已赋值的变量 先作备份 修改备份后 把备份setData 给变量
• 配置request域名后且不校验域名 需重启开发者工具
• 使用\r\n在wx.showModal的content中换行 在开发者工具上显示不换行，但是在真实环境下是正常换行的
• input有默认min-height
  -swiper的current如有绑定值如a 在swiper滑动对a进行定义时需要判断source（在swiper和scroll-view作联动时可能会用到），否则可能出现swiper乱跳bug

2019-02-12

工作总结（待更新）