Gregory

一般我们在项目中使用的图片都是png，jpeg，或者iconfont 相比之下，SVG图有以下这些优势：

• SVG是可缩放的矢量图，无论怎样缩放都很清晰。

• 可以通过文本编辑器创建和修改，所以可以改变颜色。

• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

• SVG图片有title和desc标签，有利于SEO搜索。

一、格式化痛点

虽然我们团队制定了代码规范，但是平时大家写代码的时候还是各有各的风格，遇上紧急的需求或者bug，规范基本是没有的。

而且目前团队不建议使用编辑器自带的格式化插件，所以多人开发的项目通常是越来越乱。

关于代码格式化的插件，大家不喜欢的原因是，

第一，团队有人用WebStorm，有人用VScode，格式化风格可能不一样；

第二，例如VScode的插件Prettier和Vetur，它们都有格式化的功能，可能会有冲突；

第三，有时格式化后的代码很奇怪，例如下面这种，总之就是看着不舒服。

根据Angular团队的git commit规范，简单说下常用的commit的方式：

type 主要有一下几种：

接到一个需求，滚动一次鼠标，改变时间轴刻度。因为鼠标滚动一次会触发多次滚动事件，为了节约性能，就想到使用防抖。

数组快速创建问题

我们有时候需要快速创建一个数组，比如一个1-30的下拉列表，该怎么写呢？

如果我们直接在初始化的时候赋值 ，代码会显得冗余不堪。

而如果用 for 循环一个个push，也觉得不够简洁。

data(){
    return {
        arr : [1, 2, 3, ......, 29, 30],
        arr2 : []
    }
}
 
created(){
    for(let i = 1; i <= 30; i++){
        this.arr2.push(i);
    }
}

使用 border-image

CSS 提供了 border-image 属性用于给 border 绘制复杂图样，与 background-image 类似，我们可以在 border 中展示 image 和 linear-gradient。

通过 border-image 设置渐变色 border 是最简单的方法，只需要两行代码：

div {
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}
 
/* 或者 */
div {
  border: 4px solid;
  border-image-source: linear-gradient(to right, #8f41e9, #578aef);
  border-image-slice: 1;
}

这种方式虽然简单但有个明显的缺陷，不支持设置 border-radius。接下来会介绍几种支持 border-radius 的方法。

ES7新特性

1.Array.prototype.includes()方法

在 ES6 中我们有 String.prototype.includes() 可以查询给定字符串是否包含一个字符，而在 ES7 中，我们在数组中也可以用 Array.prototype.includes 方法来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

const data = {};
const element = document.getElementById('myDiv');
 
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

上面代码原意是将一个 DOM 节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[object HTMLDivElement]。

什么是Map

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。
如果你需要“键值对”的数据结构，Map 比 Object 更合适。

效果图

直接上代码

APP.vue

/** 设置主题 */
changeTheme(data) {
    window.document.documentElement.setAttribute('data-theme', data); // 给根节点设置data-theme属性，切换主题色就是修改data-theme的值
},

一般会在两种情况下使用$event参数。

一、DOM事件回调

v-on指令监听dom事件的时候不需要写$event，回调函数会默认接收该参数。（形参不一定要写e，写什么都可以）

如果sliderMove传了指定的参数a，那么就会接收a。

如果既想接收事件对象，又想接收a，要写成@mousedown="sliderMove($event, a)"。

<template>
  <div ref="bar" :style="barCSS" class="bar" @mousedown="sliderMove"></div>
</template>
<script>
 
export default {
  methods: {
    sliderMove(e) {
      console.log(e);
    }
  }
};
</script>