写在前面的话
好久没写简书了。4月份从上一家公司离职之后，自学了ES6, 然后对vue等部分进行了查漏补缺，最近在学习写vue的实战项目。今天学的是慕课上的一个关于京东金融的项目。
开始讲的是关于组件化的，觉得讲的很有道理，有必要记录一下。
技术选型
技术选型的分析图
技术选型是项目开始的时候必要的步骤，所谓磨刀不误砍柴工，只有先规划好，后续才好开展，如果不规划直接写，后续如果进行需求更改和迭代的时候，就容易出现问题。
构建工具图
gulp 和 grunt是做任务管理(不能做打包)，gulp比grunt后出来，是流式的，用来取代grunt的弊端，gulp是先读一次，然后之后的操作在内存中进行。不会有写文件的操作。
webpack的功能比较强大(本职是做打包编译)
fis是百度内部出的
prepack是facebook出的代码优化方案，有局限性，取当时编译的值。
MVVM框架的选择
作者对框架的维护热度 > 框架文档详细，是否好用。
框架性能也是选择的点
一旦不维护，上线之后出了问题难以解决。
PS: 选择框架不是看哪个简单哪个来！！！在公司写项目是合作的，不能凭自己喜好来做。
模块化设计
js模块化设计
js的模块化设计图
如上图：
common.js是放公司注册，登录所有项目通用的东西，不是局限于一个页面，而是所有的项目通用的，比如说公司内所有项目通用的登录体系等
layout.js是做布局，比如说A页面可以用这个布局，B页面也可以用，抽象出来的一套布局
public.js是将common.js和layout.js引入进来，这样的话，不同的js都可以引用这个public.js了
util.js提供一些辅助的函数模块
page1.js和page2.js是不同的页面通过模块化设计去引入不同的文件
css模块化设计
除了JS 的模块化设计，CSS的模块化设计也是要考虑的。【很重要】
css模块化设计图
例如上图，比如说btn这个class写在同一个css文件中，比如说大家都叫bth，怎么控制大小，颜色不一样？
中间布局，左边是一栏，右边是两栏，怎么用继承的思维方式来改这个代码，怎么重用css代码，这就是css的模块化设计。
自适应方案设计
自适应方案设计图
设计也是需求的一步，对于设计师来说，拿到需求后出一份设计稿，比如上图，以5S为例，按照这个尺寸来设计，不会管其他尺寸的，给的就一份设计稿，最多出两份设计稿。
做兼容和适配是工程师的事。
对于工程师来说，设计稿是一份，而设备是不一样的；用一份js和一份css， 来解决用一份设计稿在不同设备上有相同的体验
这种自动变的过程是在构建工具中做，而不是自己写，那样比较累。
代码维护及复用性设计的思考
代码维护及复用性设计思考图
需求变更: 考虑到项目的横向扩展能力，交互的耦合与解耦过程，如面板处换成按钮，如果耦合性太强，改东西就会很痛苦。
产品迭代: 可能是A变成A+, 或者是A变成B
Bug定位: 怎样去修复一个bug
新功能开发: 是局部地区，某一个地方增加一个东西，或者是删减一个东西
网友评论