[聚合文章] 呈现系统简介

呈现系统的作用就是显示搭建系统配出来的页面。搭建系统的页面是由模块搭出来的。所以呈现系统的开发就是模块/组件的开发。

页面结构

页面的主体内容是以模块为单位显示的，每个模块内包含不同的组件。呈现系统开发的最小粒度是组件的开发。

组件和模块的区别

1. 模块包含组件，模块是组件的架子，组件不可被拆分
2. 不同的模块可能会包含重复的组件，不同的组件随机组合，会生成新的模块。
3. 开发以组件为单位开发，开发完成后，组合成模块，添加到模块库，提供给运营来配置页面。
4. 模块不包含业务逻辑，所有的业务逻辑写在组件里面。

数据流程图

呈现系统里静态资源走cdn缓存。动态资源走valish缓存。

页面渲染原理

第一步： 请求活动页面 http://pages.kaola.com/pages/index/j3poay4ypagerw.shtml

第二步： 后端返回html页面，包含页头页脚内容。同步数据（除去页头页脚）为

{
  "frameDataUrl": "pages/frame/data/definedUrl/eTag.shtml",    
  "isDevelopment": 1
}

frameDataUrl 是请求框架数据的jsonp链接。

isDevelopment 区分是否开发环境，应用不同的打包配置。

第三步： 执行init.js 脚本。主要操作包括：定义jsonp请求拿取框架数据的回调函数，获取到框架数据后请求组件合并样式，组件合并脚本，设置页面标题，分享信息，添加模块样式，页面显示模块框架等操作。

第四步： 执行页面自定义脚本index.js。PC和H5页面脚本公共的逻辑包括组件的加载和显示。这块公共逻辑抽离成了module.load.js脚本里。

因为页头页尾是用的主站的包，打包后文件较大，所以将页头页尾的渲染操作放在组件渲染的后面，避免阻塞组件渲染。

组件开发

每个组件的目录结构为:

- data.json
- index.entry.js
- index.mcss
- view.html

• data.json: 定义组件需要的假数据。本地启动mock server时需要用到这里的数据。必填。
• index.entry.js: 组件打包的入口文件，需要以 .entry.js 结尾。
• index.mcss: 组件需要的样式文件。
• view.html: 组件需要的模板文件。

整个组件被打包后输出 index.js, index.js的打包路径会配置在搭建系统组件jsPath的字段里。这个路径用于加载组件脚本。

工程目录结构

- dist  打包输出的静态资源文件
- doc   文档输出
- mock  mock假数据
- src   
    - base   基础脚本，比如tools.js等
    - components  组件脚本
    - pages  页面相关的业务脚本
- view   ftl视图文件
    - src
        - common
        - h5
        - pc

mock数据配置

启动步骤

像主站的公共包，还有KMUI的组件库都需要从公司私有仓库npm里获取，先定义别名nenpm。

参考： http://npm.hz.netease.com/

alias nenpm='cnpm --registry=http://rnpm.hz.netease.com/ --registryweb=http://npm.hz.netease.com/ --cache=$HOME/.nenpm/.cache --userconfig=$HOME/.nenpmrc'

nenpm i
npm start

mock server 使用的是 foxman。对应的配置文件是foxman.config.js。

mock 数据配置

框架数据

文件路径：kaola-pages-web-starter/src/main/resources/web/mock/async/get/pages/frame/data/definedUrl/pageModulesConfig.json 只需要配置页面所包含的模块类型和页面请求来源即可。

{
    "moduleTypes": [30002, 1001, 10001, 1001, 10001, 1001, 1001],
    "requestSource": 1
}

kaola-pages-web-starter/src/main/resources/web/mock/async/get/pages/frame/data/definedUrl/_moduleTypeToData 里需要增加模块的配置属性。

组件数据

文件路径：kaola-pages-web-starter/src/main/resources/web/mock/async/get/pages/region/detail/regionTypeToPathConfig.json 配置regionType跟文件目录的对应关系。

{
  "1001": "type_1001_goods",
  "10001": "type_10001_img_hotarea",
  "30002": "type_30002_nav"
}