1.模块===包
<script src="js/app.js"></script>
传统写法网页通常只写一个js文件,把所有的特效都加进去了
缺点:耦合度太高,代码关联性太强,不便于后期维护,会造成全局污染
<script src="js/nav.js"></script>
<script src="js/banner.js"></script>
<script src="js/lazy.js"></script>
发送的请求次数过多,依赖模糊。难于维护。
以上都是传统的开发形式,都被抛弃了。
2.使用模块化开发
为什么使用模块化?
减少代码之间的关联度,部署方便,更好的分离,按需加载,避免命名冲突,容易维护。
3.什么是模块化?
Node自带的规范 commonjs规范
Commonjs是node的规范,运行在服务端,不是浏览器端,如果使用在浏览器端,需要使用对该文件进行打包编译(借鉴工具browserify,webpack,gulp等)
书写模块的时候,对外暴露接口 module.exports={} exports.xxx=
引入模块 require(路径)
Commonjs暴露的本质是一个叫exports的对象
Module.export={}和exports.xxx=
二者暴露的本质是一样的,都是暴露一个exports对象
Commonjs是node的规范,但他是同步加载的,同步加载在浏览器端是一个坑,只要一个环节卡住了,后面的就没法执行。所以不建议使用,如果非要使用就需要编辑打包。
Web端
每个js都是一个模块,每个模块都必须有一个暴露接口,每个js文件有一个全局的方法叫require()用于引入模块。
模块
1.node自带的模块(包) path url fs
2.第三方模块 weui jquery axios zepto
Npm 全名 node packsge manager node包管理工具 增删查改
如果npm操作太慢
可以安装npm镜像
下载
Npm install jquery
下载存放的位置
全局下载 在任何一个文件夹下都能使用这个包 全局安装目录
C:UsersAdministratorAppDataRoaming pm ode_modules
如何全局安装
Npm install -g jquery
局部安装
Npm install jquery
就会在当前目录下生成一个node_modules的文件夹里面
Npm install jquery --save
这个是下载运行环境(生产环境)的包 比如 jquery
Npm install jquery --save -dev
这个是下载开发环境所以来的包 比如npm browserify
二者区别
前者--save 是上线时会被压缩的包 后者--save-dev是上线时会被抛弃的包
指定版本下载
Npm install jquery@3.2.1 --save
删除
Npm uninstall jquery
查版本
Npm search jquery
更新
Npm updata jquery
3.自定义模块 我们写的
1.配置模块说明文件 npm init 就会生成一个package.json的文件
{
"name":"cui",
"version":"1.0.0",
"description":"study",
"main":"index.js",
"scripts":{
"test":"echo"Error :no test specified" && exit 1"
},
"author":"",
"license":"ISC"
}
main:index.js 我们的主文件是index.js
Index.js是这个包的输出文件,即便删除了package.json只要不改变index.js的文件名就没事,一旦改了就报错。是因为包的输出文件默认是index.js
2.var obj=require("cui")
默认在node_modules文件夹下找这个包
在浏览器端,说require is not defined 说明浏览器不支持commonjs,需要借鉴打包工具
1.browserify
Node
Node是javascript的环境,在node里面可以运行js文件。指令 node 文件名