区块链技术博客
www.b2bchain.cn

六、8.1 ES6 Modules求职学习资料

本文介绍了六、8.1 ES6 Modules求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

Create React App 是一个用于学习 React 的集成环境。与此同时,他也是一个学习 ES6 Modules 的舒适环境。因此为了降低学习成本,我们直接使用该环境来学习 ES6 Moduels 语法。

1. 创建项目

npx create-react-app my-app --template typescript cd my-app npm start

项目启动需要花费一点时间,启动之后,通常浏览器会自动打开一个新的页面运行项目,我们也可以在浏览器中输入 http://localhost:3000 来运行项目。

2. 认识项目

package.json 与 yarn.lock

这两个文件是构建工具需要的配置信息与项目依赖包信息。目前暂时不用过多的考虑他们的用处,等之后大家在深入学习构建工具时自然会明白他们的作用。

node_modules

项目依赖包的安装目录。当我们创建项目时,会根据配置文件 package.json 中的依赖包信息把所有需要的插件工具模块等都安装在该目录下。

public

用于存放静态文件。主要作用是 html 入口文件的存放。我们也可以存放其他公用的静态资源,如图片,css 文件等。其中的 index.html 就是我们项目的入口 html 文件。

src

模块与组件的存放目录。在 create-react-app 创建的项目中,每一个单独的文件都可以被看成一个单独的模块,单独的 image,单独的 css,单独 js 等,而所有的组件都存放于 src 目录中,其中 index.tsx 则是 js 的入口文件。虽然我们并没有在 index.html 中使用 script 标签引入它,但是他的作用就和此一样。

项目地址:点这里

typescript 可以通过阅读最后的附录章节学习

如果你要直接使用我的项目,则需要先使用 npm run install 重新安装依赖才能正常使用

项目中的 src/index.tsx 是项目的入口文件,其他的代码我们先不关注,在 src 目录下创建一个新的模块用于学习。

3. 创建模块

一个 js/ts 文件就是一个单独的模块。模块创建的目的,就是让其他模块能够使用该模块的功能。因此,除了主模块,其他的模块都需要抛出接口,以决定该模块中那些能够可以被其他模块使用。

通过 export 关键字可以对外抛出接口。

export const name1 = 'TOM'

export 可以多次使用,抛出多个接口。

// module01.js export const name1 = 'TOM' export const name2 = 'Jake'

当我们在其他模块引入该模块的接口时,如果只需要其中一个接口

import {name1} from './module01'

但是如果我们需要引入该模块中所有的对外接口,一种方式是在大括号中将所有的名称都列出来,另外一种方式就是使用通配符与 as 配合。

import { name1, name2 } from './module01';  // or 利用别名的方式 import * as module01 from './module01'; // 那么就有 name1 = module01.name1 name2 = module01.name2

我们还可以通过 export default 来对外提供接口,这种情况下,对外的接口通常都是一个对象。

“`js
// 修改module01.js
const name1 = ‘TOM’;
const name2 = ‘Jake’;

// ES6对象的简写语法
export default {
name1,

Create React App 是一个用于学习 React 的集成环境。与此同时,他也是一个学习 ES6 Modules 的舒适环境。因此为了降低学习成本,我们直接使用该环境来学习 ES6 Moduels 语法。

1. 创建项目

npx create-react-app my-app --template typescript cd my-app npm start

项目启动需要花费一点时间,启动之后,通常浏览器会自动打开一个新的页面运行项目,我们也可以在浏览器中输入 http://localhost:3000 来运行项目。

2. 认识项目

package.json 与 yarn.lock

这两个文件是构建工具需要的配置信息与项目依赖包信息。目前暂时不用过多的考虑他们的用处,等之后大家在深入学习构建工具时自然会明白他们的作用。

node_modules

项目依赖包的安装目录。当我们创建项目时,会根据配置文件 package.json 中的依赖包信息把所有需要的插件工具模块等都安装在该目录下。

public

用于存放静态文件。主要作用是 html 入口文件的存放。我们也可以存放其他公用的静态资源,如图片,css 文件等。其中的 index.html 就是我们项目的入口 html 文件。

src

模块与组件的存放目录。在 create-react-app 创建的项目中,每一个单独的文件都可以被看成一个单独的模块,单独的 image,单独的 css,单独 js 等,而所有的组件都存放于 src 目录中,其中 index.tsx 则是 js 的入口文件。虽然我们并没有在 index.html 中使用 script 标签引入它,但是他的作用就和此一样。

项目地址:点这里

typescript 可以通过阅读最后的附录章节学习

如果你要直接使用我的项目,则需要先使用 npm run install 重新安装依赖才能正常使用

项目中的 src/index.tsx 是项目的入口文件,其他的代码我们先不关注,在 src 目录下创建一个新的模块用于学习。

3. 创建模块

一个 js/ts 文件就是一个单独的模块。模块创建的目的,就是让其他模块能够使用该模块的功能。因此,除了主模块,其他的模块都需要抛出接口,以决定该模块中那些能够可以被其他模块使用。

通过 export 关键字可以对外抛出接口。

export const name1 = 'TOM'

export 可以多次使用,抛出多个接口。

// module01.js export const name1 = 'TOM' export const name2 = 'Jake'

当我们在其他模块引入该模块的接口时,如果只需要其中一个接口

import {name1} from './module01'

但是如果我们需要引入该模块中所有的对外接口,一种方式是在大括号中将所有的名称都列出来,另外一种方式就是使用通配符与 as 配合。

import { name1, name2 } from './module01';  // or 利用别名的方式 import * as module01 from './module01'; // 那么就有 name1 = module01.name1 name2 = module01.name2

我们还可以通过 export default 来对外提供接口,这种情况下,对外的接口通常都是一个对象。

“`js
// 修改module01.js
const name1 = ‘TOM’;
const name2 = ‘Jake’;

