文档知识来源:抖音 “哲玄前端”,《大前端全栈实践课》
loader顺序
1.loader文件目录
elips-core
|
| loader
|
| config.js
| controller.js
| extend.js
| middleware.js
| router-schema.js
| router.js
| service
| app
|
| controller
|
| base.ja
| project.js
| view.js
| extend
| logger.js
| middleware
| api-params-verify.js
| api-sign-verify.js
| err-handler.js
| public
|
| output
|
| entry.page1.tpl
| entry.page2.tpl
| static
|
| logo,png
| normailze.css
| router
|
| project.js
| view.js
| router-schema
|
| project.js
| service
| base.js
| paoject.js
| middleware.js
| config
|
| config.beta,js
| config.local.js
| config.prod.js
index.js
2.分析每个文件用处
(1)index.js (与elips-core同级),项目启动的入口
(2) elips-core下的index.js,项目的配置,也就是这里引入了loader(loader文件下的每一个)
(3)loader下的每个文件,都属于公共的配置类型,作用也就是拿到app里对应文件夹下的每个文件,进行挂载;
loader
(4)app下的每个文件,对应着loader下的文件,这里的每个文件作用都不同;
project:api请求的一系列操作;
view:页面请求的一系列操作
base:每个模块对应的基础配置;
api-params-verify:api参数校验;
api-sign-verify:api签名有效期校验;
err-handler:错误校验;
middleware:全局中间件的文件
3.结合页面请求,分析loader的一个顺序的过程
- npm run dev
先进行了config---
- 当页面输入之后,请求页面,渲染内容;
---middleware(监控页面请求的成功或失败)----router,页面路由请求,一个公共的位置--- controller,拿到后面的参数,具体页面请求的页面---service---成功则渲染页面
- 点击请求api接口,拿到get请求数据,校验签名有效期,参数校验,成功后返回200,不成功返回错误
----调用api接口--middleware(先监控成功或者失败)--校验签名有效期----校验参数routerSchema ----成功之后-----controller---service拿到数据---返回200
综上,顺序可能是,config---middleware---routerSchema ---controller--service---extend---router
【config其实是最基础的
middleware, controller, routerSchema 运行时依赖 service 的能力
extend 在用来创建数据库连接等
router 初始化的时候需要依赖 middleware, routerSchema, controller】
洋葱圈模型
从外到里,然后再从里到外,先进后出
在 Koa 中,每个中间件都会接收两个参数:ctx 和 next。ctx 是一个封装了 Node.js 原生请求和响应对象的上下文对象,而 next 是一个将控制权转交给下一个中间件的函数。如果不调用 next(),则中间件链将会中断。
1>先入后出,
2>先路由出发,然后经过一个中间件,到达业务逻辑层处理,通过一个渲染页面等等,然后去服务层去读取MySQL,查询日志,调用外部服务等操作,然后在返回给业务层,
出中间件,然后响应给客户端(浏览器);
3>目的:实现解析器的代码,达到承接用户的文件(左侧部分图),可以解析为第二点的效果(右侧部分图);
思考问题:
app/middleware/api-params-verify.js,if(valid && params && schema.params){} 是否可以拿取到params
解答:这里的params为undefined,因为在该中间件获取参数params时,路由上的参数还未加载
【由于 params 是由 koa-router 匹配到第一个满足条件的路由后生成的对象, 在 koa 中间件执行时, koa-router 还未执行, 所以 ctx.params 还未被赋值】