首页 > 编程语言 >Javascript(es2016) import和require用法和区别

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

时间:2023-02-06 17:03:44浏览次数:48  
标签:square lib default require Javascript js export es2016 import


写个简单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就可以实现动态加载。


[table]


|加载方式|规范|命令|特点|


|运行时加载|CommonJS/AMD| require |社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。|


|编译时加载|ESMAScript6+| import |语言规格层面支持模块功能。支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。|


[/table]


const incrementCounter = function ({dispatch,state}){
dispatch(‘INCREMENT‘)
}
export default {
incrementCounter
}
//require
let myAction = require(‘xxxxx‘);
myAction.default.incrementCounter()

标签:square,lib,default,require,Javascript,js,export,es2016,import
From: https://blog.51cto.com/u_15955464/6039826

相关文章

  • [JavaScript]eval
    eval()eval() 函数会将传入的字符串当做JavaScript代码进行执行。参数string一个表示JavaScript表达式、语句或一系列语句的字符串。表达式可以包含变量与已存......
  • [JavaScript]变量提升
    什么是变量提升?简单来说,就是JavaScript在执行程序时,会先把变量声明这一操作提前。换句话来说,就是不会在程序执行过程中声明变量。例子:functionfn(){console.log(nam......
  • org.springframework.web.bind.MissingServletRequestParameterException: Required r
    这个错可能是后端请求方式和对应的注解使用错误也有可能是你前端的请求路径enterpriseId这个写错后端 方法1.@RequestParam:required()defaulttrue;===>设置@Req......
  • 直播app开发搭建,纯javascript实现图片放大镜效果
    直播app开发搭建,纯javascript实现图片放大镜效果1、放大镜组成1)目标图片,一般是小图 2)鼠标移动上去的一个等比例小框框图 3)弹窗显示一个等比例的大图 2、实现分......
  • JavaScript实现拖动元素交换位置
     通过JavaScript实现拖动元素交换位置(如下图所示)实现方式HTML5提供了draggable属性,当它的值为true时,表示元素可拖动。在实现之前,首先我们需要明白两个单词的意思......
  • javascript之预编译
        Javascript按照<script>段的方式进行预编译处理相关的代码段,并且按照先预定义变量,再预定义函数的方式进行预编译!而且无论变量/函数在段中的任何地点进行显式......
  • javascript提交示例
    <td>@Html.ActionLink("编辑","Edit",new{id=1})<text>|</text>@Html.ActionLink("删除","Delete",new{id=2})<text>|</text><ahref="javascrip......
  • JavaScript中和动画相关的几个事件
    JavaScript中有以下几种与动画相关的事件:requestAnimationFrame这个事件可以在浏览器重绘之前触发,通常用于制作高性能动画。下面是一个使用requestAnimationFrame来制作简......
  • JavaScript 数组常用方法大全
    前言大家好,我是CoderBin,本次总结了JavaScript中关于数组的一些常用操作,想学习其他方法或者深入学习这些方法的可点击前往MDN-Array。希望对大家有所帮助,谢谢!如果文中有不......
  • JavaScript 基础知识(四)
    前面已经介绍HTML和CSS,这两个是网页结构和样式,而负责控制网页行为的是javascript。浏览器上直接可以解释执行,而独立运行就需要nodejs集成运行环境。01-JavaScript的基......