前端那些事之源码调试

小编从2017年入行，到现在已经六年的时间了，最开始会的东西也少，对于需求做起来都很费劲，而且那时候很多浅显的东西，去网上一找一大片。随着做的项目增加和突破了一个又一个的技术壁垒。小编也在成长，特别是最近小编遇到的一个性能问题，昨天晚上花了一晚上的时间，整理了一下自己针对element-ui源码的调试过程，希望大家能一起进步。

主要是小编在使用element-ui做项目的时候，里面有个功能模块，需要用的下拉树，为了项目进度，小编就找了一个开源的el-select-tree。github地址：https://github.com/yujinpan/el-select-tree

当然，这个下拉树的优点在于可以支持element-ui中Select和Tree的全部的props、methods和events，这就让我把这个融入到项目里很省心。根据官方的demo，先写出了这样的代码

main.js【全局注册el-select-tree】

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ElSelectTree from 'el-select-tree';
...
Vue.use(ElementUI);
Vue.use(ElSelectTree);
...

App.vue【使用el-select-tree组件。详细props可以参考element-ui官网】

<template>
 <el-select-tree
    width="120px"
    placeholder="请选择内容"
    show-checkbox
    :data="treeData"
    v-model="value"
    filterable
    multiple
  ></el-select-tree>
  </template>
  <script>
  export defalut{
    name:'app',
    data(){
      return {
        value: [], // 因为组件中添加了multiple属性，绑定的时候需要是数组，官网给的是int类型数据，小编因为这个控制台报错还找了好久
        treeData: [
          {
            value: 1,
            label: 'text1',
            children: [
              { value: 5, label: 'text5' },
              { value: 6, label: 'text6' }
            ]
          },
          { value: 2, label: 'text2' },
          { value: 3, label: 'text3' },
          { value: 4, label: 'text5' }
        ]
        }
    }
  }
  </script>

当时，项目中的数据结构和和组件的结构不一样，项目中的组件，需要用到props属性对数据进行转换，返回数据大概是这样

{
  code:'000000',
  data:[
    {
      code:'1000000',
      name:'长春市'，
      id:'a',
      children:[
        {
          code:'1000001',
          name:'南关区'，
          id:'a1',
        },
        {
          code:'1000002',
          name:'朝阳区'，
          id:'a2',
        },
        ...
      ]
    },
    {
      code:'2000000',
      name:'吉林市'，
      id:'b',
      children:[
        {
          code:'2000001',
          name:'船营区'，
          id:'b1',
        },
        {
          code:'2000002',
          name:'昌邑区'，
          id:'b2',
        },
        ...
      ]
    },
  ],
  msg:'数据加载成功'
}

在element-ui中，Tree默认的props是这样的

很显然，后端返回的数据不符合默认格式，这个时候，我就在el-select-tree组件中添加了props，就变成了这样

<template>
 <el-select-tree
    width="120px"
    placeholder="请选择内容"
    show-checkbox
    :data="treeData"
    v-model="value"
    filterable
    multiple
    :props="{label:(data) => {return data.code+'-'+data.name}, children:'children'}"
  ></el-select-tree>
  </template>

又这样相安无事了一段时间，后来随着数据的增加，返回到前端的数据数量和层级都越来越多，前端的压力也越来越重，对于一些客户端电脑性能不好的，经常能看到他们浏览器【无响应】。作为前端，其实给出最好的建议就是懒加载，但是后端说这个接口是公共接口，不能轻易改动，卑微的小编只能默默的自己看看源码，看看能不能从中间得到一些启示

于是小编打开了node_modules下的elemen-ui/package/tree/src/node.js文件。其中这段代码引起了小编的注意

这段代码的意思就是将el-tree中的props循环一遍，我一想，那是不是tree上的props越少，在实例化Node的时候，性能开销就不会那么大了呢？不管那么多，小编先将el-select-tree中的props去掉，然后通过js重新规范了一下数据，将code和name拼接后直接赋值给组件，刷新浏览器之后，小编感觉性能已经有了很大的提升。但是小编只是停留在猜测上，有没有什么办法能直接对node_modules中的代码进行调试呢？于是小编开始了对npm包中的内容展开了探索

说到这，小编先对项目内的package.json文件做个简单的说明

{
  "name": "my-project", // 包名，唯一，在Vue项目入口文件的import Element from 'element-ui'就来自这
  "version": "1.5.0", // 版本
  "description": "Express server project using compression", // 描述
  "main": "src/index.js", // 入口文件，相当整个包的入口，我们后续使用npm link创建链接的时候，需要改动内容
  "scripts": { // 脚本文件，每次npm run <CMD> 就是在这里面
    "start": "node index.js",
    "dev": "nodemon",
    "lint": "eslint **/*.js"
  },
  "dependencies": { // 依赖，每次npm install <packageName> --save 就会记录在这个位置
    "express": "^4.16.4",
    "compression": "~1.7.4"
  },
  "devDependencies": { // 开发依赖，每次npm install <packageName> --save-dev 就会记录在这个位置
    "eslint": "^5.16.0",
    "nodemon": "^1.18.11"
  },
  "repository": { // 代码仓库
    "type": "git",
    "url": "https://github.com/osiolabs/example.git"
  },
  "author": "Jon Church", // 作者
  "contributors": [ 
    {
      "name": "Amber Matz",
      "email": "example@example.com",
      "url": "https://www.osiolabs.com/#team"
    }
  ],
  "keywords": [ // 关键字
    "server",
    "osiolabs",
    "express",
    "compression"
  ]
}

平时我们使用npm install <packageName>和 npm run <CMD>命令比较多。今天我们熟悉一下npm link命令。具体详情，可以参考 https://docs.npmjs.com/cli/v6/commands/npm-link/

在《前端架构师》一书中，已经介绍了npm link命令的使用场景和实例

为依赖项创建全局软链npm link。一个符号链接，简称软链，是一个快捷方式，指向系统上的其它目录或文件。

小编主要是从以下几个步骤进行调试

1、复制node_modules下element-ui文件夹到桌面

2、进入～/Desktop/element-ui目录下，执行npm link命令

3、回到项目中，进入项目根目录，执行npm link element-ui

这个时候，在～/Desktop/element-ui/package中打断点的时候，并不会有效果，查看了一下～/Desktop/element-ui/package.json文件中的main，指向的并不是～/Desktop/element-ui/package/index.js文件，这个时候，我们修改一下～/Desktop/element-ui/package.json中入口文件地址即可

4、这个时候我们可以debugger，或者console，都很方便，能让我们更深层次的理解源码和对第三方库的使用。

5、我们需要断开链接的时候，使用npm unlink即可

写在最后

小编在找资料的时候，还发现了https://github.com/niesk/el-virtual-tree。据说可以通过虚拟滚动的方式解决tree的性能问题；

还发现了可以通过element-ui源码，生成sourceMap的方式通过浏览器调试；

还发现了一个叫 patch-package 的包，据说可以紧急解决第三方库的缺陷问题

还有文中说的懒加载处理Tree数据，小编都将在后续的文章持续更新，希望大家持续关注，也可以推送给身边的小伙伴！