发表于: 2017-07-08 20:25:50

1 939


今天完成的事情:

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

之前套了一个可视化工具生成的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怎么测试:

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



返回列表 返回列表
评论

    分享到