模块(包)
传统引入 js 的缺点
整个网页,我们写了一个 js 文件,所有的特效都在里面
耦合度太高,代码之间关联性太强,不便于后期维护
变量容易 全局污染
如果将 复杂的 js 文件,拆成多个功能的 js 文件
缺点:
发生的请求过多,依赖模糊,难于维护
这是传统的开发模式,都被抛弃掉了
所以我们使用 模块化的开发模式
为什么使用模块化
减少代码之间的关联度
部署方便
更好的进行分离,按需加载,避免了命名冲突,容易维护
什么是模块化
node 自带的规范(模块) commonjs 规范
node -v 检测 mode 版本
node 是 JavaScript 的环境,在 node 里面可以运行 js 文件,干服务器 指令: node 文件名
commonjs 模块,是 node 的规范运行,在服务端,不是浏览器端,如果使用在浏览器端,需要使用对该文件进行打包编译(借鉴工具 browserify webpack gulp 等)
暴露的本质是对象
每个 js 文件,都必须对外暴露接口
书写模块的时候,对外暴露接口,modele.exports={} 或 exports.xxx=
引入模块 require() 参数:路径 路径注意 :如果是当前文件,前面必须加 ./ 。如果只写了文件名,则是在node_modules文件下
commonjs 暴露的本质是一个角 exports 的对象
module.exports={} 和 exports.xxx= 的区别?
二者暴露本质是一样的,都是暴露一个 exports 对象 前者会将原有的 exports 的内存地址覆盖,后者会在原有的 exports 的基础上进行添加
commonjs 是同步加载,是 node 的规范,同步加载在浏览器是一个大坑,只要一个环节卡住了,后面的就没法执行,所以不建议使用,如果非要使用,要需要编辑打包
对于 web 端,每个 js 都是一模块,每个模块都必须暴露一个接口,每个 js 文件,有一个全局 require() 方法,用来引入模块
模块:
1.node 自带的包(模块), path url fs
2.第三方模块 weui / jquery / axios / zepto
3.自定义模块:我们写的
配置模块说明文件,npm iinit 就会生成一个包 package.json 的文件
version:版本号
desciption:说明
main:index.js 文件 我们主文件 index.js 文件,剩下的都是子模块
在浏览器说 require :is not defined
说明浏览器不支持 commonjs,需要借鉴打包工具
1.browserify