目录
1. 模块化的基本概念
1.1 什么是模块化
模块化
是指解决一个
复杂问题
时,自顶向下逐层
把系统划分成若干模块的过程
。对于整个系统来说
,
模块是可组合、分解和更换的单元
。
模块化就是一种拆分、组合、复用的思想。
Node.js
已经实现了模块化。
编程领域中的模块化:
编程领域中的模块化,就是
遵守固定的规则
,把一个
大文件
拆成
独立并互相依赖
的
多个小模块
。
把代码进行模块化拆分的好处:
- 提高了代码的复用性
- 提高了代码的可维护性
- 可以实现按需加载
1.2 模块化规范
模块化规范
就是对代码进行模块化的拆分与组合时,需要遵守的那些规则。
例如:
- 使用什么样的语法格式来引用模块
- 在模块中使用什么样的语法格式向外暴露成员
模块化规范的好处
:大家都遵守同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块之 间的相互调用。
2. Node.js 中的模块化
2.1 规范
1:模块分类
Node.js 中根据模块来源的不同,将模块分为了 3 大类,分别是:
- 内置模块(内置模块是由 Node.js 官方提供的,例如 fs、path、http 等)
- 自定义模块(用户创建的每个 .js 文件,都是自定义模块)
- 第三方模块(由第三方开发出来的模块,并非官方提供的内置模块,也不是用户创建的自定义模块,使用前需要先下载)
2:加载模块
使用强大的
require()
方法,可以加载需要的
内置模块
、
用户自定义模块
、
第三方模块
进行使用。例如:
注意
:使用 require() 方法加载其它模块时,会执行被加载模块中的代码。并且.js后缀可以省略。
3:模块成员
在当前模块中声明的变量、常量、函数,统称为“模块成员”
4:模块作用域
1. 什么是
模块作用域
和
函数作用域
类似,在自定义模块中定义的
变量
、
方法
等成员,
只能在当前模块内被访问
,这种
模块级别的访问限制
,叫做
模
块作用域
。
5:模块对象
在每个 .js 自定义模块中都有一个 module 对象,它里面
存储了和当前模块有关的信息
,打印如下:
6:向外共享模块成员
在自定义模块中,可以使用 module.exports 对象,将模块内的成员共享出去,供外界使用。
外界用
require() 方法
导入自定义模块时,得到的就是 module.exports 所指向的对象。
共享成员时的
注意点:
使用 require() 方法导入模块时,导入的结果,
永远以 module.exports 指向的对象为准。
7:Node.js 中的模块化规范
Node.js 遵循了 CommonJS 模块化规范,CommonJS 规定了
模块的特性
和
各模块之间如何相互依赖
。
CommonJS 规定:
- 每个模块内部,module 变量代表当前模块。
- module 变量是一个对象,它的 exports 属性(即 module.exports)是对外的接口。
- 加载某个模块,其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。
3. npm与包
3.1 包
1. 什么是包
Node.js 中的
第三方模块
又叫做
包
。
就像
电脑
和
计算机
指的是相同的东西,
第三方模块
和
包
指的是同一个概念,只不过叫法不同。
2. 包的来源
不同于 Node.js 中的内置模块与自定义模块,
包是由第三方个人或团队开发出来的
,免费供所有人使用。
注意
:Node.js 中的包都是免费且开源的,不需要付费即可免费下载使用。
3. 为什么需要包
由于 Node.js 的内置模块仅提供了一些底层的 API,导致在基于内置模块进行项目开发的时,效率很低。
包是基于内置模块封装出来的
,提供了更高级、更方便的 API,
极大的提高了开发效率
。
4. 从哪里下载包
国外有一家 IT 公司,叫做
npm, Inc.
这家公司旗下有一个非常著名的网站:
https://www.npmjs.com/
,它是
全球最
大的包共享平台
,可以从这个网站上搜索到任何需要的包
5. 如何下载包
npm, Inc. 公司
提供了一个包管理工具
Node Package Manager
(简称
npm
包管理工具
)
,我们可以 使用这个包管理工具,从
https://registry.npmjs.org/
服务器把需要 的包下载到本地使用。
这个包管理工具随着 Node.js 的安 装包一起被安装到了用户的电脑上
,
在终端中执行
npm -v
命令,来查看版本号:
3.2 npm 初体验
1. 格式化时间的传统做法(自己定义模块)
- 创建格式化时间的自定义模块
- 定义格式化时间的方法
- 创建补零函数
- 从自定义模块中导出格式化时间的函数
- 导入格式化时间的自定义模块
- 调用格式化时间的函数
2. 格式化时间的高级做法(使用第三方的包)
- 使用 npm 包管理工具,在项目中安装格式化时间的包 moment
- 使用 require() 导入格式化时间的包
- 参考 moment 的官方 API 文档对时间进行格式化
3.3 npm 安装下载包
如果想在项目中安装指定名称的包,需要运行如下的命令:
上述的装包命令,可以简写成如下格式:
一次性安装多个包:
npm install
包
1
包
2
包
3
初次装包完成后,在
项目文件夹
下多了一个叫做
node_modules
的文件夹
、一个叫做
package-lock.json
的
配置文件、一个叫做
package.json
的配置文件
。
其中:
node_modules
文件夹
用来
存放所有已安装到项目中的包
。
require()
导入第三方包时,就是从这个目录中查找并加载的包。
package-lock.json
配置文件
用来记录
node_modules
目录下的
每一个包的下载信息
,例如包的名字、版本号、下载地址等。
package.json
配置文件
用来记录
当前项目的一些配置信息
,例如:项目的名称、版本号、用到的包等等。
注意:不要手动修改 node_modules 或 package-lock.json 文件中的任何代码,npm 包管理工具会自动维护它们。
3.4 npm 安装指定版本的包
默认情况下,使用 npm install 命令安装包的时候,
会自动安装最新版本的包
。如果需要安装指定版本的包,可以在包名之后,通过
@ 符号
指定具体的版本,例如:
3.5 npm 卸载包
3.6 解决包下载慢的问题
切换下包镜像源:下包的镜像源,指的就是下包的服务器地址
【
1
】通过命令,手动切换
【
2
】通过管理工具
nrm
切换
nrm ls没有星号
3.7 包的分类
使用 npm 包管理工具下载的包,共分为两大类,分别是:
- 项目包
- 全局包
1. 项目包
那些被安装到
项目
的
node_modules 目录
中的包,都是项目包。
项目包又分为两类,分别是:
- 开发依赖包(被记录到 devDependencies 节点中的包,只在开发期间会用到)
- 核心依赖包(被记录到 dependencies 节点中的包,在开发期间和项目上线之后都会用到)
2. 全局包
在执行 npm install 命令时,如果提供了
-g
参数,则会把包安装为
全局包
。
全局包会被安装到
C:\Users\用户目录\AppData\Roaming\npm\node_modules
目录下。
注意:
- 只有工具性质的包,才有全局安装的必要性。因为它们提供了好用的终端命令。
- 判断某个包是否需要全局安装后才能使用,可以参考官方提供的使用说明即可。
3.8 包管理配置文件
1. npm 规定
npm 规定,在
项目根目录
中,
必须
提供一个叫做
package.json
的包管理配置文件。用来记录与项目有关的一些配置 信息。例如:
- 项目的名称、版本号、描述等
- 项目中都用到了哪些包
- 哪些包只在开发期间会用到
- 那些包在开发和部署时都需要用到
2. 为什么需要包管理配置文件?
整个项目的体积是 30.4M ,第三方包的体积是
28.8M ,
项目源代码的体积
1.6M
遇到的问题:
第三方包的体积过大
,不 方便团队成员之间共享项目源代码。
解决方案:
共享时剔除node_modules
在
项目根目录
中,创建一个叫做
package.json
的配置文件,即可用来记录项目中安装了哪些包。从而方便剔除node_modules 目录之后,在团队成员之间共享项目的源代码。
注意
:在项目开发中,一定要把 node_modules 文件夹,添加到 .gitignore 忽略文件中。
3. 快速创建 package.json
npm 包管理工具提供了一个
快捷命令
,可以在
执行命令时所处的目录中
,快速创建 package.json 这个包管理配置文件:
注意:
- 上述命令只能在英文的目录下成功运行!所以,项目文件夹的名称一定要使用英文命名,不要使用中文,不能出现空格。
- 运行 npm install 命令安装包的时候,npm 包管理工具会自动把包的名称和版本号,记录到 package.json 中。
4. 一次性安装所有的包
当拿到一个
剔除了 node_modules
的项目之后,需要先把所有的包下载到项目中,才能将项目运行起来。否则会报类似于下面的错误:
可以运行
npm install
命令(或
npm i
)一次性安装所有的依赖包:
5. dependencies 节点
package.json 文件中,有一个
dependencies
节点,专门用来记录
当前项目中的核心依赖包。
6. devDependencies 节点
某些包
只在项目开发阶段
会用到,在
项目上线之后不会用到
。
package.json
文件中,有一个
devDependencies
节点,专门用来记录当前项目中的开发依赖包。
4. 开发接口服务器
同源策略 & 跨域
什么是同源策略
同源策略
(英文全称 Same origin policy)是
浏览器
提供的一个
安全功能
。
浏览器
的
同源策略
规定:不允许
非同源的
URL 之间进行
资源的交互
。
什么是同源
同源指的是两个 URL 地址具有
相同的协议
、
主机名
、
端口号
。
例如,下表给出了相对于
http://www.test.com/index.html
页面的 5 个
同源检测
结果:
什么是跨域
同源
指的是两个 URL 的
协议
、
主机名
、
端口号
完全一致,反之,则是
跨域
。
出现跨域的根本原因:
浏览器的同源策略
不允许非同源的 URL 之间进行资源的交互。例如:
- 网页:http://www.test.com/index.html
- 接口:http://www.localhost.com/api/news
- 受到同源策略的限制,上面的网页请求下面的接口会失败!
跨域场景:
网页打开时, 所在
地址栏里的url
和 内嵌
ajax请求的url
,一旦协议, 域名, 端口号有一个对应不上, 就出现了"跨域访问"
浏览器对跨域请求的
拦截过程
浏览器
允许发起
跨域请求。但跨域请求回来的数据,
会被浏览器拒绝处理并报错
,无法被页面获取到!示意图如下:
突破浏览器跨域限制的两种方案
代理服务器 和 CORS 是实现跨域数据请求的两种技术方案。
注意:代理服务器后期会在Vue和React中使用,CORS 是跨域的主流技术解决方案。
CORS 的概念
- CORS (跨域资源共享) 由一系列 HTTP 响应头组成,这些 HTTP 响应头决定浏览器 是否阻止前端 JS 代码跨域获取资源
- 浏览器的 同源安全策略 默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头,就可以解除浏览器端的跨域访问限制
CORS
是
解决跨域数据请求
的
终极
解决方案,全称是
C
ross-
o
rigin
r
esource
s
haring。
注意事项:
- CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置,即可请求开启了 CORS 的接口
- CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器,才能正常访问开启了 CORS 的服务端接口(例如:IE10+、Chrome4+、FireFox3.5+)
CORS 的原理
服务器端通过
Access-Control-Allow-Origin
响应头,来告诉浏览器
当前的 API 接口
是否允许跨域请求。
CORS 的两个主要优势
- CORS 是真正的 Ajax 请求,支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式
- 只需要后端开启 CORS 功能即可,前端的代码无须做任何改动