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


Posted in Javascript onAugust 11, 2017

本文介绍了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中定义的属性和方法进行引用,引用方法有两种,也就时import和require。

//方法一
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));
//方法儿
import * as lib from 'lib';
square = lib.square;

还可以设置默认的导出信息,就需要崽lib.js中定义 export default {}。default后面可以接一个参数,也可以接一个数组。书写方法为:

//------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

通常比较习惯用第一种。然后用import就可以得到这个数组或则参数。但是import只能用于静态导入,就是必须在文件开始的时候,在最上层就写好。而require就可以实现动态加载。

加载方式 规范 命令 特点
运行时加载 CommonJS/AMD require 社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。
编译时加载 ESMAScript6+ import 语言规格层面支持模块功能。支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。
const incrementCounter = function ({dispatch,state}){
 dispatch(‘INCREMENT‘)
}
export default {
 incrementCounter
}
//require
let myAction = require(‘xxxxx‘);
myAction.default.incrementCounter()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
vue项目实现分页效果
Mar 24 Vue.js
详解Node中导入模块require和import的区别
Aug 11 #Javascript
vue实现单选和多选功能
Aug 11 #Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 #Javascript
Angular模板表单校验方法详解
Aug 11 #Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 #Javascript
Vue 表单控件绑定的实现示例
Aug 11 #Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 #Javascript
You might like
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
js实现的在线调色板功能完整实例
2016/12/21 Javascript
jquery replace方法去空格
2017/05/08 jQuery
简单的网页广告特效实例
2017/08/19 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
工作说明书格式
2014/07/29 职场文书
2014年减负工作总结
2014/12/10 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
4种非常实用的python内置数据结构
2021/04/28 Python