/*P114-模块化-导出模块*/
//模块化是一个非常重要的编程思想，能够提高代码的复用性和封装性
//如果代码写在一个文件中很难阅读，体积也会变大
//模块化：
//1.就是把相似相关功能的代码放到一个单独文件中，
//2.然后通过模块来导出让其他文件来调用的代码
//3.其他文件通过导入来使用导出的代码
//4.从而能够提高代码的复用性和封装性
//导出模块，ES6原生支持模块化的加载
//新建一个名为‘utils.js’的js文件，里面放一些工具类的代码
//utils.js里面定义一个函数来格式化一个日期
//在function前面加上export关键字就可以完成导出
//输入代码如下：详情参考utils.js
/*
export function formatDate(date){
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
}
*/
/*P115-模块化-导入模块
//加入index.js调用utils.js,那么首先需要在引入index.js的HTML文件中做如下修改
//<script src="./index.js" type="module">,type="module"可以让index.js可以使用import关键字
//使用import关键字导入
//import {函数名} from '路径/文件名.js'//后面才知道P116里面的变量也可以导出！
import {formatDate} from './utils.js';
console.log(formatDate(new Date()));//2022-1-11//实际是2月11日，月份从0开始排的。
//？有必要学习这个路径问题.和/代表啥呢？//搜索？可以找到我留的疑问。
/** */
/*P116-模块化-导出多个条目*/
//如果模块中，导出不止一个条目，比如我还想导出一个常量，定义一年有多少天
//就可以再写一个export
/*增加一个导出并导入
//VH：一个变量也可以导出？！下方代码放到utils.js中即可
//export const DAYS_OF_YEAR = 365;//如果不加const提示应有声明或语句
//添加新的导入，1可以直接在import{}中添加，
//或者VScode支持直接使用这个导出的名称，import{}中自动添加，而且输入名称的时候，VScode已经有提示会补全
import {DAYS_OF_YEAR, formatDate} from './utils.js';
console.log(formatDate(new Date()));//2022-1-11//实际是2月11日，月份从0开始排的。
console.log(DAYS_OF_YEAR);//365
/** */
/*导出方式第二种，在模块底部
//export{名称1,名称2}，这个方式叫命名方式导出，回头调用的时候就是这个名字
//去掉原来定义函数和变量的时候开头的export关键字，
//复制到utils.js:
//export {formatDate, DAYS_OF_YEAR}
//调用结果继续有效
import {DAYS_OF_YEAR, formatDate} from './utils.js';
console.log(formatDate(new Date()));//2022-1-11//实际是2月11日，月份从0开始排的。
console.log(DAYS_OF_YEAR);//365
/** */
/*P117-模块化-默认导出*/
//除了上面export{名字,名字}，命名导出，
//还有用default关键字导出默认的条目
//注释原导出语句，复制下方语句到utils.js
//export default formatDate;
//调用时候，可以不用{}，直接使用原名或当下起名
//同时也可以用原方法，导出其他非默认的名字 export{名字,名字}，但不能
//调用方式也是import 默认, {名字}//注意逗号隔开默认名和{}
//VH：其实经过测试，3种导出方式是可以并存的。参考utils.js文件
/*调用默认导出
//使用原来的名字
import formatDate from './utils.js';
console.log(formatDate(new Date()));//2022-1-11
//使用当下新起的名字
import helloNewName from './utils.js';
console.log(helloNewName(new Date()));//2022-1-11
/** */
/*调用有默认导出情况下，export {DAYS_OF_YEAR}的常量
//VH：其实经过测试，3种导出方式是可以并存的。参考utils.js文件
import helloNewName, {DAYS_OF_YEAR} from './utils.js';
console.log(helloNewName(new Date()));//2022-1-11
console.log(DAYS_OF_YEAR);//365
/** */
/*P118-模块化-别名*/
/*课程例子部分
//使用默认导出方式的名字可以在调用时自定义，
//使用命名方式导出的也可以
//{名字 as 新名字}即可
import helloNewName, {DAYS_OF_YEAR as DAYS} from './utils.js';
console.log(helloNewName(new Date()));//2022-1-11
console.log(DAYS);//365
//导出多条目组成对象
//默认导出条目只能使用default来调用，经过测试（本节笔记在最后）
//VH:【暂定】其他只能使用在utils.js定义时候的名字
//上述两个例子，都可以正常得到结果，导入import会出现重复冲突么？
import * as utils from './utils.js';
console.log(utils.default(new Date()));
console.log(utils.DAYS_OF_YEAR);
/** */
/*测试部分导入冲突问题
//import导入是否因重复冲突测试
//只在导入进来之后的名字相同的时候。
//提示：Uncaught SyntaxError: Identifier 'DAYS_OF_YEAR' has already been declared
//测试是在utils.js中有默认导出的情况下进行，
//如果没有默认导出，结论应该类似，
//默认导出导入时重新起个名，正常导入的as一个新名即可
import helloNewName, {DAYS_OF_YEAR} from './utils.js';
console.log(helloNewName(new Date()));//2022-1-11
console.log(DAYS_OF_YEAR);//365
import helloNewName2, {DAYS_OF_YEAR as DAYS} from './utils.js';
console.log(helloNewName(new Date()));//2022-1-11
console.log(DAYS);//365
/** */
/*测试2*：使用utils.formatDate调用默认导出
//结果是不可以，只能使用default
import * as utils from './utils.js';
console.log(utils.formatDate(new Date()));//Uncaught TypeError: utils.formatDate is not a function
/** *///以下代码为utils.js内容
//配合《P114-118-模块化.js》使用
/*P114-模块化-导出模块*/
/*第一种导出方式*/
/**
*
* @param {Date} date
* @returns
*/
// export function formatDate(date){
// return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
// }
/*讲了2个知识点
在function前面加上export关键字就可以完成导出
注释的使用，可以在下面使用的时候，直接有代码提示
没使用注释掉时候，date.输入到这有提示date和formateDate
使用了这个注释，date.输入到这会有很多Date对象的方法就出来了。
*/
/*P116-模块化-导出多个条目*/
/*VH：一个变量也可以导出？！
export function formatDate(date){
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
}
export const DAYS_OF_YEAR = 365;//如果不加const提示应有声明或语句
/** */
/*可以第二种导出方式
function formatDate(date){
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
}
const DAYS_OF_YEAR = 365;
export {formatDate,DAYS_OF_YEAR};
/** */
/*P117-模块化-默认导出
function formatDate(date){
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
}
const DAYS_OF_YEAR = 365;
export default formatDate;
export {DAYS_OF_YEAR};
/** */
/*测试是否可以混用：可以的
//formatDate()采用底部导出
//常量采用定义时导出
function formatDate(date){
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
}
export const DAYS_OF_YEAR = 365;
export default formatDate;
/** */
/*P118-模块化-别名
function formatDate(date){
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
}
const DAYS_OF_YEAR = 365;
export default formatDate;
export {DAYS_OF_YEAR};
/** */
扫一扫 手机查看