Skip to content

day03

1. 先复习前天的内容

2. IPV4获取

3. 需求:⇒ 渲染新闻页面

jsx
// 需求:当DOM加载完毕,就请求新闻列表
fetch 或者axios  , 使用 async await处理数据

// DOM加载完毕 => 事件? 
// 响应后的数据  =>  const htmlArr = arr.map ==> htmlArr.join('') => innerHTML

ES6的模块化

ES6的模块化介绍及使用准备

最新的官方的模块化标准,客户端和服务端都可以使用,之后咱们基本上模块化的语法用的都是这个

传送门:mdn-import

传送门:mdn-export

概念:

  • ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了AMDCMDCommonJS 等模块化规范。
  • 这些由社区提出的模块化标准,还是存在一定的差异性与局限性--他不通用
    • AMDCMD 适用于浏览器端Javascript 模块化
    • CommonJS 适用于服务器端Javascript 模块化
  • 过多的模块化规范给开发者增加了学习的难度与开发的成本。------因此,官方的ES6 模块化规范诞生了!
  • 相信再不久的将来:前后端开发:都可以使用ES6的模块化,开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。

语法

  1. 每个 js 文件都是一个独立的模块

  2. 导入其它模块成员使用 import 关键字

  3. 向外共享模块成员使用 export 关键字

  4. Node.js使用准备

    1. package.json中的type属性改为module
    2. 安装的node版本大于等于13.0
    jsx
    {
      "name": "01.coding",
      "version": "1.0.0",
      "type": "module",
      "description": "",
      "main": "01.ES6的模块化.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }

ES6模块语法-默认的导出和导入

接下来咱们来学习ES6模块化中的默认导出和导入

传送门:ES6-module

语法:

  1. 导出: export default 默认导出的成员
  2. 导入: import 接收名称 from '模块'

参考代码:

  1. 导出
jsx
const food = '青椒土豆丝'
const dogs = ['哈士奇', '萨摩耶']
const stu = {
  name: '王磊',
  friend: '刘俊杰',
}

function sayHi(name = 'rose') {
  console.log(`${name}你好呀!`)
}

// 暴露一个出去
// export default food
// 都暴露出去
// export default 只能写一次
export default {
  food,
  dogs,
  stu,
  sayHi,
}
  1. 导入
jsx
// 默认导入时的接收名称可以任意名称,只要是合法的成员名称即可
import result from './xxx.js'
console.log(result)

Q1:

咱们学习了ES模块语法的默认导出和导入:

  • export default可以写几次?

    1. 一次
  • export default导出的模块外部如何导入?

    1. import 变量名 from '地址.js'
  • 使用ESM导入导出需要注意的点有哪些?

    1. package.json 中需要设置 "type":"module"
    2. .js 不能省略
    3. 路径不能使用模板字符串

ES6模块化语法 - 按需导出和导入

接下来咱们来学习如何按需的导出和导入

语法

导出

  1. export const s1 = 10
  2. 或者export {变量1,变量2,方法....}
  3. 可以和export default一起使用

导入:

  1. import { 按需导入的名称 } from '模块标识符'
  2. 使用as起别名:
    1. import { 按需导出的名称 as 别名 } from './modules/02.按需导出.js'
jsx
// 导入
import { food } from './modules/02.按需导出.js'
console.log('food:', food)
// 导入 + 起别名
import { food as fd } from './modules/02.按需导出.js'
console.log('fd:', fd)

// 导入export default的内容
import result from './modules/02.按需导出.js'
console.log('result:', result)

// 默认导入可以和 按需导入一起使用
import result, { food } from './modules/02.按需导出.js'

Q2:

  • 按需导出可以和默认导出一起使用吗?

    可以

  • 按需导出只能写一个,还是可以写多个

    1. n个
  • 按需导入起别名用什么关键字?

    1. as
  • 按需导出和默认导出的取舍? 什么时候使用?

    1. 需求
    2. 只需要导出一个内容,可以默认
    3. 有多个:按需

ES6模块化语法 - 全部导入

如果想要一次性导入所有的内容,还有一种语法哦,这个语法用的不多,了解即可

语法:

  1. as 是固定语法
  2. myModule是起的名字,可以根据需求调整
  3. 之后通过myModule点出需要的内容即可
jsx
import * as myModule from '/modules/my-module.js';

ES6模块化语法 - 直接导入

有时候我们只希望执行某个模块中的代码,并不需要得到模块中向外共享的成员,可以选择直接导入

语法

  1. import '模块的路径'

    1. 模块的代码
    tsx
    // 文件名 xxx.js
    for (let i = 0; i < 10; i++) {
      console.log(i)
    }
  2. 导入的语法

    tsx
       import 'xxx.js'
       // 即可看到循环输出的内容

    这个语法并不能获取模块内的成员import '模块的路径',作用是 ⇒ 执行 模块的代码

    ES6模块化语法 - 浏览器端使用

    到目前为止测试的环境基本都是Node.js,但是作为前端开发者,咱们编写的代码大部分情况下运行的为止是浏览器,刚刚学习的ES6的模块化语法,在浏览器中可以使用吗?

    传送门:MDN-import

    语法:

    1. script标签设置type=module
    2. 内部写ES6import语法即可
    3. 必须要通过服务器的方式 运行页面,直接通过浏览器打开(报错)
      1. serve全局模块
      2. vscodelive serve 插件
    tsx
    <script type="module">
      // 默认导入
      import myTool from './modules/myModule.js'
      // 上面学习的所有语法都可以使用哦
    </script>

    兼容性

    "import" | Can I use... Support tables for HTML5, CSS3, etc

    Untitled

    • 新式浏览器中是否可以直接使用ES6的模块化语法?
      1. 可以
      2. type=module
      3. 服务器的方式

    补充 - yarn包管理器

    最后补充一个也蛮流行的包管理工具

    传送门:yarn

    传送门:yarn全局安装配置

    概念:

    1. npm:官方的管理工具
    2. yarn:第三方的包管理工具--facebook
    3. 比如:
      1. appstore和第三方商店

    快速、可靠、安全的依赖管理工具。和 npm 类似, 都是包管理工具, 可以用于下载包

    bash
    npm i dayjs

    下载地址: https://yarn.bootcss.com/docs/install/#windows-stable

    windows本

    bash
    npm i yarn -g

    mac本通过命令全局安装

    sudo npm i yarn -g

    基本命令:

    bash
    1. 初始化
      yarn init  /  yarn init -y
    
    2. 添加依赖
      yarn add [package]
      yarn add [package]@[version]
    
    3. 移除包
      yarn remove [package]
    
    4. 安装项目全部依赖
      yarn 或者 yarn install
    
    5. 全局
      安装: yarn global add [package]
      卸载: yarn global remove [package]