前端进阶第7周打卡题目汇总

原创

趣谈前端 2022-01-20 10:47:54 ©著作权

文章标签 css 焦点图 ooc 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者趣谈前端的原创作品，请联系作者获取转载授权，否则将追究法律责任

不知不觉打卡群已经坚持2个月了，希望能陪伴大家持续更长的时间，帮助更多的朋友提高前端水平。接下来赶快进入正题，总结一下第七周的打卡笔记。

前端进阶第7周打卡题目汇总_ooc

星期一

1. 介绍一下css里的设计模式比如BEM,OOCSS的含义和优点

答案:

什么是oocss？

CSS “对象”是重复的视觉模式，可以抽象为HTML，CSS以及可能的JavaScript 的独立代码段。然后可以在整个站点中重复使用该对象. OOCSS的两个主要原则:

结构与皮肤分开. 这意味着将重复的视觉特征（例如背景和边框样式）定义为单独的“皮肤”，您可以将它们与各种对象混合搭配，从而无需太多代码即可实现大量的视觉多样性。将结构和外观分开也可能意味着使用类来命名我们的对象及其组件，而不是仅依赖于HTML的语义。例如，媒体对象用命名class="media"，其组件用class="img"（对于图像/视频组件）和class="bd"（对于正文/文本组件）命名。
容器和内容分开. 本质上，这意味着“很少使用与位置相关的样式”。无论放置在何处，对象都应该看起来相同。因此，不要使用样式特定对象，而是.myObject h2 {...}创建并应用描述问题的类，例如class="book"。这样可以保证：（1）所有未分类的标签看起来都一样；（2）所有具有类别的元素（称为mixin）将看起来相同；(3）当我们想.myObject h2看起来像法线的情况下，无需为这种情况创建替代样式。

优点：

可重用，减少CSS代码体积
选择器简洁易懂
可扩展,可组合,灵活度更大
风格与内容分离,内容与容器分离
更具有语义化,可以独立成库

什么是BEM？

BEM代表块（Block），元素（Element），修饰符（Modifier）。

块是页面中独立存在的区块，可以在不同场合下被重用。每个页面都可以看做是多个Block组成。
元素是构成Block的元素，只有在对应Block内部才具有意义，是依赖于Block的存在。
修饰符是描述Block或Element的属性或状态。同一Block或Element可以有多个Modifier。

风格如下:

.header-card__title {

}
.header-card__active {

}

优点

解决了命名空间的问题
更易懂，方便团队协作开发
更易于维护

2. 用js设计一个网站换肤的功能

方案一: 使用OOCSS模式,通过js动态切换公共类名来达到换肤效果

方案二: 点击不同的按钮切换不同的样式表,如下:

theme-green.css
theme-red.css
theme-black.css 方案三: localStorage存储主题,js动态获取本地存储换肤方案四: element和antd的动态换肤,需要实时编译style样式表

星期二

1. 使用js,在不借助临时变量的情况下进行两个整数的交换

参考答案:

let getRadomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min

2. 使用js,在不借助临时变量的情况下进行两个整数的交换

参考答案:

function swap(a , b) {
  [a, b] = [b, a]
  return [a,b]
}

星期三

1. 使用js实现一个sleep函数

参考答案:

// 在async环境下可以使用sleep实现类似后端的睡眠函数功能
const sleep = (timeout, data) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(data)
    }, timeout)
  })
}

2. 用纯css实现网站背景换肤

参考答案:

<style>
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    .bg1 {
      z-index: 10;
      background-color: #000;
    }
    .bg2 {
      background-color: #06c;
    }
    .bg3 {
      background-color: #f0c;
    }
    .skin-btn-wrap {
      position: absolute;
      padding: 4px 10px;
      border-radius: 20px;
      line-height: 20px;
      background-color: #fff;
      z-index: 11;
      right: 20px;
      top: 20px;
    }
    .skin-btn-wrap a {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 10px;
    }
    #one {
      background-color: #000;
    }
    #two {
      background-color: #06c;
    }
    #three {
      background-color: #f0c;
    }
    .bg:target {
      z-index: 10;
    }
    .bg:not(:target) {
      z-index: 0;
    }
  </style>

  <!-- css背景换肤 -->
  <div class="bg1 bg" id="bg1"></div>
  <div class="bg2 bg" id="bg2"></div>
  <div class="bg3 bg" id="bg3"></div>
  <div class="skin-btn-wrap">
    <a href="#bg1" id="one"></a>
    <a href="#bg2" id="two"></a>
    <a href="#bg3" id="three"></a>
  </div>

星期四

1.函数节流和防抖

[参考答案]

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

function debounce(fn, interval = 300) {
    let timeout = null
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            fn.apply(this, arguments)
        }, interval)
    }
}

节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

function throttle(fn, interval = 300) {
    let canRun = true
    return function () {
        if (!canRun) return
        canRun = false
        setTimeout(() => {
            fn.apply(this, arguments)
            canRun = true
        }, interval)
    }
}

2.用纯css实现焦点图动画

实现思路如下:

建立焦点图和控制点的对应关系
初始化页面时只让第一个焦点图有宽度,其他宽度都设置为零,当控制点激活时,然控制点对应的目标对象的宽度设置为正常值,其他的非目标对象都设置为零
给焦点图添加transition过渡动画
优化焦点图和控制点样式

<style>
    .swiper {
      position: relative;
      margin: 0 auto;
      display: flex;
      width:80vw;
      height: 250px;
      padding: 18px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 0 20px rgba(0,0,0, .2);
    }
    .swiper .img {
      height: 250px;
      width: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width .6s;
      background-color: #06c;
      color: #fff;
    }
    .swiper .img:first-child {
      width: 100%;
    }
    .swiperControl {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 30px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0;
      background-color: rgba(0,0,0, .3);
    }
    .swiperControl .dot {
      display: inline-block;
      margin: 0 6px;
      width: 8px;
      height: 8px;
      border-radius: 6px;
      background-color: rgba(255,255,255, .6);
    }
    .swiperControl .dot:hover {
      background-color: rgba(255,255,255, 1);
    }
    .swiper .img:target {
      width: 100%;
    }
    .swiper .img:not(:target) {
      width: 0;
    }
  </style>
  <div class="swiper">
    <div class="img" id="img1" style='background: #06c'>我</div>
    <div class="img" id="img2" style='background: #f0c'>爱</div>
    <div class="img" id="img3" style='background: #000'>你</div>

    <div class="swiperControl">
        <a class="dot" href="#img1"></a>
        <a class="dot" href="#img2"></a>
        <a class="dot" href="#img3"></a>
      </div>
  </div>