前端中的dummy

最新推荐文章于 2022-07-28 22:21:42 发布

weixin_33738555

最新推荐文章于 2022-07-28 22:21:42 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/skywingjiang/blog/2218631

2019独角兽企业重金招聘Python工程师标准>>>

Dummy的意思是伪的、傀儡，初次见到这个词的时候是EVA亲剧场版：破中的Dummy System，在这篇文章里指前端编程中看不见但实际存在且发挥很重要作用的元素。HTML中的标签元素，通常需要显式出来展示一些内容，但是对于Dummy元素来说，显示出来反而是多余的，但是它的另外一些功能却可以给编程带来很多便利。

以下是一些个人总结的Dummy可以发挥作用的场景。

justify-content最后一行

Flex布局的justify-content属性可以设置元素在主轴方向上的布局方式，其中space-around是常用的属性值，它可以让元素周围环绕有自动调整的边距，如果最后一行的元素不足以填满一整行的话，就会出现这样的画面：

代码为：

<style>
    .container
    {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-around;

        width:800px;
        height:500px;
    }
    .element
    {
        width:170px;
        height:150px;
        background-color:cornflowerblue;
        border-radius:40px;
    }
</style>

<div class='container'>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
</div>

我们希望最后一行是靠左对齐的，但因为这一行上有很多空白所以，最后一行上的元素就处于很中间的位置。

对于这个问题，可以在最后一行上添加dummy元素剩余的元素，且设置它们的visibility属性为hidden，这些元素占据了位置但是不会显示出来。结果就是这样：

<style>
    .dummy
    {
        visibility:hidden;
    }
</style>

<div class='container'>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element'></div>
    <div class='element dummy'></div>
    <div class='element dummy'></div>
</div>

TextArea与剪贴板

有很多方法可以实现复制网页上的文字，但这些方法大多兼容性有问题或功能受限，或者可以解决了这些问题的通用库Clipboard.js。

但是有一个元素可以简单的实现这个功能，而且兼容性很好，那就是TestArea元素，实现这个功能的代码也很简单：

/**
 * @name 剪贴板
 */

/**
 * @name 剪贴板
 * @type Object
 */
const Clipboard=(function()
{
/*成员*/

    let copyDummy;
    /**
     * @name 初始化
     * @type Function
     * @see Clipboard
     */
    let initiate=function()
    {
        let textarea=document.createElement('textarea');
        textarea.style='position:absolute; width:0; height:0; opacity:0;';
        copyDummy=textarea;
        document.body.appendChild(copyDummy);
    };

/*接口*/

    /**
     * @name 复制
     * @type Function
     * @see Clipboard
     * @param {String} value 内容
     */
    let copy=function(value)
    {
        copyDummy.value=value;
        copyDummy.select();
        document.execCommand('Copy');
    };

/*构造*/

    document.addEventListener('DOMContentLoaded',function()
    {
        initiate();
    });

    return {copy};
})();

这一段代码首先创建了一个textarea元素，使其不可见，然后添加到body。然后使用它选中文本的方法select和document.exectCommand('Copy)就可以实现复制了。这个方法最大的好处是可以用javascript修改textarea的内容值从而复制任意文本。

如果你觉得这个想法不错，请给我一颗小星星★ Clipboard.js

循环轮播图

在循环轮播图中，图片每隔一段时间向左或右移动来显示下一张图片，且最后一张和第一张图片可以无缝切换。实现这一效果的方法很多，如果要用dummy来实现的话，可以在所有图片的最后插入一张和第一张相同的图片（称它为Dummy图片），当最后一张图片切换到Dummy图片时采取过渡的方式，即显示出了动画。而在这个动画结束之后，此时轮播图还处于静止状态，关闭动画效果，将轮播图直接切换到第一张图片。由于Dummy图片和第一张图片时一样的且没有切换动画，所以用户不会觉察到这一切换。切换后开启动画就可以开始下一轮循环。

萌萌的小黑来组成 Demo

转载于:https://my.oschina.net/skywingjiang/blog/2218631