JavaScript中import用法总结

import是用于将某个模块中导出的函数或对象、初始值导入到另一个模块中的语法。

如下所示

import {模块名称} from "需要导入模块的路径名"

如何使用import？

该模块有default模块和named（命名）模块。

我们首先加载default export的模块和named export的模块

import {ModuleA, ModuleB} from "modules"; 

import Default from 'modules2';

在第一行中，我们从modules这个文件导入名为Module A和Module B的这两个named模块。

在第二行中，我们从modules 2这个文件中导入default模块。

执行模块export

要将函数，对象，原始值导出为模块，需要使用export。

我们来看具体示例

将其导出为默认模块

// alert.js

export default function () {

  alert("default module called!");

};

命名导出

// utils.js

export function sum(x, y, z) {

  return x+y+z;

}

export function multiply(x, y) {

  return x*y;

}

我们能够导出名为sum和multiply的模块。

可以通过如下调用来使用该函数

import { sum, multiply } from 'utils'; 

console.log(sum(1, 2, 3));

console.log(multiply(5, 8));

执行结果如下

->6

->40
赞 (0)

相关推荐

  • Javascript(es2016) import和require用法和区别详解

    本文介绍了Javascript(es2016) import和require用法和区别详解,分享给大家,具体如下: 写个简单js文件,假设名字为:lib.js . 假设内容如下: export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } 这样就可以在其他地方对lib中定义的

  • JavaScript中使用import 和require打包后实现原理分析

    前言: 之前使用ES6写代码,webpack打包后上线,一点问题没有,也看过打包后的代码,长的很乱,也没敢看看咋回事,加载后就是能运行! 今天通过个例子理解一下打包前,和打包后的代码! 1.创建文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个 index.html 文件).接下来我们再创建三个文件: index.ht

  • JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且

  • 一文让你彻底搞清楚javascript中的require、import与export

    一文让你彻底搞清楚javascript中的require、import与export

    前言 本文主要给大家介绍了关于javascript中require.import与export的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持"类"(class),所以也就没有"模块"(module)了. require时代 Javascript社区做了很多努力,在现

  • import与export在node.js中的使用详解

    import与export在node.js中的使用详解

    简述 import与export是es6中模块化的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的模块化代码.(关于node.js模块,可参考其他node.js模块化的文章) export 曝露 使用export可以曝露出方法.对象.字符串等等,如下代码 //写法1 export var foo=function(){ console.log(1); } //写法2 var bar ={a:"1",b:2}; export {bar}; //

  • JavaScript中import用法总结

    import是用于将某个模块中导出的函数或对象.初始值导入到另一个模块中的语法. 如下所示 import {模块名称} from "需要导入模块的路径名" 如何使用import? 该模块有default模块和named(命名)模块. 我们首先加载default export的模块和named export的模块 import {ModuleA, ModuleB} from "modules"; import Default from 'modules2'; 在第一行

  • javascript中attachEvent用法实例分析

    本文实例讲述了javascript中attachEvent用法.分享给大家供大家参考.具体分析如下: 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.onclick=method1 obj.onclick=method2 obj.onclick=method3 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,

  • javascript中this用法实例详解

    本文实例讲述了javascript中this用法.分享给大家供大家参考,具体如下: JavaScript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式.函数有以下几种调用方式:作为对象方法调用.作为函数调用.作为构造函数调用.apply或call调用. 对象方法调用 作为对象方法调用的时候,this会被绑定到该对象. var point = { x : 0, y : 0, moveTo : function(x, y) { this.x = this

  • Javascript中Array用法实例分析

    本文实例讲述了Javascript中Array用法.分享给大家供大家参考.具体分析如下: JavaScript中的Array对象就是数组,首先是一个动态数组,而且是一个像C#.Java中"数组.List.HashMap/Dictionary"等的超强综合体. Array数组 使用方式: 例1: var citys = new Array(); //创建数组对象,无需初始化长度,动态 citys[0] = '上海'; citys[1] ='北京'; citys[2] = '深圳'; fo

  • 5分钟理解JavaScript中this用法分享

    前言关于JavaScript中this的用法网络中已经有较多比较详尽的介绍,可以参考本文的参考学习资料和网络.本文结合网络收集整理,尝试以一种简易的方式阐述JavaScript中this的用法,希望对大家关于JavaScript中this用法的快速理解有所帮助.正文1. this用法实例 复制代码 代码如下: window.color = "red"; var o = { color: "blue" }; function sayColor(){     alert

  • JavaScript中return用法示例

    本文实例讲述了JavaScript中return用法.分享给大家供大家参考,具体如下: return可以接受函数中的返回值,前提是函数中要有return语句. 下面是一个应用小示例: <html> <head> <script type='text/javascript'> function linkPage(){ alert('You Clicked??'); return false; } </script> </head> <body

  • javascript中递归函数用法注意点

    不做详细文字说明了,直接写代码,很明了. <script> function sum(num){ if(num<=1){ return 1; }else{ return num*sum(num-1); //return num*arguments.callee(num-1); //指针 //return 2; } } var sum1=sum; alert(sum1(2)); </script> 上面的代码 在执行时很容易出现问题,执行我们介绍一个方法,arguments.c

  • javascript中AJAX用法实例分析

    本文实例讲述了javascript中AJAX用法.分享给大家供大家参考.具体分析如下: 兼容地获得XMLHttpRequest对象: var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = window.XMLHttpRequest; }else if(window.ActiveXObject){ //IE浏览器 try{ //高版本,受msxml3.dll+支持 xhr = new ActiveXObject("Msxml2.XMLH

  • Javascript中arguments用法实例分析

    本文实例讲述了Javascript中arguments用法.分享给大家供大家参考.具体分析如下: 先来看如下示例: function add(n1,n2){ return n1+n2; } function add(n1,n2,n3) { return n1+n2+n3; } alert(add(1,2)); //NaN,js中调用方法采用就近原则: //而由于该方法没有传入n3,所以结果是NaN js中没有方法重载,怎么解决上面这个问题? //arguments function f1(){

  • Javascript中innerHTML用法实例分析

    本文实例讲述了Javascript中innerHTML用法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var cont = document.getElementById('container');  var htmlcode = "<p>哈哈哈哈</p>";  

随机推荐