一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

浅聊一下

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

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

当我们没有点击它时,默认为一个文本,当我们点击它时,又变成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();
}
  1. 将传入的idparentvalue参数赋值给新创建的对象的对应属性。
  2. 如果没有提供value参数,则将默认字符串”这个家伙很懒,什么都没有留下”赋值给新对象的value属性。
  3. 调用createElements方法来动态装配HTML节点。
  4. 调用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();

    }
  1. 创建一个<div>元素,并将其赋值给this.containerElement属性,并设置其id为传入的id
  2. 创建一个<span>元素,并将其赋值给this.staicElement属性,然后设置其文本内容为传入的value
  3. this.staicElement添加到this.containerElement中。
  4. 创建一个<input>元素,并将其赋值给this.fieldElement属性,设置其类型为”text”,并将其值设置为传入的value
  5. this.fieldElement添加到this.containerElement中。
  6. 创建一个保存按钮(<input type="button">),并将其赋值给this.saveButton属性,并设置其值为”保存”。
  7. 将保存按钮添加到this.containerElement中。
  8. 创建一个取消按钮(<input type="button">),并将其赋值给this.cancelButton属性,并设置其值为”取消”。
  9. 将取消按钮添加到this.containerElement中。
  10. this.containerElement添加到指定的父元素this.parent中。
  11. 调用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();
        })
    }
  1. 通过var that = this将当前对象的引用保存在变量that中,以便在后续的事件监听器中使用。
  2. 使用addEventListener为静态元素(this.staicElement)添加了一个点击事件的监听器,当静态元素被点击时,会调用this.converToEdit.bind(this)方法,这样做可以确保在converToEdit方法中this指向当前对象。
  3. 为取消按钮(this.cancelButton)添加了一个点击事件的监听器,当取消按钮被点击时,会调用this.converToText.bind(this)方法,同样也是为了确保在converToText方法中this指向当前对象。
  4. 为保存按钮(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 作者:滚去睡觉

(0)
上一篇 2023年12月26日 上午10:46
下一篇 2023年12月26日 上午10:57

相关推荐

发表评论

登录后才能评论