ES6 export 和 export default的区别

时间: 2019-01-02阅读: 380标签: 模块

ES6中 export 和 export default 与 import使用的区别,使用 react native 代码详解


1、export 定义导出一个子组件 Greeting

import React, { Component } from "react";
import { View, Text } from "react-native";
export class Greeting extends Component {
    render() {
        return(
            <View>
                <Text>{this.props.name}</Text>
            <View>
        )
    }
}


2、在父组件中导入子组件

import React, { Component } from "react";
import { View, Text } from "react-native";

// greeting文件存储在src目录下
import { Greeting } from "./src/greeting";

import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(greeting.js)对外接口的名称Greeting相同。
如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名

import { bieming as Greeting } from "./src/greeting";


3、export default 
场景:从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名,否则无法加载。但是用户肯定不愿意去阅读子组件看看导出名称叫啥,然后回来导入,所以就有了 export default。

import React, { Component } from "react";
import { View, Text } from "react-native";
export default class Greeting extends Component {
    render() {
        return(
            <View>
                <Text>{this.props.name}</Text>
            <View>
        )
    }
}


4、import 导入模块

import React, { Component } from "react";
import { View, Text } from "react-native";

// greeting文件存储在src目录下
import Greeting from "./src/greeting";
// 或者
import AnyName from "./src/greeting";

上面代码的import命令,可以用任意名称指向greeting.js输出的方法,这时就不需要知道原模块输出的变量名。需要注意的是,这时import命令后面,不使用大括号。


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

CSS Module

在软件工程里面模块指的是可组合、分解和更换的单元。下面是一张css树,项目里面总的css文件是由一系列小的单元组成,比如下面的reset.css就是一个单元。模块化的概念不光在css里面

module.exports与exports与require

Node.js分为原生模块 第三方模块 自定义模块,原生模块:不需要加载也不需要指定地址也不用npm下载 常见的有:第三方模块:npm下载到node_moules,不需要指定地址,自定义模块:用require引用,需要指定地址

import和export的用法

import和export语句表示什么意思?有什么区别呢?ES6模块功能主要有两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

Node.js模块系统 (创建模块与加载模块)

Node.js模块系统:为了让Node.js的文件相互调用,Node.js提供了一个简单的模块系统,Node.js应用程序的组成就是由模块组成基本部分,文件和模块是一一对应的。

arcgis在webpack中的使用

因为dojo本身带有模块加载的功能,会与webpack本身有冲突,所以需要借助esriLoder。esri-loader暴露了loadCss和loadModules两个方法,分别用来加载css和js文件。

node.js ES模块

例如在 ECMAScript 5 中引入的许多程序员首选的严格模式曾经是可选的,必须明确启用才行,同时它在 ES 模块中始终处于活动状态。因此,以下代码段在语法上可以解释为传统的 JavaScript 代码和 ES 模块

计算一个页面内每个模块的曝光时间(停留时间)

产品希望看到投放出去的活动页,用户对其页面内的什么信息比较感兴趣,对什么信息完全不感兴趣。=> 计算页面内每模块的停留时间

Vue 中如何正确引入第三方模块

配置 webpack ProvidePlugin 全局引入,假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入;另外一种比较靠谱的方法是将第三方模块打包成插件,如我需要全局使用 echarts,那么在 src 目录下新建一个 lib

最全的前端模块化方案

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容:CommonJS、AMD 及 核心原理实现、CMD 及 核心原理实现

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

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

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全