VUE 中require 与impor 之间的区别

女爷i 2023-10-10 10:43 23阅读 0赞

require 与import 之间的区别:

在es6 之前的语法是没有模块(module)这一说法,在之前编写前端代码只能通过不同引入*.js 文件来解决。

问题:

如下:html文件所示:。这样编写小前端项目不会发生什么问题,但是随着前端功能不断添加,会导致项目结构臃肿且不利于维护。

解决方法:在es6 发布后,引入require的概念之后又添加import 的概念。目的:实现功能代码的模块化管理,更有利于功能模块的组件化开发和维护。

require 与import 基本语法与特征:

require 基本语法:在导出的文件中定义module.export,导出的对象的类型不予限定(可以是任何类型,字符串,变量,对象,方法),在引入的文件中调用require()方法引入对象即可。

示例:

  1. //a.js中定义prin 数据功能函数
  2. module.export = {
  3. prin: function(){
  4. console.log(666)
  5. }
  6. }
  7. //b.js中调用a.js 文件中prin输出函数
  8. var obj = require('../a.js')
  9. obj.prin() //666

import 基础语法:导出的对象必须与模块中的值一一对应,换一种说法就是导出的对象与整个模块进行结构赋值

  1. //a.js中
  2. export default{ //(最常使用的方法,加入default关键字代表在import时可以使用任意变量名并且不需要花括号{})
  3. a: function(){
  4. console.log(666)
  5. }
  6. }
  7. //b.js中
  8. import a from '...' //import常用语法(需要export中带有default关键字)可以任意指定import的名称

两者之间的区别:

一、require 是赋值过程并且是运行时才执行, import 是解构过程并且是编译时执行。

发表评论

表情:
评论列表 (有 0 条评论,23人围观)

还没有评论,来说两句吧...

相关阅读