export和export default的区别

更新日期: 2019-02-28阅读量: 2278标签: 模块

es6中export和export default的区别

  • export与export default均可用于导出常量、函数、文件、模块;
  • 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用;
  • 在一个文件或模块中,export、import可以有多个,export default仅有一个;
  • 通过export方式导出,在导入时要加{ },export default则不需要;
  • 其实很多时候export与export default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出,在导入时要加{ },export default则不需要。使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。


react中使用export导出类可以有两种方法

1. export default classname

这种导出方式与export default class classname extends React.class相同

在其他文件中引用时采取如下方式

import classname form path

例如:

Com.js

class Welcome extends React.Component{
    render(){
        return <h1> hello,{this.props.name}</h1>
    }
}
 
function App(){
    return (
        <div>
            <Welcome name="Sara"/>
            <Welcome nmae="Peng"/>
        </div>
    );
}
 
export  default App;

index.js

import App  from './components/Com';
const element=<App/>;
Reactdom.render(element, document.getElementById('root'));


2. export {classname1,classname2}

在其他文件中引用时采用如下方式

import {classname1,classname2} from path

import {classname1} //注意引用一个类时也要加上{}

例如:

class Welcome extends React.Component{
    render(){
        return <h1> hello,{this.props.name}</h1>
    }
}

function App(){
    return (
        <div>
            <Welcome name="Sara"/>
            <Welcome nmae="Peng"/>
        </div>
    );
}
export  {Welcome,App};

index.js

import {App}  from './components/Com';
 
const element=<App/>;
ReactDOM.render(element, document.getElementById('root'));

 

作者:ZhaoYingChao88 
原文:https://blog.csdn.net/ZYC8888...



链接: https://www.fly63.com/article/detial/2153

Javascript模块的写法-AMD, CMD, CommonJS和UMD

Javascript模块的写法-AMD, CMD, CommonJS和UMD。JavaScript中出现了一些非传统模块开发方式的规范 CommonJS的模块规范,AMD,CMD等。

ES6模块功能:export和import的加载方式

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。

Node的https模块_创建HTTPS服务器

Node的https模块:HTTPS服务器使用HTTPS协议,需要证书授权,SSL安全加密后传输,使用443端口

如何让 node 运行 es6 模块文件,及其原理

最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目

module、export、require、import的使用

module每个文件就是一个模块。文件内定义的变量、函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见。在module中有一个属性exports,即:module.exports。它是该模块对外的输出值,是一个对象。

Node.js - 模块系统

模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的。换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。Node.js 提供了 exports 和 require 两个对象

ES模块基础用法及常见使用问题

ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用。本文会简单介绍一下ES模块的优点、基本用法以及常见问题。

ES6 export 和 export default的区别

ES6中 export 和 export default 与 import使用的区别,使用 react native 代码详解,现在流行的前端框架,angular+ 主要使用 export 导出模块,react native 中使用 export default 导出模块,如今编辑器非常强大,安装插件会自动弹出模块名称,知道其导出怎么使用就可以了

关于export和export default你不知道的事

网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。大家应该应该能理解import * from xxx会把文件中export default的内容都打包到文件中,而import {func} from xxx只会把文件中的func导入

JS模块化_CommonJS AMD CMD UMD ES6 Module 比较

模块化开发优点:模块化开发中,通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数,并且可以按需加载。依赖自动加载,按需加载。提高代码复用率,方便进行代码的管理,使得代码管理更加清晰、规范。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!