百度考题：反复横跳的个性签名
浅聊一下
在各种社交网站上，都会有个性签名一栏，当没有写入时，默认为 “这个人很懒，什么也没有留下”
当我们没有点击它时，默认为一个文本，当我们点击它时，又变成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>
完整效果
结尾
写的不太美观，掘友们可以自己试试加上样式，去掉按钮，再加上一张绝美的背景图片...
作者：滚去睡觉
来源：juejin.cn/post/7315730050576367616
来源：juejin.cn/post/7315730050576367616
