Vue中导入自定义module的小坑

「爱情、让人受尽委屈。」 2022-12-11 07:58 192阅读 0赞

### 文章目录 ###

*  导读
 *  ES5的写法
 *  ES6的写法
 *  混用的危害

# 导读 #

**对于前端小白来说，ES5、ES6两套完全不一样的标准放在一起是很头疼的事。导入的时候同时使用两套不同的标准将会在`ESLint`存在的时候报错。**

# ES5的写法 #

// 定义neko.js并作为模块导出
    var Neko = (function () { 
      function Neko (name, age) { 
        this.name = name
        this.age = age
      }
      Neko.prototype.grow = function () { 
        this.age += 1
      }
      return Neko
    })()
    module.exports = { 
      neko: Neko
    }
    
    // 使用Neko模块
    import Neko from './neko'

可以看到，在定义这个`Neko`类的时候非常冗赘，而且多种多样的闭包让人眼花撩乱、不知所措。

如果你对前端更熟悉一点，你会发现，你定义了一个对象，这个对象是一个函数，而且定义即执行。构造函数是直接定义为同名函数，而成员函数则是通过原型`prototype`进行定义。

# ES6的写法 #

// 定义neko.js并作为模块导出
    class Neko { 
      constructor (name, age) { 
        this.name = name
        this.age = age
      }
      grow () { 
        this.age += 1
      }
    }
    export default Neko
    
    // 使用Neko.js模块
    const Neko = require('./neko.js')

在导入和导出的时候都出现了明显的不同。但是在不同之处又有些相同，这就在初学的时候容易弄混。

这个时候你会发现程序更加简介易懂了。即使`ES6`在运行的时候会被编译为`ES5`重新由编译器执行，但是以现在这样的形态，以`constructor`清晰标出构造函数、直接使用函数名清晰定义成员函数，这对于小白已经非常友好了。

# 混用的危害 #

虽然两者是相通的，但是为了整个程序的可读性，我们还是不建议混用。更何况，如果你加入了其他规范化代码的插件之后，你的程序风格将会被强制统一。

如果你使用了`ESLint`，你的语言将非常严格，于是在编辑的时候你只允许使用`ES5`、`ES6`的其中一种。

当你混用的时候：

const $ = require('jquery')
    
    ...
    
    module.exports = Neko

这个时候你的程序就会报错。你的程序在其他位置一点问题都没有，大量复杂的继承、闭包只会让你更加心烦意乱。所以，我们还是尽可能统一风格、统一标准。

而如果是你这么混用：

import $ from 'jquery'
    
    ...
    
    export default Neko

这回程序并不会报错，这也算是给新手小白一点点小小的回馈？但是无论如何，还是不建议混用`ES5`和`ES6`。这不管是对于一段时间后的自己还是下一届接手这个程序的人都是非常不友好的。