10.18上课记录

1、模块化的概念

// 必要性：
// JS发展初期，使用寥寥熟语数语实现简单的页面交互逻辑即可
// 随着大前端时代的到来，前端代码日益膨胀，此时在JS方面就会考虑使用模块化去管理

// 概念
// 把一个大的程序拆分成相互依赖的n个小文件
// 这些小文件还可以通过特定的语法组合到一起
// 这个过程称之为模块化

// 优点：
// 避免命名冲突（减少命名空间污染）
// 更好的分离，按需加载
// 更高复用性
// 高可维护性

// 缺点：
// 需要学习模块语法

2、模块化的规范

// 前端模块规范

// 😀AMD(Asynchronous Module Definition)：异步模块定义规范。
// 专门用于浏览器端，模块的加载是异步的。
// AMD主要通过require.js实现模块化，（通过define方法，将代码定义成模块通过require方法，实现代码的模块加载。）
// 了解即可

// 在require.js中，使用require提供的函数require（）来应用一个模块
requestAnimationFrame(['模块文件的路径(不带.js后缀)',function(){
    // 模块加载成功之后的回调函数
}])

// CMD(Common Module Definition):公共模块定义规范.
// CMD是另一种JS模块化方案,它与AMD很相似.
// 不同点在于:AMD推崇依赖前置,提前执行;CMD推崇依赖就近,延迟执行
// CMD主要通过sea.JS实现此规范
// 了解即可

// 使用define函数,传入的一般是一个函数,这个函数接受三个参数,分别是require,expoets,module.
define(function(require,exports,module){
    const a =require('a')//同步导入
    const b = require.async('b',function(b){
        console.log(b);
    })//异步导入
})

// commonJS
// Node.js是CommonJS的主要实践者,Node.js中内置CommonJS
// 接下来我们学习的模块化语法,就是Common.js

// 概述
// 每个文件就是一个模块,有自己的作用域.在一个文件里面定义的变量,函数,类,都是私有的,对其他文件不可见。
// 在服务器端，模块的加载是运行时同步加载的。在浏览器端，模块需要提前编译打包处理。

// 特点
// 所有的代码都运行在模块作用域，不会污染全局作用域
// 模块可以多次加载，但是只会在第一次加载是运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。
// 模块加载的顺序，按其在代码中出现的顺序。

// 【语法】
// 暴露模块
// module exports = value
// exports xxx = value
// // 引入模块
// require(xxx)
// 在第三方模块中，xxx为模块名，在自定义模块中，xxx为模块文件路径

// ESM(常用，JS官方语法，vue中使用)：ES6 Mudle
// ES6在语言标准的层面上，实现了模块功能，逐渐会成为浏览器和服务器通用的模块解决方案。

// 导出模块：export
// 引入模块：import

3、模块化的分类

// Node.js中的模块主要有3个分类：

// 自定义模块
// 自己写的模块
// NodeJS中，创建的JS文件都是自定义模块（万物皆模块）

// 内置模块（核心模块）
// 安装Node之后，自带了很多内置模块，我们可以直接加载使用它们

// 第三方模块
// 其他人编写的模块，发布到npm网站上，我们可以下载使用

功能测试：

index.js：

console.log('言轻莫劝人，人轻莫入众');

// 导入模块
// const 变量 = require('路径')
const order = require('./order')

console.log(order);

console.log(order.name);
console.log(order.age);
console.log(order.info);

order.eat('苹果蜂蜜和大鱼')

order.js

const name = '熊大'
const age = 9
const info = '保护森林，熊熊有责'

function eat(food) {
    console.log('吃' + food);
}
// 暴露模块
// module.exports = 暴露的数据（一般暴露一个对象）
module.exports = {
    // 暴露对象出去
    name,
    age,
    info,
    eat
}