小课堂（web开发）

web开发步骤：理解分析需求，UI界面结构拆解，功能逻辑分析实现

需求分析理解：

1. 拿到新需求后，整体层面上去理解掌握所需开发界面跟功能。
2. 一次版本迭代，无论需求多与少，都当成一个完整的项目，要对web端的当前版本的需求有全局的理解跟把控。首先要知道有哪些页面，哪些功能要开发的；其次，这次需求采用什么架构去实现，页面适配跟网络请求以及项目结构应该怎么处理；然后，考虑界面功能之间有什么关联，可以以什么样的形式进行界面功能之间的数据传递或者关联；

界面分析拆解

拿到UI设计图后，在开发之前，可以现在对界面的结构进行拆解分析，即将UI界面在脑中进行一次标签化，将界面转换成对应的标签结构以及布局实现，这样可以做到在开发的时候，对界面有准确的把握。因为事先已经分析过了如何将界面转换成对应的标签跟布局，所以在开发的时候，基本上是只需要调整部分细节即可，可以明显的提高开发的效率。

需要注意的是：

1. 在进行界面拆解的时候，结构要合理，避免过多的嵌套跟浮动。尽量在自己的能力范围内缩减到最精简，但是如果是必要的嵌套则不用刻意去精简，从而增加布局难度。
2. 在转换成标签的时候也要考虑布局，转换成标签后，下一步就是对布局样式的分析跟实现。
3. 要做到在开发的时候，对于布局的实现已经事先掌握了具体的样式，代码编写完成后基本上的布局已经完成，只需要调整部分细节即可，而不是在开发的时候再去一个个的尝试。
4. 其实就是要实现在心中运行一次代码，而这次代码的运行是基于自身对布局样式的理解，可以有效的提高对布局样式的理解跟开发效率。

注：在布局上面，浮动，定位，弹性布局等都能按照需要去使用。可以多思考相同布局的不同实现方式，多对比不同实现方式的代码情况跟兼容情况，可以灵活的去使用。

如：像这样子的一个组件我们应该怎么去分析跟拆解？

TIM截图20180918104611.png

功能逻辑分析

在界面布局静态实现后，我们开始接入js去调用接口，添加事件，增加交互逻辑等工作。

最先可以先实现交互逻辑，因为交互逻辑可以跟接口数据进行解耦，所以在接口未完成的情况下可以先完成交互这一部分。

交互这一块主要需要考虑如何实现交互效果跟数据之间的传递。
最简单的例子就是点击列表中的某一项进行页面跳转，此时我们需要考虑，点击事件的绑定是要通过什么方式去实现，是onClick还是addEventListener或者以事件委托的形式。然后再结合数据的加载情况，是仅加载一次的有限项列表还是可多次加载的有限项列表。再结合列表项的渲染方式，是通过string的拼接然后渲染到对应的父标签中，还是基于数据绑定的形式，或者其他方式。还有就是事件调用时，是否需要传递参数以及参数应该通过什么样的形式去传递，是直接在onClick方法中去绑定参数还是说以属性的形式绑定在对应的标签上，然后在调用的时候去获取。最后就是点击事件的绑定范围，应该将事件绑定在哪一个标签上才合适，这个就取决于可点击范围的大小，是整项都可以点击还是其中的某个标签才可以点击。

复杂一点的就是，点击某一项会改变其他组件的状态（显示，数据）。除了上面提及到的部分，还需要考虑组件显示隐藏，是通过jquery的hide or show方法去实现，还是通过切换class去实现。如果组件的display是flex等布局的话，不可以简单的使用hide or show。应该结合隐藏显示的方法跟组件布局去做合适的选择。其次就是数据部分，非父子关系的组件在进行数据交叉改动的时候，应该确保改动只针对所需要的数据源，不会改动到其他数据源。然后数据的获取，修改，重新渲染的过程要保证准确无误，使用恰当的方法去处理对应的数据。要求应该对number，array，string，object的方法有个全面的理解，应该知道有哪些方法可以选择，采用最恰当的方法去实现。除去js本身的API的部分，在逻辑方面也应该多加锻炼跟思考总结。对于常见需求的应该有自己的总结跟处理逻辑。再基于这些去优化跟增加自己手上的方案跟套路。形象点说就是要知道并且拥有自己的武器，在对付不同需求的时候可以有得选择，并且不断地去增加跟优化自己的武器。

然后就是接口部分，接口调用后的处理也是要养成一个习惯，要对成功跟失败的情况都做了对应的处理。然后就是在数据处理部分，常见就是返回的数据是个数组或者对象，然后要基于数组去遍历或者获取对象中的某个值，渲染对应的数据到对应的标签中。在处理数据方面应该多想想应该怎么去做，其实也就逻辑思维要多去强化，可以网上做一些逻辑思维的题目锻炼下。然后就是处理完的数据要渲染到标签中，是只渲染文本节点还是整个标签包括文本节点都去渲染，选择合适并且简单的方式去做。

总结

加强逻辑思维，打造自己的武器，转换思维，要把自己当成项目负责人去做项目，虽然不是全部模块都是开发，但是应该知道整体项目是怎么样的，不要等需求分配下来，多思考，多总结，要对项目有整体的把握，以及开发前进行分析，选择合适的方式去开发，提高开发效率，把握开发进度跟时间，争取提前完成，剩下的时间做测试跟优化。