工作总结(1)

今天来做点学习总结，这些学习总结都是从工作中整理来的，自然做了总结，就比较容易积累经验，提高以后的工作效率了。好吧，开始吧。

Vuejs中图片的引入问题

这里指的图片引入问题是这样的：一般开发使用比较多vue-cli脚手架，然后我在开发过程中遇到的是在项目其他位置存放的图片，虽然引入的路径是正确的，但是无法显示到页面上。我在网上搜索了不少这样的问题，有些是在打包后发现的。

目前有几个方案是可行的：

把图片全部放到vue-cli脚手架生成的assets文件夹中，这个文件夹本身也放着vue-cli自带的图片。这个文件夹中的图片可以直接通过路径引入，而且能够正常的显示到页面上；
不改变图片的位置，直接通过import imageXX from 'path'的方法引入到文件中。这种方式可以通过变量来引用图片的路径，也是可以正常的显示到页面上。但是在css样式中就实现不了，可能要在模板上直接通过:style="background-image:..."来实现，比较麻烦；
同上方案，但是是通过require('path')的方法引入到文件中。问题一样，就是对于css的样式实现来说比较困难；
网上还有一种方案是在build/utils.js中找到ExtractTextPlugin位置在对象中加入这句publicPath: '../../'。这个方案没有试过，因为在vue-cli3中，文件结构有变化了，我猜测这个可能要写到vue.config.js中。以后有机会再测试。

关于手机号码的正则表达式

这个简单带过，这个正则表达式就是/^1(3|4|5|7|8)\d{9}$/。

不过，有个地方需要关注的，就是在使用reg.test(str)时，reg正则表达式不要带g修饰符。我们都知道，g是匹配全部可匹配结果，比如说：

let str = 'aaaaaaaa'
const reg1 = /a/
const reg2 = /a/g
str.match(reg1) // ["a", index: 0, input: "aaaaaaaa"]
str.match(reg2) // ["a", "a", "a", "a", "a", "a", "a", "a"]

不带g时，字符串从左到右匹配，只要匹配成功就停止匹配；带g时，同样的匹配方向，但是会一直匹配到整个字符串结束。
在使用reg.test(str)时，如果带修饰符g，在第一次验证时是从字符串第一位开始，但是如果有第二次验证时，就会从第一次验证结束的位置开始验证。这样就可能导致两次验证结果不同：

const reg=/\./g
reg.test(0.5) // true，第一次验证从字符串第一位开始
reg.test(0.5) // false,因为接着上一次的字符串位置查找，没找到正则匹配的内容，所以结果是false，false以后，index会自动归0
reg.test(0.5) // true

所以，在做reg.test(str)验证时，正则表达式最好不带修饰符g。

关于CSS背景图片的设置

这里要提的是，CSS背景图片是可以同时设置多张的，而且每张背景图片的样式都可以设置，但是我在开发中发现设置了repeat的背景图片会覆盖掉排在后面的图片，所以最好是把这张图片的顺序放在最后，参考如下：

1
2
3

background-image: url("bg_top.jpg"), url("bg_bottom.png"), url("bg_middle.jpg");
background-repeat: no-repeat, no-repeat, repeat;
background-position: top, bottom, center;

关于rem布局

rem布局其实还是挺不错的，可以动态的屏幕宽度来设置html的font-size，并且调整所所有元素的样式。可以参考网上关于网易rem布局的原理。

关于axios跟promise

这里留一个promise配合axios开发的参考代码：

// api
export const submitApi = function (url, params, xxx) {
  return new Promise((resolve, reject) => {
    axios.post(url, params, {
      headers: {
        XXX: xxx
      }
    }).then(res => {
      resolve(res);
    }).catch(error => {
      reject(error);
    })
  });
}

// 调用
submitApi(url, params, xxx).then(res => {
  if (res.status === 200) {
    console.log(res.data)
  }
}).catch(error => {
  console.log('something wrong!')
});

先这些吧。