add file:上线指导

This commit is contained in:
qianguyihao 2018-03-08 23:34:58 +08:00
parent cbdf3ec762
commit 1ea1faeafb
5 changed files with 200 additions and 2 deletions

View File

@ -23,6 +23,23 @@
## 模块化思维
1模块化设计的关键词**封装、继承**;把**通用**的模块**先抽象,后具体**,达到**复用**。【面试记住】
比如,**panel、按钮、轮播图**、列表等等,都可以提取为**抽象**的组件,复用。
2页面有哪几个模块
3每个模块分成不同的文件然后在index页面中import。

View File

@ -17,6 +17,11 @@
- 上线指导
### 面试相关
模块化设计的关键词:**封装、继承**;把**通用**的模块**先抽象,后具体**,达到**复用**。【面试记住】
比如,**panel、按钮、轮播图**、列表等等,都可以提取为**抽象**的组件,复用。
本文先讲CSS模块化设计。
@ -40,7 +45,7 @@
上图中,整体指的是“布局”。
- **先抽象再具体**
- **先抽象再具体**【重要】
@ -48,6 +53,12 @@
上图中,先看整体的布局,有哪些版块;具体的版块中,有横向列表、纵向列表;最后再是功能。
比如,**panel、按钮、轮播图**等等,都可以提取为**抽象**的组件,复用。
**总结:**
@ -203,7 +214,7 @@ PS如果设置了不允许用户缩放那么最小缩放和最大缩放就
1利用`viewport`和设备像素比,调整基准像素。
2利用`px2rem`自动转换css单位。
2利用`px2rem`自动转换css单位。我们需要将移动端的字体,从 px转换为 rem。
## SAP设计

View File

@ -0,0 +1,69 @@
## 需求分析
京东金融首页的需求分析如下:
- 头部
- 轮播图
- 新手特权
- 极速借贷
- 理财精选
- 新品推荐
- 生活服务
- 在线客服
- 公司介绍
- 导航条
20180308_1953.png
目前大多数设计稿的尺寸是iPhone5320*568。
拿到设计稿后,要先做架构:
### 组件化设计
### 按钮
俺就可以设计成抽象的组件。
我们要先给它一个**默认**类名,然后**允许传递进来一个自定义**的类名,这样就实现**继承**了;让自定义的类名去**覆盖**默认的样式,就实现了**复用**。
### panel
### 轮播图
Vue有一些常用的组件可以直接拿来用比如`vue-awesome-swiper`。链接:<https://www.npmjs.com/package/vue-awesome-swiper>
定义一个抽象的轮播图然后把轮播图的图片和跳转的url作为参数传递。
### css module
这个组件有一个类名,另外一个组件可能还有个同名的,为了防止冲突,可以使用命名空间。
### 第三方的自适应解决方案
hotcss<https://github.com/imochen/hotcss>

View File

@ -0,0 +1,101 @@
## 前言
上线指导包括:
- **生产构建**:合并、抽取、压缩、调试。
- **发布部署**提交、部署、开启gzip压缩、更新CDN。
下面来讲一下。
## 生产构建
生产构建包括:
- 合并style、js
- 抽取样式要从javaSCript中抽取出来
- 压缩JS、CSS都要压缩。
- 调试开启SourceMap。
下面分别讲一下。
### 合并、抽取
我们发现,首页引入了很多`<style>`css
原因很简单:
- 浏览器会先渲染head部分因此css在渲染的时候通常是放在head部分。
- js部分是放在body部分如果css和js混在一起了会导致js的体积比较大。
编译出生产环境下的dist
```
npm run build
```
### 压缩
给生产环境的代码做压缩工作。
js压缩用webpack官网提到的[`Minification`](https://doc.webpack-china.org/guides/production/#minification),推荐的插件是`UglifyJSPlugin`。指导链接:<https://doc.webpack-china.org/plugins/uglifyjs-webpack-plugin>
css压缩用css loader。
### 调试
如果要让线上的代码支持**线上调试**,就要开启**sourceMap**。指导链接:<https://doc.webpack-china.org/guides/production/#source-map>
## 发布部署
发布部署包括:
- 提交
- 部署
- 开启gzip压缩
- 更新CDN
### 提交
使用Git提交代码管理线上版本。
### 部署
php、java等服务器端从Git仓库拉去代码依次部署到小流量、单机房、跨机房、全量部署。
流程是这样的前端人员提交代码到Git仓库后端或者运维人员负责部署代码。后端人员先把代码部署到小流量一台机器上供前端人员测试如果没有问题就开始部署单机房等等。
### gzip压缩
gzip一般是服务器端在Ngix就配置好了但是前端人员一定要检查确认一下 css 文件和 js文件有没有开启gzip压缩避免服务器端人员把这个漏掉了。
### 更新CDN
CDN的更新有很多种方式。 方式一一般情况下CDN厂商会给业务方提供CDN更新的接口。方式二有的情况下会采用自动更新。不管是哪种方式一定要检查线上的CDN的源代码是否更新了。
比如说代码中修复了某个bug或者增加了新功能如果某个地方的CDN没有更新就会导致**那一片区域**的用户无法访问到你的新代码 or 新功能。