`
iaiai
  • 浏览: 2203521 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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(es2016) import和require用法和区别详解

    在ES2016中,主要使用import和require两种方式来实现模块的导入和导出,这两者之间有一些重要的用法和区别。 首先,我们需要了解export和import的基本用法。在ES2016中,export可以将一个变量、函数、类或对象导出...

    详解vue-cli+es6引入es5写的js(两种方法)

    在开始介绍具体方法之前,先简要回顾一下Vue-cli和ES6的基础知识,以及为何需要引入第三方ES5的JavaScript库。 Vue-cli是一个基于Vue.js进行快速开发的完整系统,它提供了一个官方的脚手架工具,帮助开发者快速搭建...

    JavaScript_下一代ES模块绑定器.zip

    JavaScript是Web开发中的核心语言,尤其在前端领域占据着举足轻重的地位。随着技术的不断演进,JavaScript的语法和特性也在...掌握ES模块和Rollup的使用,对于提升JavaScript项目的开发效率和代码质量具有重要意义。

    详解webpack import()动态加载模块踩坑

    `import()` 与 ES6 的 `import` 和 CommonJS 的 `require` 语法兼容,可以方便地进行迁移。 然而,在实际使用过程中,我们可能会遇到一些陷阱。比如在构建动态路由时,我们可能希望根据用户操作来决定加载哪个页面...

    javaScript从入门到精通

    - React/Vue/Angular:了解三大前端框架的基本原理和使用方法。 9. **JavaScript性能优化** - 避免全局查找:减少对window对象的引用,提高执行效率。 - 使用let/const代替var:避免变量提升和作用域污染。 - ...

    JavaScript入门到精通课程PPT

    - **ES模块**:学习ES6引入的import和export语法,实现模块的导入与导出。 8. **错误处理** - **异常捕获**:讲解try...catch结构,以及如何处理运行时错误。 - **错误对象**:了解Error对象及其子类,以及如何...

    javascript使用手册

    - ES模块:使用`import`和`export`关键字,浏览器原生支持,需转换工具在旧环境下运行。 9. **错误处理** - try/catch:用于捕获并处理运行时错误,`try`块内执行可能出错的代码,`catch`块处理异常。 - throw:...

    commonjs-to-es-module-codemod:Codemod将CommonJS(requireexports)转换为JavaScriptTypeScript的ES Modules(importexport)

    jscodeshift codemod将CommonJS(require / exports)转换为ES Modules(import / export)用于JavaScript / TypeScript 支持 出口产品 命名为export: module.exports.foo = foo以export { foo } 命名为export:...

    javascript包

    在Node.js环境中,`require`和`module.exports`是常用的模块导入和导出机制,但随着ES模块的普及,它们逐渐被`import/export`取代。 JavaScript包通常通过npm进行分发和管理。当你创建一个项目时,可以在`package....

    rona:require非常快速地将项目中的一个文件或多个文件中的require语法转换为ES6导入语法

    罗纳 convert require syntax to ES6 import syntax支持的转换const something = require ( "example" ) ; // => import something from "example";const Ben = require ( "person" ) . name ; // => import { name ...

    6.如何用npm发布JavaScript包1

    JavaScript模块化的发展历程和解决方案 JavaScript作为一种动态类型的面向对象语言,早期并没有内置的模块系统。直到2015年,随着ECMAScript 6(ES6)的发布,JavaScript引入了类和模块机制,以解决代码组织和重用...

    JavaScript文档

    2. ES6模块:使用import和export关键字进行模块导入和导出,静态导入和导出,更适合静态分析和优化。 九、框架与库 JavaScript生态中有众多优秀的框架和库,如React、Vue、Angular用于构建前端应用,jQuery简化DOM...

    JavaScript权威指南.rar

    JavaScript,作为全球最广泛使用的编程语言之一,是创建交互式网页和动态应用的关键工具。《JavaScript权威指南》这本书是深入理解和掌握这门语言的重要资源。它涵盖了从基础语法到高级特性的全面内容,适合初学者和...

    JavaScript 语言用法指南,语法详细介绍,中文版的哦

    本文将深入探讨JavaScript的基础语法和用法,帮助你全面掌握这门语言。 一、基础语法 1. 变量声明:在JavaScript中,我们可以使用`var`、`let`或`const`来声明变量。`var`是ES5及以前的声明方式,具有变量提升和...

    零基础学JavaScript

    1. CommonJS与AMD:在Node.js环境中,常用CommonJS模块系统,使用require和module.exports。在浏览器环境,AMD(异步模块定义)如RequireJS用于模块加载。 2. ES6模块:ES6引入了import和export关键字,提供原生的...

    javascript高级编程(第2版)pdf.part2

    - **ES Modules (ESM)**:ECMAScript 2015引入的标准模块系统,使用`import`和`export`进行模块的导入导出。 - 动态导入:使用`import()`表达式动态加载模块。 - **比较CommonJS与ES Modules**: - 兼容性:ES ...

    javascript工作流

    总结来说,JavaScript工作流涵盖了异步编程、模块化、任务自动化、状态管理、测试、构建和部署等多个方面,这些工具和方法的合理使用能够极大提升JavaScript开发效率和项目质量。通过不断学习和实践,开发者可以构建...

    javaScript参考手册

    2. ES模块:ECMAScript标准的模块系统,使用import和export关键字。 八、错误处理 1. try...catch:用于捕获和处理运行时错误,避免程序意外终止。 九、最新特性 1.箭头函数:简洁的函数定义方式。 2.解构赋值:...

    JavaScript语言参考手册

    总的来说,"JavaScript语言参考手册"会涵盖以上所有内容,并可能深入探讨更多高级主题,如正则表达式、模板字符串、类和继承、生成器、迭代器、Proxy和Reflect,以及最新的ES规范特性。这本手册对于学习和掌握...

Global site tag (gtag.js) - Google Analytics