模块化（CommonJS、ES6）

本文主要是介绍模块化（CommonJS、ES6），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

模块化是将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并组合在一起，块的内部数据是私有的，只是向外暴露一些接口，与其他模块通信。

优点：减少命名冲突、更好的分离、按需加载、更高的复用性、高维护性

一、CommonJS

在服务器端：模块的加载是运行时同步加载（阻塞模式）

在浏览器端：模块需要提前编译打包处理

1.1 在服务器端（基于node.js）

导出模块语法：

// value 是任何形式的数据、对象
module.exports= value   // module.export默认导出的时候对象{}，赋值后value覆盖了{} 只能导出一次
exports.xxx = value   //这种方式是直接在export上添加了xxx属性，并导出去了 可以导出多个，使用时调用对应的属性即可

引入模块语法：

require(XXX) //对于第三方模块：xxx为模块名      自定义的模块：xxx为模块文件路径

1.2 在浏览器端（即在.html文件中使用）

需要使用打包插件，如browserify，全局和局部都必须安装

开发依赖 --save

与生产依赖 --save-dev

使用browserify插件对需要引用的文件进行打包生成新的.js文件，在html文件的script标签中的src引用该地址，即可引用。

// 打包处理js文件 
browserify  需要引用的.js文件地址 -o 打包后放置文件的地址及包名    // -o（-output）

二、ES6

目前部分浏览器还不支持ES6语法，需要转化为ES5。

需要使用Babel将ES6转化为ES5。

使用Browserify编译打包工具。

语法

常规导出模块：export ..... // 注意commonJS是exports注意区分
导入模块：import { } ..... // 仅用export导出，使用import导入时需要使用结构赋值，即使用{}
​
默认导出模块：export default ....
默认导入：import 自定义名称 ....
​

这篇关于模块化（CommonJS、ES6）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！