浅聊一下

在各种社交网站上，都会有个性签名一栏，当没有写入时，默认为 “这个人很懒，什么也没有留下”

百度考题：反复横跳的个性签名

当我们没有点击它时，默认为一个文本，当我们点击它时，又变成input框了，我们可以在里面添加自己的个性签名…本篇文章将带大家copy一个低配版的的个性签名组件

动手

我们要有JS组件思维，个性签名是很多地方都可以用到的，我们把它做成组件，用到的时候直接搬过去就好了。所以我们将使用原生JS将组件封装起来(大家也可以使用VUE)

EditInPlace 类

我们要使用这个JS组件，首先得将其方法和参数封装在一个类里，再通过类的实例化对象来展示。

function EditInPlace(id,parent,value){
    this.id = id;
    this.parent = parent;
    this.value =value || "这个家伙很懒，什么都没有留下"; 
    this.createElements()//动态装配html结点
    this.attachEvents();
}

将传入的id、parent和value参数赋值给新创建的对象的对应属性。
如果没有提供value参数，则将默认字符串”这个家伙很懒，什么都没有留下”赋值给新对象的value属性。
调用createElements方法来动态装配HTML节点。
调用attachEvents方法来附加事件。

EditInPlace.prototype

在 EditInPlace 类中，我们调用了createElements() attachEvents()两个方法，所以我们得在原型上定义这两个方法

createElements

    createElements:function(){
        this.containerElement = document.createElement('div');
        this.containerElement.id= this.id;
        //签名文字部分
        this.staicElement = document.createElement('span');
        this.staicElement.innerText = this.value
        this.containerElement.appendChild(this.staicElement);
        //输入框
        this.fieldElement = document.createElement('input')
        this.fieldElement.type = 'text'
        this.fieldElement.value = this.value;
        this.containerElement.appendChild(this.fieldElement);
        //save 确认
        this.saveButton = document.createElement('input');
        this.saveButton.type = 'button'
        this.saveButton.value = '保存' 
        this.containerElement.appendChild(this.saveButton)
        //取消按钮
        this.cancelButton = document.createElement('input')
        this.cancelButton.type = 'button'
        this.cancelButton.value = '取消' 
        this.containerElement.appendChild(this.cancelButton)


        this.parent.appendChild(this.containerElement)
        this.converToText();

    }

创建一个<div>元素，并将其赋值给this.containerElement属性，并设置其id为传入的id。
创建一个<span>元素，并将其赋值给this.staicElement属性，然后设置其文本内容为传入的value。
将this.staicElement添加到this.containerElement中。
创建一个<input>元素，并将其赋值给this.fieldElement属性，设置其类型为”text”，并将其值设置为传入的value。
将this.fieldElement添加到this.containerElement中。
创建一个保存按钮（<input type="button">），并将其赋值给this.saveButton属性，并设置其值为”保存”。
将保存按钮添加到this.containerElement中。
创建一个取消按钮（<input type="button">），并将其赋值给this.cancelButton属性，并设置其值为”取消”。
将取消按钮添加到this.containerElement中。
将this.containerElement添加到指定的父元素this.parent中。
调用converToText方法。

这个方法主要是用于动态生成包含静态文本、输入框和按钮的编辑组件，并将其添加到指定的父元素中。也就是说我们在这里主要就是创建了一个div，div里面有一个text和一个input，还有保存和取消按钮

div和span的显示

我们怎么样实现点击一下，就让text不显示，input框显示呢？
就是在点击一下以后，让text的display为’none’，让input框和按钮为 ‘inline’就ok了，同样的，在保存或取消时采用相反的方法就好

    converToText:function(){
        this.staicElement.style.display = 'inline';
        this.fieldElement.style.display = 'none'
        this.saveButton.style.display = 'none'
        this.cancelButton.style.display = 'none'
    },
    converToEdit:function(){
        this.staicElement.style.display = 'none';
        this.fieldElement.style.display = 'inline'
        this.saveButton.style.display = 'inline'
        this.cancelButton.style.display = 'inline'
    }

attachEvents

当然，我们需要在text文本和按钮上添加点击事件

    attachEvents:function(){
        var that = this
        this.staicElement.addEventListener('click',this.converToEdit.bind(this))
        this.cancelButton.addEventListener('click',this.converToText.bind(this))
        this.saveButton.addEventListener('click',function(){
        var value = that.fieldElement.value;
        that.staicElement.innerText = value;
        that.converToText();
        })
    }

通过var that = this将当前对象的引用保存在变量that中，以便在后续的事件监听器中使用。
使用addEventListener为静态元素（this.staicElement）添加了一个点击事件的监听器，当静态元素被点击时，会调用this.converToEdit.bind(this)方法，这样做可以确保在converToEdit方法中this指向当前对象。
为取消按钮（this.cancelButton）添加了一个点击事件的监听器，当取消按钮被点击时，会调用this.converToText.bind(this)方法，同样也是为了确保在converToText方法中this指向当前对象。
为保存按钮（this.saveButton）添加了一个点击事件的监听器，当保存按钮被点击时，会执行一个匿名函数，该函数首先获取输入框的值，然后将该值更新到静态元素的文本内容中，并最后调用converToText方法，同样使用了变量that来确保在匿名函数中this指向当前对象。

通过这些事件监听器的设置，实现了以下功能：

点击静态元素时，将编辑组件转换为编辑状态。
点击取消按钮时，将编辑组件转换为静态状态。
点击保存按钮时，获取输入框的值，更新静态元素的文本内容，并将编辑组件转换为静态状态。

HTML

在html中通过new将组件挂载在root上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>就地编辑-EditIntPlace</title>
</head>
<body>
    <div id="root"></div>
    <script src="./editor_in_place.js"></script>
    <script>
        // 为了收集签名，给个表单太重了 不好看
        // 个性签名，就地编辑
        // 面向对象 将整体开发流程封装 封装成一个组件       
        new EditInPlace('editor',document.getElementById('root'))//名字 挂载点
    </script>
</body>
</html>

完整效果

结尾

写的不太美观，掘友们可以自己试试加上样式，去掉按钮，再加上一张绝美的背景图片…

原文链接：https://juejin.cn/post/7315730050576367616 作者：滚去睡觉