301 lines
5.4 KiB
Markdown
301 lines
5.4 KiB
Markdown
|
||
|
||
## 前言
|
||
|
||
|
||
|
||
>印象最深的就是模块化设计，自适应方案，SPA设计的讲解以及webpack如何自己构建的方法和思想。
|
||
|
||
|
||
> 自适应方案设计和CSS模块化绝对是特色内容。
|
||
|
||
### 组件化的现状
|
||
|
||
- 组件化缺乏**方法论**。组件化没有严格的定义。虽然大家都在用框架，但什么情况下定义一个组件，什么情况下不定义一个组件，缺乏方法论。
|
||
|
||
- 组件化的**设计**不合理。组件划分过细，组件数量很庞大；组件数量少，导致项目的**抽象设计和复用性设计**达不到理想的效果。
|
||
|
||
- 组件化的**战斗力**体现不足。我们开发的目的是：让开发的敏捷度更高、开发效率更高、复用性设计、业务开发的组合能力更强，给团队带来更大的战斗力。如果组件化的设计不合理，就...
|
||
|
||
|
||
|
||
### 本项目特色
|
||
|
||
- 组件化的思维方式及项目设计
|
||
|
||
- **组件化和模块化**不仅仅是 js，也包括 css。
|
||
|
||
- 如何将项目作出两点，面试又如何表现
|
||
|
||
- 学会独立构建一个项目，做到独当一面
|
||
|
||
|
||
### 本项目内容
|
||
|
||
- 业务开发流程回顾
|
||
|
||
- 技术选型分析
|
||
|
||
|
||
- 工程构件安装
|
||
|
||
- 项目设计及原理分析
|
||
|
||
### 开发模块
|
||
|
||
- 首页开发
|
||
|
||
- 理财开发
|
||
|
||
- 白条开发
|
||
|
||
- 众筹开发
|
||
|
||
- 专题页开发（活动专题）
|
||
|
||
- 构建工具
|
||
|
||
|
||
|
||
### 项目收益
|
||
|
||
- 掌握CSS模块化技术及模块化设计
|
||
|
||
- 组件化的概念并不陌生，如何在一个复杂的项目中把组件化设计的灵活才重要
|
||
|
||
- 学习项目和vue的相关用法
|
||
|
||
- 学习前端项目的自动化构建
|
||
|
||
|
||
## 项目的开发环境及版本
|
||
|
||
> 前端行业里，最常用的技术栈是：HTML5/CSS3 + ES6 + vue/react + Webpack + Sass。
|
||
|
||
|
||
### 运行环境
|
||
|
||
1、**nodejs**：Node 8.9.1。建议使用 nvm 管理 Node版本。
|
||
|
||
- nvm 的windows版：<https://github.com/coreybutler/nvm-windows>
|
||
|
||
- nvm 的 mac 版：<https://github.com/creationix/nvm>
|
||
|
||
2、 **Git**。
|
||
|
||
Git简易基础：<http://www.bootcss.com/p/git-guide/>
|
||
|
||
3、**chrome**：v62+
|
||
|
||
4、**Webpack** 3.10.0。
|
||
|
||
- Webpack中文文档：<https://doc.webpack-china.org/>
|
||
|
||
|
||
### 构建环境
|
||
|
||
1、**Webpack 3.10.0**
|
||
|
||
2、**npm scripts**
|
||
|
||
- 利用`npm`做任务管理：<http://ruanyifeng.com/blog/2016/10/npm_scripts.html>
|
||
|
||
3、**babel**。`babel`是ES6必备的工具之一。
|
||
|
||
- <https://babeljs.cn/docs/usage/polyfill>
|
||
|
||
- [文章 | ES6和Babel你不知道的事儿](http://www.imooc.com/article/21866)
|
||
|
||
|
||
### 编辑器
|
||
|
||
1、Atom。
|
||
|
||
2、**ESLint**。代码的质量和规范检查的工具。
|
||
|
||
- <http://eslint.cn/docs/user-guide/configuring>
|
||
|
||
|
||
在Atom中可以安装如下插件：
|
||
|
||
- `linter-eslint`：语法检查
|
||
|
||
- `Atom Beautify`：代码格式化
|
||
|
||
|
||
- `Emmet`：快速完成html的输入
|
||
|
||
- `Snippets`快速生成 js 代码片段。
|
||
|
||
|
||
|
||
### 相关基础知识
|
||
|
||
|
||
1、ES6。
|
||
|
||
- <http://es6-features.org/#Constants>
|
||
|
||
2、Sass。
|
||
|
||
- <http://sass.bootcss.com/>
|
||
|
||
3、Vue.js
|
||
|
||
- <https://cn.vuejs.org/>
|
||
|
||
|
||
## 业务开发流程
|
||
|
||
业务开发流程包括以下四个方面。
|
||
|
||
### 技术选型
|
||
|
||
**1、构建工具**：
|
||
|
||
构建工具包含；gulp、grunt、webpack、fis、prepack、rollup。
|
||
|
||
|
||
gulp、grunt、webpack三者的区别：
|
||
|
||
- gulp或grunt：本质是做任务的**分配和管理**。webpack：本质是做**编译和打包**。
|
||
|
||
- gulp或grunt编译的时候，其实还是调用的Webpack。
|
||
|
||
- grunt比gulp问世要早。现在基本是用的gulp，因为gulp是做流处理，不会频繁的写文件和读文件。
|
||
|
||
`fis`：是百度内部推荐的构建的集成方案。
|
||
|
||
`prepack`： facebook的代码优化方案。有一些局限性，可以关注后续的动作。
|
||
|
||
`rollup`：和prepack类似。但是现在webpack中也加入了rollup的功能。
|
||
|
||
|
||
**为什么要用构建工具**：资源压缩、静态资源替换、模块化处理、编译处理。（如果人工来做这些事情，会很繁琐，显然要用构建工具）
|
||
|
||
**本项目用什么构建工具：**用`Webpack`做编译打包，用`npm scripts`做任务管理（可以对比下gulp）。
|
||
|
||
|
||
|
||
|
||
2、**MVVM框架选择**：
|
||
|
||
如果大家都是后端出身的，可以考虑用Angular。
|
||
|
||
看框架的作者维护的热度。如果框架本身有问题，首先需要他们来维护。
|
||
|
||
看业务是能达到业务和性能的要求。
|
||
|
||
|
||
|
||
|
||
|
||
**3、模块化设计**
|
||
|
||
CSS模块化设计：
|
||
|
||
20180308_1101.png
|
||
|
||
|
||
比如，两个按钮，都用了一个className。比如，代码怎么复用。
|
||
|
||
JS模块化设计：
|
||
|
||
20180308_1106.png
|
||
|
||
|
||
比如：
|
||
|
||
- `common.js`放账号登录的信息，这个是整个公司所有的大项目**通用**的。
|
||
|
||
- `layout.js`：抽象出来的布局。给子类 page1 和 page2用。
|
||
|
||
|
||
|
||
|
||
|
||
**4、自适应方案设计**：
|
||
|
||
|
||
20180308_1110.png
|
||
|
||
如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。
|
||
|
||
|
||
|
||
|
||
|
||
**5、代码维护及复用性设计的思考**：
|
||
|
||
- 需求变更
|
||
|
||
- 产品迭代
|
||
|
||
- bug定位
|
||
|
||
- 新功能开发
|
||
|
||
|
||
### 业务开发
|
||
|
||
|
||
### 测试验证
|
||
|
||
### 发布上线
|
||
|
||
|
||
|
||
## 工程构建安装
|
||
|
||
|
||
### 下载工程文件
|
||
|
||
项目地址：<https://github.com/cucygh/JDFinance>
|
||
|
||
|
||
### 安装调试
|
||
|
||
（1）在node环境下，安装项目所依赖的package：
|
||
|
||
```
|
||
cd JDFinance
|
||
|
||
npm install
|
||
```
|
||
|
||
如果安装的很慢，可以使用淘宝的镜像。
|
||
|
||
（2）切换到setup分支：
|
||
|
||
```
|
||
git checkout setup
|
||
```
|
||
|
||
|
||
本项目所有的模块（setup、home等模块）都用分支管理。
|
||
|
||
|
||
（3）启动服务：
|
||
|
||
```bash
|
||
npm start
|
||
```
|
||
|
||
目的是：通过浏览器访问当前的页面。效果如下：
|
||
|
||
20180308_1145.png
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|