Web前端最全《从案例中学习JavaScript》之实现网页版阅读器，web前端面试八股文在哪刷

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

.phone .container{

overflow-x: hidden;

overflow-y: auto;

width:90%;

background:#ccc;

height:456px;

font-size:14px;

text-align:left;

background:#dcf3dc;

font-family:微软雅黑;

color:#555;

line-height:28px;

padding:16px;

text-indent: 2em;

padding: 16px 16px 0px 16px;

}

OK，现在可以把父容器的背景色给去掉了。

background: #66CC00; //去掉

为了把手机模型做得更像一点，我们手动给它加一个按钮，额，就手动画一个吧。

.back {

width: 30px;

height: 30px;

position: absolute;

left: 50%;

margin-left: -15px;

border: 2px solid #c7bcbc;

top: 4px;

border-radius: 50%;

}

虽然span是行内元素，但是因为我们给它设置了 position: absolute ， 所以宽度和高度依然是起作用的。

我也是在写这个案例的时候无意中发现的，我以前一直以为需要手动给行内元素升级为块级元素才行。

这样，我们的页面布局差不多久完成啦。

#####2. 文字部分设计与美化

接下来，我们给阅读器模拟一些数据。

刀剑神域

在一群好奇心旺盛的高手花了整整一个月测量后，发现最底层区域的直径大约有十公里，足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层，其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原，甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座，阶梯还都位于充斥怪物的危险迷宫区域之中，因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层，上下层各都市的「转移门」便会连结起来，人们也就可以自由来去两个楼层之间。

经过两年的时间，这个巨大城堡就这样被逐渐地往上攻略，目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人，充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖，浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线，好不容易缩短了长度。同时，似乎有只冰冷的手掌，抚摸过我胸口深处。

横线——那称为HP条的蓝色条状物，可以看出我的生命残值。虽然它还有八成左右的残值，但不能把事情看得太过于乐观。因为相对来说，我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前，我就先往后跳开一大步，以保持与敌人之间的距离。

「呼……」

硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气，但在另一边，也就是躺在真实世界里的真正身体，现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗，心跳也加速到破表了吧。

这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象，减少的也只是数值化的生命值，但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看，这场战斗真是相当不公平。因为，眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外，还有着蜥蜴头与尾巴的半人半兽怪物，不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次，都可以由系统无限重生的数字文件档案集合体。

不对。 目前，操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式，用以不断提升自己的应对能力。但这些学习档案，在该个体消灭后便会重置，而且不会反馈到下次出现在这个区域的同种个体上。

滚动条的样式不太美观，我们将其美化一下

/** 滚动条样式美化 */

::-webkit-scrollbar{width:5px;height:6px;background:#ccc;}

::-webkit-scrollbar-button{background-color:#e5e5e5;}

::-webkit-scrollbar-track{background:#999;}

::-webkit-scrollbar-track-piece{background:#ccc}

::-webkit-scrollbar-thumb{background:#666;}

::-webkit-scrollbar-corner{background:#82AFFF;}

::-webkit-scrollbar-resizer{background:#FF0BEE;}

scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}

scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}

scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}

这样就好看多了。

标题部分有一点突兀，我们给出四条美化的建议：

1. 标题居左对齐

2. 底部画一条线，与小说正文分开，并且空开一些。

3. 字体颜色稍微淡一些，不要太黑

4. 字间稍微距大一些

于是

.phone .container h4 {

text-indent: 0;

margin-bottom: 1em;

color:#736357;

border-bottom:1px solid #736357;

letter-spacing: 2px;

}

这样好看一些了吧，当然，每个人审美观不同啦，你也可以调成自己喜欢的样式。

段落之间和文字间距都太小了，我们也调一下，不要那么小气嘛，哈哈。

.phone .container p {

margin-bottom: 15px;

letter-spacing: 2px;

}

恩，好多了。

#####3. 引入向上的箭头图标

我们准备了一张半透明的箭头图标，现在将其引入。

刀剑神域

在一群好奇心旺盛的高手花了整整一个月测量后，发现最底层区域的直径大约有十公里，足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层，其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原，甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座，阶梯还都位于充斥怪物的危险迷宫区域之中，因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层，上下层各都市的「转移门」便会连结起来，人们也就可以自由来去两个楼层之间。

经过两年的时间，这个巨大城堡就这样被逐渐地往上攻略，目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人，充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖，浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线，好不容易缩短了长度。同时，似乎有只冰冷的手掌，抚摸过我胸口深处。

横线——那称为HP条的蓝色条状物，可以看出我的生命残值。虽然它还有八成左右的残值，但不能把事情看得太过于乐观。因为相对来说，我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前，我就先往后跳开一大步，以保持与敌人之间的距离。

「呼……」

硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气，但在另一边，也就是躺在真实世界里的真正身体，现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗，心跳也加速到破表了吧。

这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象，减少的也只是数值化的生命值，但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看，这场战斗真是相当不公平。因为，眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外，还有着蜥蜴头与尾巴的半人半兽怪物，不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次，都可以由系统无限重生的数字文件档案集合体。

不对。 目前，操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式，用以不断提升自己的应对能力。但这些学习档案，在该个体消灭后便会重置，而且不会反馈到下次出现在这个区域的同种个体上。

样式如下：

.phone .container #toTop {

width: 40px;

height: 60px;

display: inline-block;

position: absolute;

background: url(top.png) no-repeat;

background-size: 100%;

bottom:80px;

right: 15px;

opacity: 0.7;

}

引进来了。

#####4. js控制

我们通过jQuery的animate方法来实现回到顶部的动画，实现该功能的核心逻辑就是控制滚动条距离顶部的高度，也就是scrollTop，让它变为0就可以了。

//单机图标直接返回顶部

$(‘#toTop’).on(‘click’,function(){

$(‘.phone .container’).eq(0).stop(true, true).animate({ scrollTop: 0},500,function(){

$(‘#toTop’).css({‘opacity’ : 0});

});

return false;

});

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；