深浅模式

十.编码技巧 ​

前言

总结一些开发中常见的问题，优化改善编码技巧，提高代码质量

  • 一些常见的编码习惯
    • css、js、image 等静态文件应该放在约定的目录里面
    • 在页面中尽量避免写入行内样式，即 style=“”
    • 引号规则：一句代码中只使用一种引号则双引号优先，否则同意最外层使用单引号
    • 变量命名：变量采用驼峰式命名且首字母小写（除了对象的属性以外），定义后没有被使用的变量要删除
    • 函数规则：无论是函数声明还是函数表达式，“(”前不要空格，但‘’{‘’前一定要有空格。函数调用括号前不需要空格，立即执行函数外必须包一层括号
    • 数组、对象的规则：两者最后均不要有多余的逗号；对象属性名不需要加引号
    • 在同一个函数内部中，局部变量的声明必须定义在顶端
    • 除了三目运算符外，其他的（if、else 等）禁止简写
    • 函数中传入的参数必须具有有效性，对特殊的入参必须进行说明
    • 尽量减少循环嵌套层次，尽量避免大于三层的循环

1.条件判断 ​

  • 常见条件判断if

    js
    let name = "lisi"
let age = 18
if (name === "zhangsan") {
  age = 21
} else if (name === "lisi") {
  age = 18
} else if (name === "wangwu") {
  age = 12
}

  • 常见条件判断switch

    js
    switch (name) {
  case "zhangsan":
    age = 21
    break
  case "lisi":
    age = 18
    break
  case "wangwu":
    age = 12
    break
}

    推荐

    • 使用对象的形式简写

      js
      let name = "lisi"
let obj = { zhangsan: 21, lisi: 18, wangwu: 12 }
let age = obj[name] || 18

    注意

    以上这种技巧适用于循环判断一次赋值的情况，如果判断过后有较多处理逻辑的还需要使用 if 或 switch 等方法。

2.生成数组 ​

  • 常见生成数组方式

    js
    let hours = []
for (let i = 0; i < 24; i++) {
  hours.push(i + "时")
}

    推荐

    • 使用 Array.from 生成数组

      js
      let hours = Array.from({ length: 24 }, (value, index) => index + "时")

3.按需加载 ​

  • 常见加载页面方式

    js
    import home from'@/page/index/index'
...
{
  path: '/index',
  component: home,
  name: '首页'
}
...

    推荐

    • 按需加载页面

      js
      ...
{
  path: '/index',
  component: () => import('@/page/index/index'),
  name: '首页'
}
...

4.按需渲染 ​

在 Vue 页面中，一些模块可能需要用户主动触发才会显示，比如弹框组件等这样的子组件，那么我们可以使用 v-if 来进行按需渲染，没必要一进页面就渲染所有模块

5.路由跳转 ​

不推荐

  • 直接调用原生 js API，会导致跳转到加载过的页面每次都是重新加载

    js
    location.href = "/home"
location.hash = "/home"

  • vue 中可以使用path：优于以上方式，当路径不变，路由方式修改不会影响跳转结果

    js
    this.$router.push({ path: "home" })

推荐

  • 使用name: 对于 path，name 使用起来就方便多了，因为其具有唯一性，即使我们修改了 path，还可以使用原来的 name 值进行跳转

    js
    this.$router.push({ name: "home" })

6.全局混入 ​

js
app.mixin({
  beforeCreate() {
    console.log("我是全局mixin")
  },
})

7.computed ​

尽量使用 computed 代替 watch，computed 可以理解为懒加载版的 watch,使用 computed 可以提高性能

8.枚举字段 ​

  • 常见项目一些变量像全局变量一样散落在项目的各个地方，难以管理

    js
    localStorage.token = "xxx" // a.page
localStorage.token = "xxx" // b.page
localStorage.token = "xxx" // c.page

    推荐

    • 定义枚举字段

      js
      // types.js
export const USER_NAME = "userName"
export const TOKEN = "token" // 当需要修改变量名（token）时，直接修改文件中的值即可，无需修改使用它的页面，同时这也可以避免命名冲突等问题的出现

    • 引用枚举字段

      js
      import { USER_NAME, TOKEN } from "../types.js"
sessionStorage[USER_NAME] = "张三"
localStorage[TOKEN] = "xxx"
枚举用法的扩展-位运算
  • 定义
js
const SKILLS = {
  CSS: 1,
  JS: 1 << 1,
  HTML: 1 << 2,
  WEB_GL: 1 << 3,
}
let skills = 0
function addSkill(skill) {
  skills = skills | skill
}
addSkill(SKILLS.CSS)
addSkill(SKILLS.HTML)
addSkill(SKILLS.WEB_GL)
  • 使用
js
SKILLS.CSS & skills // 判断是否有css

9.setInterval 问题 ​

一般情况下我们在项目里不建议使用 setInterval，因为其会存在代码的执行间隔比预期小以及 “丢帧” 的现象，原因在于其本身的实现逻辑。很多人会认为 setInterval 中第二个时间参数的作用是经过该毫秒数执行回调方法，其实不然，其真正的作用是经过该毫秒数将回调方法放置到队列中去，但是如果队列中存在正在执行的方法，其会等待之前的方法完毕再执行，如果存在还未执行的代码实例，其不会插入到队列中去，也就产生了 “丢帧”。

而 setTimeout 并不会出现这样的现象，因为每一次调用都会产生了一个新定时器，同时在前一个定时器代码执行完之前，不会向队列插入新的定时器代码。

js
setInterval(() => {
  // 该定时器实际会在 3s 后立即触发下一次回调
  // 执行完这里的代码需要 2s
}, 1000)
let doSometing = () => {
  // 使用 setTimeout 改写，4秒后触发下一次回调
  // 执行完这里的代码需要 2s
  setTimeout(doSometing, 1000)
}
doSometing()

10.for in 问题 ​

  • 常规操作没有问题

    js
    let arr = [1, 2]
for (let key in arr) {
  console.log(arr[key]) // 会正常打印 1, 2
}

    注意

    • 添加自定义属性，会有问题

      js
      Array.prototype.test = function () {} // 在 Array 原型链上添加一个方法
for (let key in arr) {
  console.log(arr[key]) // 此时会打印 1, 2, ƒ () {}
}

      因为我们不能保证项目代码中不会对数组原型链进行操作，也不能保证引入的第三方库不对其进行操作，所以不要使用 for in 循环来遍历数组。

11.清除定时器 ​

js
export default {
  methods: {
    fun1() {
      const timer = setInterval(() => {
        console.log("1") //具体执行代码
      }, 1000)
      this.$once("hook:beforeDestory", () => {
        clearInterval(timer)
        timer = null
      })
    },
  },
}

12.复用代码 ​

在 Vue 中，页面都可以看作是由大大小小的模块构成的，即便是一行代码、一个函数、一个组件都可以看作是一个个自由的模块。那么提高代码的复用性的关键便在于编写可复用的模块，也就是编写可复用的代码、函数和组件等。

  • 使用变量的赋值缓存使用来解决数据的重复

    js
    let person = []
for (let i = 0; i < data.obj.items.length; i++) {
  person.push({
    name: data.obj.items[i].name, // 出现了重复性的代码片段 data.obj.items
    age: data.obj.items[i].age,
  })
}

    上述代码一旦需要修改变量 items 为 lists，那么我们就得修改 3 处地方，不知不觉就增加了维护成本

    js
    let person = []
let values = data.obj.items // 通过变量 values 实现了复用，不管是维护成本还是代码可读性上，复用的优势都显而易见
for (let i = 0; i < values.length; i++) {
  person.push({
    name: values[i].name,
    age: values[i].age,
  })
}

  • 使用公共方法来解决功能的重复

    js
    <tempalte>
   <div>
       <input type="text" v-model="str1">
       <input type="text" v-model="str2">
       <div>{{ str1.slice(1).toUpperCase() }}</div>
       <div>{{ str2.slice(1).toUpperCase() }}</div> // toUpperCase，大写字母转化功能点的重复
   </div>
</template>

    重复书写相同功能的代码是一种不经过大脑思考的行为，我们需要对其进行优化，这里我们可以把功能点封装成一个函数,在用到该方法的地方调用即可

    js
    export default {
  methods: {
    sliceUpperCase(val) {
      return val.slice(1).toUpperCase()
    },
  },
}

    像在双花括号插值和 v-bind 表达式中重复的功能点，我们可以封装成过滤器使用更加合适

    js
    // 单文件组件注册过滤器
filters: {
   sliceUpperCase(val) {
       return val.slice(1).toUpperCase()
   }
}
// 全局注册过滤器
Vue.filter('sliceUpperCase', function (val) {
   return val.slice(1).toUpperCase()
})

    然后在 模板 中使用“管道”符进行过滤：

    js
    <div>{{ str1 | toUpperCase }}</div>
<div>{{ str2 | toUpperCase }}</div>

    这样我们就把重复的功能性代码封装成了函数，而不管是过滤器还是正常的方法封装，其本质都是函数的封装。

  • 组件封装

    相比较于函数的封装，规模更大一点的便是组件的封装，组件包含了模板、脚本以及样式的代码，在实际开发中组件的使用频率也是非常大的，我们项目中的每一个页面其实都可以看作是一个父组件，其可以包含很多子组件，子组件通过接收父组件的值来渲染页面，父组件通过响应子组件的回调来触发事件。

    封装一个组件主要包含两种方式，一种是最常见的整体封装，用户通过改变数据源来呈现不同的页面状态，代码结构不可定制化。例如：

    js
    <div>
  <my-component data="我是父组件传入子组件的数据"></my-component>
</div>

    另一种便是自定义封装，也就是插槽(slot)，我们可以开放一部分槽位给父组件，使其能够进行一定程度的定制化，例如：

    js
    <div>
  <my-component data="我是父组件传入子组件的数据">
    <template slot="customize">
      <span>这是定制化的数据</span>
    </template>
  </my-component>
</div>

    在 myComponent 组件中我们便可以接收对应的 slot：

    js
    <div class="container">
    <span>{{ data }}</span>
    <slot name="customize"></slot>
<div>

    这里我们通过定义 slot 标签的 name 值为 customize 来接收父组件在使用该组件时在 template 标签上定义的 slot="customize" 中的代码，不同父组件可以定制不同的 slot 代码来实现差异化的插槽。最终渲染出来的代码如下：

    js
    <div>
  <div class="container">
    <span>我是父组件传入子组件的数据</span>
    <span>这是定制化的数据</span>
  </div>
</div>

    这样我们就完成了一个小型组件的封装，将共用代码封装到组件中去，页面需要引入的时候直接使用 import 并进行相应注册即可，当然你也可以进行全局的引入：

    js
    import myComponent from "../myComponent.vue"
// 全局
Vue.component("my-component", myComponent)

  • 插件封装

    在某些情况下，我们封装的内容可能不需要使用者对其内部代码结构进行了解，其只需要熟悉我们提供出来的相应方法和 api 即可，这需要我们更系统性的将公用部分逻辑封装成插件，来为项目添加全局功能，比如常见的 loading 功能、弹框功能等。

    编写插件

    js
    /* toast.js */
import ToastComponent from "./toast.vue" // 引入组件
let $vm
export default {
  install(Vue, options) {
    if (!$vm) {
      const ToastPlugin = Vue.extend(ToastComponent) // 创建一个“扩展实例构造器”
      $vm = new ToastPlugin({
        el: document.createElement("div"), // 声明挂载元素
      })
      document.body.appendChild($vm.$el) // 把 toast 组件的 DOM 添加到 body 里
    }
    let toast = (text, duration) => {
      // 给 toast 设置自定义文案和时间
      $vm.text = text
      $vm.duration = duration
      setTimeout(() => {
        // 在指定 duration 之后让 toast 消失
        $vm.isShow = false
      }, $vm.duration)
    }
    if (!Vue.$toast) {
      // 判断 Vue.$toast 是否存在
      Vue.$toast = toast
    }
    Vue.prototype.$toast = Vue.$toast // 全局添加 $toast 事件
  },
}

    注册插件

    js
    import Toast from "@/widgets/toast/toast.js"
Vue.use(Toast) // 注册 Toast

    使用插件

    js
    this.$toast("Hello World", 2000)

    当然你也可以不使用 install 方法来编写插件，直接采用导出一个封装好的实例方法并将其挂载到 Vue 的原型链上来实现相同的功能。

总结

掌握一些常见的 vue 开发技巧，写出更规范的代码