01-模块化

1. 模块化由来

• 在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即，如今随着前端代码日益膨胀；
• 这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码；

2. Node.js中的模块化 commonjs规范

• CommonJS就是为JS的表现来制定规范，因为js没有模块的功能所以CommonJS应运而生，它希望js可以在任何地方运行，不只是浏览器中。

2-1. 创建自定义模块

• 引入一个文件形式模块
• 注意一定要有"./"，文件后缀可加可不加

require("./aModule");

• 引入文件夹形式模块
• 必须加"./"
• 文件夹中必须有index.js作为导出模块

require("./aModuledir");

2-2. 自定义模块的按需导出

• 通过module.exports导出

// Ma.js
console.log("Ma.js")
let a = 10;
class Person{
    constructor() {
        this.name = "张三";
    }
    hobby(){
        console.log("喜欢篮球")
    }
}
module.exports = {
    a,
    Person
}

// index.js
console.log("index.js");
let Ma = require("./Ma");
let cai = new Ma.Person();
cai.hobby();
console.log(Ma.a)

// 控制台输出
index.js
Ma.js
喜欢篮球
10

• 通过exports导出

// Ma.js
console.log("Ma.js")
let a = 10;
class Person{
    constructor() {
        this.name = "张三";
    }
    hobby(){
        console.log("喜欢篮球")
    }
}
exports.a = a;
exports.Person = Person;

// index.js
console.log("index.js");
let Ma = require("./Ma");
let cai = new Ma.Person();
cai.hobby();
console.log(Ma.a)

// 控制台
index.js
Ma.js
喜欢篮球
10

2-3. node_modules

• 创建一个mode_modules文件夹
• mode_modules文件夹中包含需要require的文件夹test
• test文件夹中需要包含index.js
• 外部js文件可以通过require("test")来调用text文件夹里的功能代码

2-4. package.json — 描述功能性文件

• 2-3中通过require("test")即可调用其中index文件就可以通过package.json进行设定
• package.json

{
    "name": "test",
    "version": "1.0",
    "main": "main.js"
}

• 通过上述设定，当require("test")后则会调用test文件夹下的main.js文件

3. npm—包管理器/模块管理器

• npm官网
• 下载第三方模块并引入

3-1. npm init

• 引导创建一个package.json文件

3-2. npm help(npm -h)

• 查看npm帮助信息

3-3. npm version (npm -v)

• 查看npm版本

3-4. npm install (npm i)

• 安装 默认在当前目录，如果没有node_modules 会创建文件夹
• npm install module_name -S 或者–save 即 npm install module_name --save 写入dependencies
• npm install module_name -D 或者 —save-dev 即 npm install module_name --save-dev 写入devDependencies
• npm install module_name -g 全局安装(命令行使用)
• npm update(npm -up)：更新

3-5. npm remove 或者 npm uninstall

• 删除

3-6. npm root

• 查看当前包安装的路径 或者通过 npm root -g 来查看全局安装路径