一、如何把一个拿到的需求进行组件化
我原本的操作
没整体思考，边写边看，需要什么就去创建什么,导致的问题就是项目结构乱.大概按视觉图划分，没有将其和整体需求联系起来,导致的问题就是组件关系乱.对于Ant Design VUE组件库不熟悉，面对需求，选择不出最合适的组件，或者不知道该需求是自己写组件方便还是使用组件库的方便,导致的问题就是后期修改组件内部逻辑混乱.
学习改进
- 从UI界面的角度进行划分的，前端的组件化，方便UI组件的复用
- 自己设计的组件需要达到的目的
高内聚:组件内部的一系列相关功能的相关程度的低低耦合:组件之间的相关程度的低可复用
- 正确合理的使用组件库
- 阅读官网，自己去理解每个组件的使用场景
- 组件的样式代码
- 原本的我：看似有层级逻辑关系，实则在写的时候想到了什么就
- 改进的地方：明确结构样式的逻辑，按照样式的规则将类似功能的代码写到一起
二、建设组件之间的逻辑
我原本的操作
- 没有去思考，觉得哪里用到了就在哪里建立关系，导致同一个组件引用了好多次
- 组件多层嵌套，传值的时候把自己搞得晕头转向
- 组件里面自定义的变量过多，导致自己刀子后都不知道那个值代表的是啥意思
改进的地方
- 都用到的组件就引入到其父组件里面，这样，不仅少些好多代码，而且结构很清晰
- 将公用组件和私用组件区分引用
- 少去定义这类型的变量，就算是定义了，标好注释，免的都读不懂
三、编写组件里面的JS代码
我原本的操作
- 代码无顺序结构，写到哪个功能就直接写对应的JS代码
- 没用的代码也不删除，导致到最后自己也不知道有没有用
- 不管是变量还是方法名，命名随心所欲，没什么语义化，还不写注释，最后我也不咋认识他指的是啥意思
- data函数中定义的内容乱七八糟，随心所欲，需要啥就去加啥
- methods中的方法功能不单一，能写多少就写多少
- 不用新的语法、缩写等一个不用，导致代码看起来很长，但是一大行就表达了一个贼简单的玩意
- 不考虑边界值的问题，导致项目在开发数据是OK的，但是一上测试就会出现好多BUG
改进的地方
- 将简单的、确定无疑问的代码一般放到SCRIPT标签的后面
- 在开发的时候，删除无用的代码
- 命名
- CSS
- css 文件名必须使用小写字母
- 选择器必须单词全字母小写,多个单词情况下使用中划线分割
- class选择器必须代表相应模块或部件的内容或功能，不得以样式信息进行命名
- HTML
- html 文件名必须使用小写字母
- 属性值必须用双引号包围
- JS
- 变量名：使用camel命名
- 参数名：使用camel命名
- 函数名：使用camel命名
- 方法/属性：使用camel命名
- 枚举名：使用camel命名
- 类名：使用camel命名
- 私有（保护）成员：必须以下划线_开头
- 常量名：全部大写的下划线命名法，如IS_DEBUG_ENABLED
- 枚举的属性：全部大写的下划线命名法
- 语义化：变量名、类名应当使用名词、函数名应当用动宾短语、boolean类型的应当使用is、has、show等起头,表示其类型
- VUE
- 将data函数中定义的内容按照功能分开写且注释
- 方法里面的功能单一，把一些没用的东西分离出去
- 多用用新的语法，代码简介，结构简单清晰明了
- 考虑边界值和极限操作，尽量把逻辑考虑全面，可能会有的逻辑全部考虑进去，个人是学者画脑图去理解和考虑的。
