今天完成的事情：

今天改了一天样式，杨大佬说的没错，样式真的是硬伤。也不知道之前学了啥，改一点东西感觉好难。。。

之前套了一个可视化工具生成的HTML，用的bs很不好改，换了另一种思路写，直接放弃用栅格布局。发现还好写一点。

下拉菜单重新做了一下，用的bs的，明天试试用angular做一做。

明天计划的事情：

明天小课堂了，又是一个没见过的知识。

遇到的问题：

看了下萝卜多官网的代码，发现写样式，用了很多奇淫技巧，让我怀疑人生。尝试套了几个用在自己的样式上，真的很牛逼。

收获：

‍‍width: calc(100% - 250px);还有这种操作？calc实现精准对其很有效。‍‍

‍‍‍‍calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。‍‍

calc()能做什么？

‍‍calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。‍‍

‍‍calc()语法‍‍

‍‍calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

‍‍.elm {  width: calc(expression);}‍‍

‍‍其中"expression"是一个表达式，用来计算长度的表达式。‍‍

‍‍calc()的运算规则‍‍

‍‍calc()使用通用的数学运算规则，但是也提供更智能的功能：

‍‍使用“+”、“-”、“*” 和 “/”四则运算；

‍‍可以使用百分比、px、em、rem等单位；

‍‍可以混合使用各种单位进行计算；

‍‍表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；

‍‍表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。‍‍

1怎么查找资料：

百度、谷歌搜索引擎直接搜。搜不到答案去技术论坛里面翻。知乎上有时候也会有意外惊喜。搜索关键词加空格加知乎，直接筛选。例如  “如何使用console 知乎” 英语好的可以在github上啃生肉。

2怎么定位问题：

首先，通过经验判断，根据自己踩的坑大概估计下问题范围。比如样式出了问题首先想到缓存，再想到其他，先缩小范围。

第二，个如果有报错，看报错。报错是最直接的问题原因。

第三，如果没有报错，自己打断点调试，在关键地方console。

3怎么解决问题：

定位到问题之后，一般大部分的问题都能很容易解决，除非是不在自己技术范围内。遇到技术难点，可以百度，谷歌。一般自己遇到的坑，别人都踩过。从修真院角度来说，问师兄是捷径，但往往真实环境不会存在这么多捷径，所以能自己解决的，尽量不给别人添麻烦，如果师兄也解决不了，百度也找不到答案，那只能看API文档，看源码，硬着头皮啃，或者把问题先记录下来，过一段时间回头再看，说不定就解决了

4怎么重构代码：

减少UI层的逻辑代码，对业务逻辑层进行封装，分成一个个服务。Angular就是个很好的架构，降低了代码之间的耦合，可以很好的自定义组件，提高复用性，易用性。注意的细节就是一个方法只做一件事，命名要规范有意义不要阿猫阿狗，汉语拼音。多写注释，尤其是自己的代码烂到别人和自己都看不懂的

5怎么选择框架：

怎么选，那得看需求，小项目，迭代少的用轻的，大项目，迭代多的用重的。一般若交互的JQ就可以，强交互的，选Angular/Vue/React。貌似目前最火的就这三个了。Angular架构师后端思想编写的，很稳，Angular大法好。

6怎么测试：

断点调试，单元测试，写用例。一般去测试项目里面的很小的一个小功能，甚至是一行代码。例如测试这个变量取值是什么数据类型，两个变量之间赋值有没有成功。一般都是隔离出来测试的，所以用例是很好的检测手段。