模块化
含义
根据功能把代码划分为多个js文件(一个js文件就是一个模块)
使用模块化的作用
1、最大的好处是大大提高了代码的可维护性。
2、使用模块还可以避免函数名和变量名冲突。
模块化的规范
定义
1、一个js文件就是一个模块,模块的作用域是私有的,内部定义的变量或者函数,只在当前的文件(模块)可以使用。
2、别人想要使用这些模块,就需要使用模块化的规范来进行按需导出导入
模块定义规范 (这里主要讲两种规范)
1、CommonJS 的 Modules 规范: NodeJs
2、ES6推出的官方模块化方案
模块规范的使用
1.CommonJS规范的使用
需要使用exports.default或exports导出你想要暴露的对象或者方法,在需要的地方使用 require导入
导出数据方式一:exports.defualt = 属性
例子:module.exports = { num , sum , Animal };
导出数据方式二:exports.属性
例子: exports.num = num;
导入数据方式:require
例子:const m1 = require("./modules/m1.js");
导入数据注意事项
1:如果要使用某个模块里面的数据,则需要使用 require 关键字进行导入。
2:在导入用户自己开发的模块的时候,需要加上路径(1. 相对路径(多) 2. 绝对路 径) 注意: ./ 必须写上
3:模块文件的扩展名(后缀名)可以写,也可以不写
4:导出的模块一般需要使用一个变量来接收,一般把接收的量定义为常量
5:定义常量的名称和文件的名称保持一致(这个不是必须,大家都这么做)
2. ES6模块化的使用
导出数据方式一:export 变量 = "值"
例子:
export const name = "张三"
export const age = 16
导出数据方式二:export { }
例子:
let name = "张三"
let age = 18
export { name , age }
针对以上两种导出方式的导入数据方式:import {} from "路径" (from后面的路径要写完整)
例子:
import { name , age } from "./m1.js"
导出数据方式三:export default { } (每个模块只能有一个默认导出对象)
例子:
export default { name , age }注意:在一个模块下,可以同时使用export default 和 export 向外暴露成员
导入数据方式:
例子:
export m3 from "./m3"