Javascript

模块化(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)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!