VUE 中require 与impor 之间的区别解析

熊孩纸 阅读:238 2021-03-31 16:52:54 评论:0

require 与import 之间的区别:

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

问题:

如下:html文件所示:<script type="text/javascript" src="/res/jquery/jquery.js?v=2020.1"></script>。这样编写小前端项目不会发生什么问题,但是随着前端功能不断添加,会导致项目结构臃肿且不利于维护。

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

require 与import 基本语法与特征:

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

示例:

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

 

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

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

两者之间的区别:

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

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们