// ES6对象的简写语法
export default {
name1,

Create React App 是一个用于学习 React 的集成环境。与此同时,他也是一个学习 ES6 Modules 的舒适环境。因此为了降低学习成本,我们直接使用该环境来学习 ES6 Moduels 语法。

1. 创建项目

npx create-react-app my-app --template typescript cd my-app npm start

项目启动需要花费一点时间,启动之后,通常浏览器会自动打开一个新的页面运行项目,我们也可以在浏览器中输入 http://localhost:3000 来运行项目。

2. 认识项目

package.json 与 yarn.lock

这两个文件是构建工具需要的配置信息与项目依赖包信息。目前暂时不用过多的考虑他们的用处,等之后大家在深入学习构建工具时自然会明白他们的作用。

node_modules

项目依赖包的安装目录。当我们创建项目时,会根据配置文件 package.json 中的依赖包信息把所有需要的插件工具模块等都安装在该目录下。

public

用于存放静态文件。主要作用是 html 入口文件的存放。我们也可以存放其他公用的静态资源,如图片,css 文件等。其中的 index.html 就是我们项目的入口 html 文件。

src

模块与组件的存放目录。在 create-react-app 创建的项目中,每一个单独的文件都可以被看成一个单独的模块,单独的 image,单独的 css,单独 js 等,而所有的组件都存放于 src 目录中,其中 index.tsx 则是 js 的入口文件。虽然我们并没有在 index.html 中使用 script 标签引入它,但是他的作用就和此一样。

项目地址:点这里

typescript 可以通过阅读最后的附录章节学习

如果你要直接使用我的项目,则需要先使用 npm run install 重新安装依赖才能正常使用

项目中的 src/index.tsx 是项目的入口文件,其他的代码我们先不关注,在 src 目录下创建一个新的模块用于学习。

3. 创建模块

一个 js/ts 文件就是一个单独的模块。模块创建的目的,就是让其他模块能够使用该模块的功能。因此,除了主模块,其他的模块都需要抛出接口,以决定该模块中那些能够可以被其他模块使用。

通过 export 关键字可以对外抛出接口。

export const name1 = 'TOM'

export 可以多次使用,抛出多个接口。

// module01.js export const name1 = 'TOM' export const name2 = 'Jake'

当我们在其他模块引入该模块的接口时,如果只需要其中一个接口

import {name1} from './module01'

但是如果我们需要引入该模块中所有的对外接口,一种方式是在大括号中将所有的名称都列出来,另外一种方式就是使用通配符与 as 配合。

import { name1, name2 } from './module01';  // or 利用别名的方式 import * as module01 from './module01'; // 那么就有 name1 = module01.name1 name2 = module01.name2

我们还可以通过 export default 来对外提供接口,这种情况下,对外的接口通常都是一个对象。

“`js
// 修改module01.js
const name1 = ‘TOM’;
const name2 = ‘Jake’;

// ES6对象的简写语法
export default {
name1,

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 六、8.1 ES6 Modules求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们