Skip to content

Commit 4416ce3

Browse files
committed
更新文档
1 parent 7f89589 commit 4416ce3

File tree

4 files changed

+120
-31
lines changed

4 files changed

+120
-31
lines changed

src/base/3.browser/1.browser.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,123 @@ utils.add=function(a,b){
5151

5252
### commonJS
5353

54+
::: tip 前言
55+
模块化的目的是解决大型项目中多人协作的问题
56+
:::
57+
58+
## 1.js 模块化的不足
59+
60+
- JS 没有模块系统,不支持封闭的作用域和依赖管理
61+
- 没有标准库,没有文件系统和 io 流 api
62+
- 没有包管理系统
63+
64+
## 2.CommonJS 规范
65+
66+
- 封装功能
67+
- 封装作用域
68+
- 可能解决依赖问题
69+
- 工作效率更高,重构方便
70+
71+
## 3.Node 中的 CommonJS
72+
73+
- 在 node.js 里,模块划分所有的功能,每个 JS 都是一个模块
74+
- 实现 require 方法,npm 实现了模块的自动加载和安装依赖
75+
76+
```js
77+
;(function (exports, require, module, __filename, __dirname) {
78+
exports = module.exports = {}
79+
exports.name = "zfpx"
80+
exports = { name: "zfpx" }
81+
return module.exports
82+
})
83+
```
84+
85+
## 4.模块分类
86+
87+
### 4.1 原生模块
88+
89+
`http``path``fs``util``events`编译成二进制,加载速度最快,原来模块通过名称加载
90+
91+
### 4.2 文件模块
92+
93+
在硬盘的某个位置,加载速度非常慢,文件模块通过名称或路径来加载文件模块的后缀有三种
94+
95+
- 后缀名为.js 的 JavaScript 脚本文件,需要先读入内存再运行
96+
- 后缀名为.json 的 JSON 文件,fs 读入内存转化为 JSON 对象
97+
- 后缀名为.node 的经过编译后的二进制 C/C++扩展模块文件,可以直接使用
98+
::: tip 提示
99+
一般自己写的通过路径来加载,别人写的通过名称去当前目录或全局 node_modules 下面去找
100+
:::
101+
102+
### 4.3 第三方模块
103+
104+
- 如果 require 函数只指定名称则视为 node_modules 下面加载文件,这样的话可以移动模块而不需要修改引用的模块路径
105+
- 第三方模块查询包括 module.paths 和全局目录
106+
107+
#### 4.3.1 . 全局目录
108+
109+
window 如果在环境变量中设置了 NODE_PATH 变量,并将变量设置为一个有效的磁盘目录,require 在本地找不到此模块时向在此目录下找这个模块。 UNIX 操作系统中会从 $HOME/.node_modules $HOME/.node_libraries 目录下寻找
110+
111+
### 4.4 模块的加载策略
112+
113+
![](./5.png)
114+
115+
### 4.5 文件模块查找规则
116+
117+
![](./5.1.png)
118+
119+
## 5.外部访问内部
120+
121+
- 使用 exports 对象
122+
- 使用 module.exports 导出引用类型
123+
124+
## 6.模块对象属性
125+
126+
- module.id
127+
- module.filename
128+
- module.loaded
129+
- module.parent
130+
- module.children
131+
- module.paths
132+
133+
## 7.包
134+
135+
在 Node.js 中,可以通过包来对一组具有相互依赖关系的模块进行统一管理,通过包可以把某个独立功能封装起来,每个项目的根目录下面,一般都有一个 package.json 文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install 命令根据这个配置文件,自动下载所需的模块,也就是项目所需的运行和开发环境。
136+
137+
| 项目 | 描述 |
138+
| ------------------- | -------------------------------- |
139+
| name | 项目名称 |
140+
| version | 版本号 |
141+
| description | 项目描述 |
142+
| keywords: {Array} | 关键词,便于用户搜索到我们的项目 |
143+
| homepage | 项目 url 主页 |
144+
| bugs | 项目问题反馈的 Url 或 email 配置 |
145+
| license | 项目许可证 |
146+
| author,contributors | 作者和贡献者 |
147+
| main | 主文件 |
148+
| bin | 项目用到的可执行文件配置 |
149+
| repository | 项目代码存放地方 |
150+
| scripts | 声明一系列 npm 脚本指令 |
151+
| dependencies | 项目在生产环境中依赖的包 |
152+
| devDependencies | 项目在生产环境中依赖的包 |
153+
| peerDependencies | 应用运行依赖的宿主包 |
154+
155+
package.json
156+
157+
## 8.npm
158+
159+
- 安装完 node 之后只能使用 node 语言特性及核心函数,我们还需要一个系统下载、安装和管理第三方模块
160+
- 在 node 里这个系统被称为 node 包管理器(Node Package Manager,NPM)
161+
162+
### 8.1 npm 提供给的功能
163+
164+
- 公共注册服务,用户可以把自己写的包上传到服务器上
165+
- 命令行下载工具,用户可以通过 npm 命令吧别人写的包下载到自己电脑上,还可以管理自己模块依赖的其他模块
166+
167+
搜索第三方包的地址
168+
169+
```
170+
https://www.npmjs.com/search
171+
```
172+
173+
## 9.yarn

src/base/node/2.install.md

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -24,37 +24,6 @@ meta:
2424
- 这个是由 JavaScript 这门语言的用途决定的
2525
- webwork 没有改变 JavaScript 单线程的本质
2626

27-
#### 1.2. 浏览器模型
28-
29-
- 用户界面:地址栏、前进/后退按钮、书签菜单等。
30-
- 浏览器引擎:在用户界面和呈现引擎之间传送指令。
31-
- 呈现引擎:又叫渲染引擎或叫浏览器内核,在线程方面又称为 UI 线程
32-
- 网络:用于网络调用,比如 HTTP 请求。
33-
- 用户界面后端:用于绘制基本的窗口小部件,UI 线程和 JS 共用一个线程。
34-
- JavaScript 解释器:用于解析和执行 JavaScript 代码
35-
- 数据存储:这是持久层。浏览器需要在硬盘上存储各种数据,例如 cookie
36-
37-
![](./browser.jpg)
38-
39-
#### 1.3. 除 JavaScript 线程和 UI 线程之外的其他线程
40-
41-
- 浏览器事件触发线程
42-
- 定时触发器线程
43-
- 异步 HTTP 请求线程
44-
45-
#### 1.4. 任务队列
46-
47-
- 1.所有的同步任务都在主线程上执行,形成一个执行栈
48-
- 2.主线程之外,还存在一个任务队列。只要异步任务有了运行结果,就在任务队列中放置一个事件
49-
- 一旦执行栈中所有的**同步任务**执行完毕,系统就会读取**任务队列**,看看里面又那些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行
50-
- 主线程不断重复上面的第三部
51-
52-
#### 1.5. Event Loop
53-
54-
主线程从**任务队列**中读取事件,这个过程是不断的,所以整个的这种运行机制又称为 Event Loop(事件循环)
55-
56-
![](./eventloop.png)
57-
5827
#### 1.6. Node.js 的 Event Loop
5928

6029
![](./nodesystem.png)

src/base/node/browser.jpg

-12.5 KB
Binary file not shown.

src/base/node/eventloop.png

-22.4 KB
Binary file not shown.

0 commit comments

Comments
 (0)