星散
为何须要 “前后端星散、web效劳器与static效劳器星散”:
- 前端与后端耦合 (需求)
- 自动化、工程化的构建前端的代码 (基本前提)
- 模块化、组件化，项目同享代码 (历程)
- 浏览器运转速率 (硬件)
前后端星散详细：
- 工程星散
- 数据流星散
web效劳器与static效劳器星散:
- web 效劳器：寄存运转后端 web 运用的递次，以及前端 html 文件（进口文件）
- static 效劳器：静态资本效劳器，寄存前端除 html 文件以外的其他资本文件，包含 js， css， images
web效劳器与static效劳器的瑕玷：
- 前端构建历程当中会发生大批的冗余文件
- 前端职员能够直接接触到后端代码，也不够平安
- 静态资本会占用 web 效劳器的资本和带宽
web效劳器与static效劳器的注重点：
- 多个项目共用同一个 static 效劳器
- 保证静态资本的途径的准确
并行开辟
当地化接口模仿、前后端并行开辟
当地化接口模仿缘由: 前端与后端耦合，web 前端递次依靠数据。
当地数据模仿的处理方案的思绪：(更多项目是合营运用)
- 一致模仿效劳器环境，就是依据文档，完全依据效劳器的接口设置搭建当地的接口效劳；
- 多环境设置&切换，就是从代码的层面设置多个环境（如 线上环境，当地环境），依据是在线上照样在当地切换差别的环境。
一致模仿效劳器环境
多环境设置&切换
- 把运用对接口的完成举行一次封装断绝 (fetch file)
- 更好的治理代码
开辟历程当中预定 3 个环境：0（线上环境 prod），1（当地模仿背景接口环境 dev），2（并行开辟环境 uat）
范例
- 编码范例
- 项目构造范例
- 框架、东西范例
- 其他商定
编码范例
- html: 缩进，标签，加载递次
- css: 缩进，换行，引号，解释
- js: 缩进，换行，变量称号，括号，文档解释
项目构造范例
文件、目次定名范例，模块化分组范例，组件化范例
- 变量:
完全英文定名的用复数情势，缩写用单数情势
悉数采纳小写体式格局， 以下划线分开 模块化分组范例：
/project/src/: 事情空间index.html: html 进口文件index.js: js 进口文件index.(css|less|scss): 款式进口文件js/: js 文件目次js/ajax/: 对 ajax 封装的目次 js/util/: 东西类函数的目次 js/pages/: spa 运用页面目次 js/data/: 静态数据目次 js/tpl/: 模板目次 js/(event|view)/: 事宜监听文件目次data/: 当地 json 数据模仿(css|less|scss)/: 款式文件目次images/: 图片文件目次components/: 组件目次（假如基于 react, vue 等组件化框架）- 组件化范例：这里的组件化并非指在代码、框架层面的组件化，而是在架构和范例层面的组件化
/project/src/component/hello/: hello 组件的事情空间README.md: 组件的申明，包含功用引见、api文档、一些用例等等index.js: 组件的进口文件，挪用组件将运用以下的体式格局demo/：用例目次
框架、东西范例
框架和 UI 库：
从最最先的时刻要肯定要手艺选型，而且最好不要更改选定的框架和UI库，由于差别的框架，差别的UI库平常相互之间是不兼容的，同时用多个框架或UI库也是要只管防止。
框架选型
- jquery + bootstrap
- react + ant-design | material-ui |
- vue + element-ui | vux
东西范例：
- eslint: 语法划定规矩和代码作风的搜检东西，能够用来保证写出语法准确、作风一致的代码。
别的商定
- 每一个 js 文件不应该凌驾
400行，凌驾就应该分块 - 每一个 css 文件不应该凌驾
200行，凌驾就应该分块
文档
目标
- 下降团队的合作本钱和保护本钱
- 进步开辟效力和质量
- 开辟职员的更改而发生较大的影响
构成文档内容
- 解释 JSDoc：放在要领或函数或类声明之前
- 营业逻辑: 比较复杂的营业逻辑不合适放在解释里，须要零丁写逻辑文档
- 更新日记: 轻易查找更新状况、时候、开辟职员
- 备注: 分外有效的信息
/**
* 函数功用形貌
*
* @param arg {type} 变量形貌
* @return {type} 返回值作用形貌
*/SPA
SPA长处：
- 当地路由，由
JS定义路由，依据路由衬着页面，掌握跳转（最基本特性） - 文件只会加载一次，最大限制重用文件，提拔加载速率。
- 全部运用只要一个进口
html文件，路由由前端掌握，有时刻须要后端合营
Hash Router
http://www.example.com -> index.html
http://www.example.com -> 主页面
http://www.example.com/#/ -> 主页面
http://www.example.com/#/page1 -> page1 页面
http://www.example.com/#/page2 -> page2 页面路由组件：
按需加载
按需加载:
- 依据须要来加载差别的组件/文件
- 防止首页加载迟缓
react 百口桶：react + react-router + redux + redux-saga + react-redux + dva
react 百口桶 + ant-design 开辟模板: antd-admin | ant-design-pro
SSR 和 node中间层
处理痛点：
- 运用
SPA后，全部页面的衬着基本上都由前端JS动态衬着，搜索引擎的爬取不到，SEO完成 贫苦 - 电商类运用必需要运用。
处理思绪:
- 效劳器端衬着（SSR）：效劳器端和前端公用同一个运用，然后经由过程构建东西及设置，肯定哪些组件须要再效劳器端衬着，那些组件须要再客户端衬着。
-
node中间层：保存效劳器端模板衬着的功用，然则由node递次来替代后端言语模板衬着，后端言语与node递次只做数据交互。
SSR
效劳器端衬着，由框架与构建东西合营，并依据肯定的项目构造和编码体式格局，配合运转。
next.js: 效劳器端衬着 react 组件，运用要领用Next.js疾速上手React效劳器衬着
nuxt.js: 效劳器端衬着 vue 组件，运用要领nuxt.js
node 中间层
node中间层做开辟，难点怎样让前后端星散的两个项目协同开辟与调试:
- 平常
web项目开辟时有热更新(Hot Reloading)与热替代(Hot Replacing)功用 - 平常
node项目开辟时有 nodemon功用 - 能将二者结合起来开辟，不论修改
web项目文件照样node项目文件，浏览器页面都能够自动革新，就能够在当地调试node中间层的模板输出。
