JavaScript模块化规范(CommonJS)学习笔记1

1.模块化概述

 1.1什么是模块化

                将程序文件依据一定规则，拆分成多个文件，这种编码方式就是模块化的编码方式

                拆分出来的每个文件就是一个模块，模块中的数据都是私有的，模块之间相互隔离；

                同时也能通过一些手段，可以把模块内的指定数据"交出去"，供其它模块使用

1.2为什么需要模块化？

        随着应用的复杂度越来越高，其代码量和文件数量都会急剧增加，会逐渐引发以下问题：

        1.全局污染问题

        2.依赖混乱问题

        3.数据安全问题

2.有哪些模块化规范

        CommonJS -- 服务端应用广泛

        AMD

        CMD

        ES6 模块化 -- 浏览器端应用广泛

3.导入与导出的概念

        模块化的核心思想就是：模块之间是隔离的，通过导入和导出进行数据和功能的共享

                导出（暴露）：模块公开其内部的一部分（如变量、函数等），使这些内容可以被其他模块使用

                导入（引入）：模块引用的使用其它的模块导出的内容，以复用代码和功能

4.CommonJS模块化

 4.1导出数据

        在CommonJS标准中，导出数据有两种方式

        1.第一种方式：module.exports = value

        2.第二种方式：exports.name = value

        注意点如下：

        1.每个模块内部的：this、exports、modules.exports在初始时，都指向同一个空对象

        2.无论如何修改导出对象，最终导出的都是module.exports的值 

        3.exports是对module.exports的初始引用，仅为了方便给导出对象添加属性，所以不能使用exports= value 的形式导出数据，但是可以使用module.exports = xxx 导出数据

4.2导入数据 

在CommonJS模块化标准中，使用内置的require函数进行导入数据

// 直接引入模块

const school = require('./school')


// 引入同时解构出要用的数据

const { name, slogan, getTel } = require('./school')

// 引入同时解构+重命名

const { name:stuName,motto,getTel:stuTel} = require('./student')

文件路径如下：

4.3 扩展理解 

 一个JS模块在执行时，是被包裹在一个内置函数中执行的，所以每个模块都有自己的作用域，我们可以通过一下方式验证：

console.log(arguments)
console.log(arguments.callee.toString())

内置函数的大致形式如下：

function ( exports, require, module, __filename, __dirname){

       /***************内容***********/

}

4.4 浏览器端运行

Node.js默认是支持CommonJS规范的，但浏览器端不支持，所以需要经过编译，步骤如下：

        第一步：全局安装browserify:npm i browserify -g

        第二部：编译

browserify index.js -o build.js

      备注：index.js是源文件，build.js是输出的目标文件

        第三步 ：页面中引入使用

<script type="text/javascript" src="./build.js"></script>