本章学习小编会围绕以下知识点去为大家讲解:
1.什么是模块
2.什么是传统开发,传统开发的区别?
3.什么是模块化开发?
4.为什么使用模块化开发它的优点有哪些?
一:什么是模块
1.模块===包,简单说模块就相当于一个包(容器)
二:什么是传统开发,传统开发的缺点?
传统开发:整个网页我们写了一个js文件,所有的特效都写在这个js里。
缺点:耦合度太高(重复率),代码关联性太强,不便于后期维护会造成全局污染
或者是这种:比如导航条是单独的一个js文件或轮播图是单独的js文件,发送请求次数过多,依赖模糊,难以维护
以上是传统开发形式,都被抛弃了。
三:使用模块化开发
1.为什么使用模块化开发(优点)
1.减少代码之间的关联
2.部署方便
3.更好的进行分离,按需加载
4.避免命名冲突,容易维护
3.什么是模块化?
node自带的规范 commonjs规范
commonjs是node的规范,运行在服务端,不是浏览器端,如果使用在浏览器端,需要使用对该文件进行打包翻译(借鉴工具 browserify,webpack,gulp等)
书写模块时候,对外暴露接口 module.expots={}或 exports.xxx=number或json
引入模块 require(路径)
直接在浏览器打开会报错,要借用打包工具(后面说)
可以看到我们在终端可以打印输出nav.js的变量
commonjs 暴露本质是一个叫exports的对象
module.export={}和exports.xxx=number/json的区别?
二者暴露本质是一样,都是暴露一个exports对象
commonjs是node的规范,但他是同步加载的,同步加载在浏览器是一个坑,只要一个环节卡住了,后面就没法执行。所有不建议使用,如果非要使用就待编辑打包。
web端
每个js都是一个模块,每个模块都必须有一个暴露接口,每个js文件有一个全局的方法叫 require() 用于引入模块
模块的分类:
1.node自带模块(包) path url fs
2.第三方模块 weui jquery axios zepto
引入第三方模块1.用