大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。
当前系列: ES进阶 修改讲义

引子

复习:随着项目代码量的增加,我们不断的进行组织整理:

表达式(expression) -----> 函数(function/method) -----> 类(class) --------> 程序集(Assmebly/Project)

JavaScript因为设计之初,就没有考虑过大规模(large-scale)的项目开发,所以在这方面先天不足。直到ES6推出模块(module)……


Module

将一个一个独立的.js文件视为module

在一个.js文件(注意:不是html文件)中可以引用其他的.js文件,形成.js文件中的相互引用

共分三步:

  1. export(student.js 模块决定对外“暴露”name)
    export let name = 'yf';
  2. import(site.js上引用student.js暴露的name)
    import { name } from './student.js';
  3. reference(Html 页面上引用site.js)
    <script type="module" src="~/js/site.js"></script>
    注意这个type="module",必须的!

特点:

  • 默认"use strict";
  • 实现了“封装”,除非export,否则外部无法获取,所以可以理解为:module中的变量都是局部作用域
    var score = 96;
    //等同于:
    //{
    //    let score = 96;
    //}
  • 一次加载,反复使用
  • 加载出来的内容只能读取(readonly),不能(也不建议)修改(复习:const:区分值/引用... )

    //sname += '帅呆了'; 报错


  • 动态取值:即通过该接口,可以取到模块内部“实时”的值

    if (Math.random() > 0.5) {
        sname = 'fg';
    } else {
        sname = 'yf';
    }



export

方式一:如上所示,声明的同时赋值,或者声明之后在module中赋值

方式二(推荐):在module中声明赋值,export时用花括号{}包裹变量名/类名等
export { Student};

class Student {
    hello() {
        console.log("源栈欢迎你");
    }
}

可以使用as进行重命名:

export { Student as s };



import

.js 可以是绝对/相对路径(复习),但不能不以js文件名直接开头

import { name } from 'sample.js';  //报错
另:是否可省略.js扩展名看运行时环境,浏览器环境不能省略

import一样可以用as重命名


通配符*

将所有被export的当做一个整体被取出来

import * as student from '/js/student.js';
//注意:1、没有{};2、as必不可少
整个模块作为一个整体被加载,所以


default

module可以用default暴露一个默认的成员

export default function () {
    console.log('default');
}
import s from '/js/student.js';  //注意:没有{}
s();

暴露的也可以是命名函数(但对外部无效

function hello() {
    console.log('default');
}
export default hello;  //没有{}

default只能使用一次:

//可以这样,暴露两个变量
export default { oh, cname };
//不可以这样
export default oh;
export default cname;

本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字


复合写法

import { age } from './student.js';
export { age };

可以简写为:

export { age } from './student.js';
//或者:
export * from './student.js';     /*    注意这里使用了"*"   */

但是,这种写法只能中转,无法在中转Module中引用被中转的成员

在 export * 的基础上,再export自己的成员,有时候被称之为:module的继承


import()

优势:动态(运行时)加载,如:

if ('源栈最棒哒') {
    import('./student.js').then((module) => {
        alert(module.age);
    });
}

but,等一等,什么then啊=>的什么鬼?

这是异步回调的写法,因为module的加载是异步的:

    <script type="module" src="js/site.js"></script>
    <script>
        console.log('after module load...');
    </script>

具体then()的用法,且听下回分解!

  



作业

  • 建立第一个module:score.js,里面有一个类score:
    1. 含参构造函数,能给当前实例的属性赋值:时间(datetime=当前时间),玩家Id(playerName)和成绩(score)
    2. 静态方法:getBest(playName),返回一个score对象
    3. 实例方法:save()
    以及:一个整数值bestOfAll
  • 建立又一个module:user.js,里面有:
    1. 三个属性:用户Id(Id)、昵称(name)、密码(password)
    2. 一个静态方法:getNameById(id),返回一个字符串
    3. 一个实例方法:login(name, password),返回一个整数值
  • score.js对外所有成员,但bestOfAll对外名称为record
  • user.js默认对外暴露login(),另外暴露getNameById(),隐藏其他属性
  • score.js中的getBest()利用user.js的getNameById(),将玩家名称转换成Id
  • 生成一个“打地鼠”(Mole)页面,在页面中:
    1. 引用上述module方法,调用其公开成员
    2. 使用图片替换的方式实现打地鼠功能(图片见群文件)
学习笔记
源栈学历
今天学习不努力,明天努力找工作

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 ES进阶 中继续学习:

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码