一个小demo,感受大厂的编程素养 确定不进来看看嘛

一个前端小demo，里面蕴藏了很多大厂的知识点

demo展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机解锁</title>
    <script src="./base.js"></script>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
     <!-- BEM Block  Element  Modifier -->
    <div class="page">
        <div class="page__hd">输入密码</div>
        <div class="page__bd">
            <!-- Block -->
            <div class="content">
                <div class="content__left">
                    <div class="number">1</div>
                    <div class="number">4</div>
                    <div class="number">7</div>
                </div>
                <div class="content__mid">
                    <div class="number">2</div>
                    <div class="number">5</div>
                    <div class="number">8</div>
                    <div class="number">0</div>
                </div>
                <div class="content__right">
                    <div class="number">3</div>
                    <div class="number">6</div>
                    <div class="number">9</div>
                </div>
            </div>
        </div>
        <div class="page__ft">
            <div class="page__call">紧级呼叫</div>
            <div class="page__cancel">清除</div>
        </div>
    </div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.page {
  height: 100%;
  overflow: hidden;
  background-image: url("https://images.unsplash.com/photo-1440613905118-99b921706b5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=255b304482a2f50d0917f3de7b06251e%27");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
}
.page .page__hd {
  color: #000;
  font-size: 0.46rem;
  width: 1.86667rem;
  height: 0.555rem;
  margin: 2.96rem auto;
}
.page .page__ft {
  display: flex;
  padding-top: 0.59rem;
  margin-bottom: 0.259rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.444rem;
}
.page .page__ft .page__call {
  flex: 1;
  margin-left: 0.25rem;
}
.page .page__ft .page__cancel {
  width: 1.88rem;
}
.page .content {
  width: 6.96rem;
  display: flex;
  margin-left: 1.45rem;
}
.page .content .number {
  width: 1.62rem;
  height: 1.62rem;
  line-height: 1.62rem;
  border-radius: 50%;
  border: 2px solid #81969c;
  text-align: center;
  font-weight: 100;
  color: #e8ffff;
  margin-bottom: 0.72rem;
}
.page .content .content__mid,
.page .content .content__left {
  margin-right: 1.03rem;
}

//提供一个适配所以机型的rem工具  //  1. 屏幕宽度
// 2. html
 // 3. fontsize
 //  立即执行函数
 // ipad  
 //  DRY   dont repeat  yourself
 (function () {
 //   html  动态设置font-size
//   函数作用域
//   变量  ，不会被污染外面的
    var htmlElement = document.documentElement
    function getFontsize() {
    var width = document.documentElement.clientWidth//  或者  window.innterwidth
    var fontSize = width / 10
    return fontSize
        }
     htmlElement.style.fontSize = getFontsize() + 'px'
    window.addEventListener('resize', function () {
    htmlElement.documentElement.style.fontSize = getFontsize() + 'px';
    })
    })()

这是一个手机锁屏的demo，大家查看的时候记得调成手机模式哦。

这个demo里面到底是如何完成的呢？

html主体的架构

先写主体再写样式，这是大厂编程的素养。所以在写一个这样的demo之前我们肯定是先写好一个大体的html结构。首先分析一下，该怎么去写这个主体。可以分成三部分，按照块级元素的划分，输入密码一部分，密码主体一部分，下面的紧急呼救和清除一部分。然后再去细分化。

• 注意要点 取名要规范 BEM取名法(团队取名规范统一）

css样式

先主体再样式，现在轮到写样式了，那样式里面又有什么需要注意的地方呢？

• 单位 我们写的demo是手机屏幕，那需要考虑什么问题呢？那就是要适合所有的机型，所有单位就尤为重要！！！ 我们的单位用的都是rem(rem是相对单位，可以根据根元素进行调整比如 html{font-size:16px;} ，1rem相当于16px。）

• 更加先进的工具，让css样式事半功倍

看到这个.styl格式的文件嘛，我们可以在这里书写样式，自动生成到css的文件里面，这种书写方式可以省去很多冒号，大括号等各种符号（提前下班和小姐姐吃饭 开心）

这是在styl里面的书写格式，缩进决定了层级关系。书写更便捷。 关于styl的安装和使用我们下次再细谈，保证用了绝对爱不释手。

js 自己封装函数 顶级大厂的素养 制作一个适合所有机型的rem工具

我们说rem是相对根元素大小的，如html的根元素是16px,则1rem=16px，但是不是所有的机型根元素大小都是一样的，那我们css里面写的大小不就不能用嘛，所以我们要用js实现一个试配工具，当然有大厂封装的可以直接用，但是想进大厂就得自己手写出来。

• 思路
  • 屏幕宽度
  • html
  • 修改font-size
• 要点
  • 使用立即执行函数 不写变量名，防止污染其他的函数
  • 不要重复造轮子，相同的用一个变量保存，提高复用率
  • 函数封装，代码超过10行就要考虑封装起来，提高代码利用率和复用性。 切记 do not repeat yourself.

好啦！！！ 一个极具大厂素养的小demo送给大家，周密愉快。