## 前言 >印象最深的就是模块化设计，自适应方案，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