2024年最新Web前端期末大作业---HTML+CSS+JS实现的翻纸牌记忆游戏(1)，4面阿里拿到P7Offer

总结:

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

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

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

Tips:

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

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

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

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

CSS样式：

@import url(“https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,900&display=swap”);

• {

box-sizing: border-box;

padding: 0;

margin: 0;

}

body {

min-height: 100vh;

color: hsl(340, 5%, 20%);

background: url(‘data:image/svg+xml;utf8, ’), hsl(340, 10%, 5%);

font-family: “Noto Sans JP”, sans-serif;

font-weight: 400;

padding: 100px 0 0 0;

}

main.svelte-185gx00 {

margin: 1rem auto;

width: 90vw;

max-width: 700px;

display: grid;

grid-template-columns: repeat(auto-fit, 140px);

grid-auto-rows: max-content;

grid-gap: 1rem;

justify-content: center

}

div.svelte-1nxkdr7 {

position: fixed;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

z-index: 5;

background: hsla(0, 0%, 10%, 0.5);

backdrop-filter: blur(1px)

}

section.svelte-1nxkdr7 {

padding: 3rem 3.5rem;

background: url(‘data:image/svg+xml;utf8, ’), url(‘data:image/svg+xml;utf8, ’), hsl(0, 0%, 100%);

background-size: 30%;

background-position: 0% 100%, 100% 100%;

background-repeat: no-repeat;

text-align: center;

border: 0.75rem solid hsl(340, 70%, 50%);

border-radius: 15px;

box-shadow: 0 2px 10px -5px hsla(0, 0%, 0%, 0.2)

}

h1.svelte-1nxkdr7 {

text-transform: uppercase;

margin-bottom: 1.25rem;

font-weight: 800

}

button.svelte-1nxkdr7 {

font-weight: 800;

padding: 1.25rem 1.5rem;

border: none;

color: inherit;

background: url(‘data:image/svg+xml;utf8, ’), url(‘data:image/svg+xml;utf8, ’), url(‘data:image/svg+xml;utf8, ’), url(‘data:image/svg+xml;utf8, ’);

background-size: 2rem;

background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;

background-repeat: no-repeat;

font-family: inherit;

font-size: 1.1rem;

text-transform: uppercase;

letter-spacing: 0.05rem

}

article.svelte-1m66100 {

position: relative;

padding: 2rem;

border-radius: 20px;

width: 140px;

height: 165px;

transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);

transform: perspective(800px) rotateY(0deg);

transform-style: preserve-3d

}

.flip.svelte-1m66100 {

transform: perspective(800px) rotateY(180deg)

}

.paired.svelte-1m66100 {

animation: svelte-1m66100-pair 0.25s 1s ease-in-out 2 alternate

}

@keyframes svelte-1m66100-pair {

25% {

transform: rotateZ(-5deg)

}

75% {

transform: rotateZ(5deg)

}

}

.face.svelte-1m66100,

button.svelte-1m66100 {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: inherit

}

button.svelte-1m66100 {

background: none;

border: none

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

d: none;

border: none

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

[外链图片转存中…(img-Ga6mgzxa-1715716877810)]