前言

印象最深的就是模块化设计，自适应方案，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你不知道的事儿

编辑器

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）启动服务：

    npm start

目的是：通过浏览器访问当前的页面。效果如下：

20180308_1145.png