2020-07-22 html导航布局 + css两端对齐 + JS的下载文件方式 + 软技能前端代码的抽象

2020-07-22 题目来源：http://www.h-camel.com/index.html

[html] 写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位

思路： 可以修改导航的position属性，当滚动高度达到一定条件时，设置position： fixed； top: 0;来实现固定。反之，恢复position: static;

参考文章：https://www.cnblogs.com/ron123/p/8645804.html

[css] 用css实现两端对齐text-align: justify有什么不足之处？

text-align属性是用来控制文字的对齐方式的。 text-align:justify; 含义为文字两端对齐。
主要作用是控制inline水平元素或inline-block元素的对齐与显示的，例如嵌套行内标签的文字、图片、input控件等。但是对于block水平元素就没有作用。

p {text-align: justify;text-indent: 2em;width: 100%;}
img {width: 100%;margin-bottom: 10px;}

是像命运一样的东西，引领这我来到今天的位置上，与卢武铉律师相遇，一直到今天，这一切仿佛都是命中注定，他在遗书中说“都是命运”，我何尝不是如此呢？
    
    

说明：上述代码中，文字超出一行，最终效果是最后一行文字的字间距会变大，强行两端对齐。
解决：1.抽出img标签到p标签外部； 2.设置img为display: block;

原文链接：https://www.cnblogs.com/xuzhudong/p/7228087.html

[js] 前端下载文件的方式有哪些？

1. 通过文件地址下载，a标签
2. 已知文件内容，通过URL.createObjectURL()下载文件
3. 已知文件内容，通过FileReader.readAsDataURL()下载文件

原文链接：https://blog.csdn.net/hfhwfw161226/article/details/105700504 附demo

[软技能] 前端代码你是如何做抽象的？

抽象化，就是从具体问题中提取出具有共性的模式，使用通用的方法加以处理。
原则：
DRY是 Don't repeat yourself 的缩写，意思是"不要重复自己"
YAGNI是 You aren't gonna need it 的缩写，意思是"你不会需要它"。
Rule of three 称为"三次原则"，指的是当某个功能第三次出现时，才进行"抽象化"