forked from theluyuan/Web
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
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|