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
相关推荐
-
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不是一种模块化编程语言,在es6以前,它是不支持"类"(class),所以也就没有"模块"(module)了. require时代 Javascript社区做了很多努力,在现
-
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
-
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>";
随机推荐
- AJAX实现无刷新检测用户名功能
- JSP实现远程文件下载保存到服务器指定目录中的方法
- Python自定义scrapy中间模块避免重复采集的方法
- Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
- 基于PHP实现短信验证码接口(容联运通讯)
- Android输入法弹出时覆盖输入框问题的解决方法
- 在新窗口打开超链接的方法小结
- ThinkPHP自动填充实现无限级分类的方法
- 如何提示用户打开Cookie?
- mysql优化取随机数据慢的方法
- MySQL中基本的用户和权限管理方法小结
- 利用javascript解决图片缩放及其优化的代码
- asp.net iis7默认文档错误异常的解决方法
- 关于网站如何赚钱方法之广告-写给新站长
- 服务器端C#实现的CSS解析器
- Android中Home键的监听和拦截示例
- PHP上传文件时文件过大$_FILES为空的解决方法
- Android数据加密之Des加密
- Android popupwindow简单使用方法介绍
- C# 字符串、数组和List的截取和转换实例