[ 遇坑总结 ]记一次移动端开发（2）

最新推荐文章于 2021-02-03 20:43:42 发布

「已注销」

最新推荐文章于 2021-02-03 20:43:42 发布

阅读量199

点赞数

分类专栏： #遇坑 Web前端文章标签： CSS变量变量提升前端实现弥散阴影前端

本文链接：https://blog.csdn.net/sunshine_kevin/article/details/101478765

版权

Web前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

#遇坑

2 篇文章 0 订阅

订阅专栏

上一篇文章记一次移动端开发（1），我写了这次移动端开发的两个大方面，一个是 meta 标签，一个是flex布局和 vw、vh、rem单位，这篇文章呢，我就再说一些小的点，都是开发过程中遇到的小问题，总结一下，也希望可以帮到大家。

CSS中的 `visibility: hidden`;

hidden 之后的元素，会透明，但是依旧占据空间。

要注意的是，由于冒泡的原因，可以透过 hidden 的元素对下方的元素进行DOM操作

CSS变量

页面load之后，JS无法直接通过下面代码取到值，我也查了很多，但是没有查到，如果有朋友了解，可否在下方评论区写一写，一起进步，嘿嘿

document.documentElement.style.getProperty("--val");

但这并不是不能解决，我是在页面load之后，用JS先给该CSS变量设置一个值（方法是用setProperty），之后也就都合适了，不过真正的项目中，还是用less之类的比较方便。

变量提升

变量提升只会提升变量的声明，不会提升变量的赋值，如下面代码

console.log(val);
var val = 1;

运行后并不会报 ReferenceError 的错误，而是 undefined，这段代码在内部会转换成下面这样

var val;
console.log(val);
val = 1;

对于函数，也会有变量提升，但是只有函数声明才会有 function func( ){ }，函数表达式并不会有 var func = function( ) { }

弥散阴影

这个可能有些工作的朋友是了解的，设计师给的图就可能使用了这个玩意，先看看啥是弥散阴影吧

就是这个，它不同于我们经常使用的 box-shadow，它不是线性的，而是一个纯粹的元素。这里有一个用PS做的步骤，简单三步制作出这种精美弥散阴影效果，相信大家看了就完全明白了

至于实现方法，我想了两个

使用 CSS 伪元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>弥散阴影</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            border: 0px; outline: none; display: inline-block; padding: 30px 100px; margin: 100px 200px;
            background: linear-gradient(to left, #fa6c9f 0%, #ffe140 80%, #ffe140 80%); 
            border-radius: 1000px; color: #ffffff; letter-spacing: 1px; font-size: 60px; position: relative;
        }
        .box:before {
            content: ""; background: inherit; width: calc(100% - 60px); height: 60px; border-radius: 1000px;
            display: inline-block; position: absolute; left: 30px; bottom: 0; z-index: -1; filter: blur(30px) brightness(0.95);
        }
    </style>
</head>
<body>
    <div>
        <button class="box">弥散阴影</button>
    </div>
</body>
</html>

在有些情况下，比如这里的 div 为 relative ，或者 button 使用了float，z-index 可能会失效，所以我又想了一个办法

使用定位

比如还是这个例子，我们给 button 再给一个父元素，让这个父元素生成一个阴影，让 button 显示文字，button 的大小可以通过父级大小进行比例调整，但是这个方法并没有上面的方法灵活，如果实在要实现弥散阴影，并且不能让 z-index 生效，那么这个方法也不是不行。

在项目中，不只是遇到了这些问题，还有一些小坑，我就不展开说了，简单列在下面

对象的 key 是 string 类型的，所以如果有 key 值是 key-a 这种形式，是不能通过 obj.key-a 取值的，应该按照字符串的思想，obj[“key-a”] 来取
给数组的某个值使用 delete 删除，这个值会变成 undefined，length 并不会改变
使用 localStorage 的时候，如果需要保存数组或者对象，尽量将其用 JSON.stringify( ) 序列化，取值的时候，用 JSON.parse( )，这样得到的值会更容易处理一些。
jQuery 中的 on 方法是自带事件委托的