代码复用案例

最新推荐文章于 2025-01-10 15:47:17 发布
最新推荐文章于 2025-01-10 15:47:17 发布
阅读量178 收藏
点赞数
文章标签： servlet javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kxl3576814022/article/details/126635488
版权
这个博客展示了一个使用JavaScript实现的HTML列表元素编辑功能。通过点击'编辑'按钮，列表项的内容变为可编辑的输入框，用户可以修改内容后通过'保存'或'取消'进行确认或撤销。该功能利用DOM操作实现了代码复用，适用于多个列表项的编辑场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        li p {

            display: none;

        }

    </style>

</head>

<body>

    <ul>

        <li>

            <div class="box">

                <span>javascript权威指南</span>

                <a href="#">编辑</a>

            </div>

            <p>

                <input type="text">

                <a href="#">保存</a>

                <a href="#">取消</a>

            </p>

        </li>

    </ul>

    <ul>

        <li>

            <div class="box">

                <span>javascript权威指南</span>

                <a href="#">编辑</a>

            </div>

            <p>

                <input type="text">

                <a href="#">保存</a>

                <a href="#">取消</a>

            </p>

        </li>

    </ul>

    <ul>

        <li>

            <div class="box">

                <span>javascript权威指南</span>

                <a href="#">编辑</a>

            </div>

            <p>

                <input type="text">

                <a href="#">保存</a>

                <a href="#">取消</a>

            </p>

        </li>

    </ul>

    <ul>

        <li>

            <div class="box">

                <span>javascript权威指南</span>

                <a href="#">编辑</a>

            </div>

            <p>

                <input type="text">

                <a href="#">保存</a>

                <a href="#">取消</a>

            </p>

        </li>

    </ul>

    <ul>

        <li>

            <div class="box">

                <span>javascript权威指南</span>

                <a href="#">编辑</a>

            </div>

            <p>

                <input type="text">

                <a href="#">保存</a>

                <a href="#">取消</a>

            </p>

        </li>

    </ul>

    <script>

        var oul = document.getElementsByTagName('ul');

        for (var i = 0; i < oul.length; i++) {

            add(oul[i]);

        }

        function add(abj) {

            var ospan = abj.getElementsByTagName('span')[0];

            var int = abj.getElementsByTagName('input')[0];

            var op = abj.getElementsByTagName('p')[0];

            var oa = abj.getElementsByTagName('a');

            var odiv = abj.getElementsByTagName('div')[0];

            oa[0].onclick = function () {

                odiv.style.display = 'none';

                op.style.display = 'block';

                int.value = ospan.innerHTML;

            }

            oa[1].onclick = function () {

                op.style.display = 'none';

                odiv.style.display = 'block'

                ospan.innerHTML = int.value;

            }

            oa[2].onclick = function () {

                oa[1].style.display = 'none';

                oa[2].style.display = 'none';

                odiv.style.display = 'block'

                int.style.display = 'none';

            }

        }

    </script>

</body>

</html>

晓昕1217
关注
提示词编程的代码复用策略
AI天才研究院
01-09 545
引言 背景介绍 随着软件系统的复杂性和规模的不断增加，代码复用已经成为提高开发效率和软件质量的关键手段。然而，传统的代码复用方法往往依赖于手工编写代码模板和共享代码库，这不仅增加了开发人员的工作量，而且难以保证代码的一致性和可维护性。近年来，人工智能技术的快速发展，为代码复用提供了新的可能。提示词编程（Prom
复用的力量：实现企业级能力共享的架构设计
热门推荐
张彦峰的博客
10-14 10万+
对架构复用理解分析：在架构设计中实现系统的高可复用性需要考虑多个方面，一般包括技术复用和业务复用。从复用的程度可以依次划分为产品复用>业务流程复用>业务实体复用>组件复用>代码复用。
《设计模式-可复用面向对象软件的基础》上的例子
07-27
NULL 博文链接：https://qn-lf.iteye.com/blog/765501
设计和编写可复用的代码
07-21 315
刚开始干这一行的时候，对代码的复用有很高的热情。那时候总是希望自己写出的function、class、模块都是可以复用的，能够优美的解决所有问题。但是往往事于愿违，设计的变更、需求的变更、种种没有预料的情况最终把自己的代码摧毁的面目全非。有时一个简单的function会出现各种不同的版本，SendMessage、SendMessage2、SendMessageEx……在注释中说明其间微妙的区别。复...
代码复用的小例子
风影极光
09-10 375
Sub CodeShare(Source As Button) Dim sType As String Dim i As Integer sType = "N" If sType = "N" Then For j=0 To 3 Msgbox "N" Gosub lala j = j + 1 Next Else Msgbox "1" ...
代码复用学习实例
JANESTAR的专栏
05-15 1419
本例子为一道面试题的归纳总结，题意为调整数组顺序是的奇数位于偶数前面。 这是一类问题，我们在写代码的时候，要考虑扩展性，如果将题意改为将数组中能被3整除的数调整到不能被3整除的数后面，比如将数组中正整数调整到负数后面之类的一系列问题都可以用一个模式解决，而不用重新写很多重复代码。 如下为3种代码写法，第一种为原始写法，不考虑扩展性。第二种为函数指针写法，第三种使用了函数对象的写法。 /*
Python可复用函数的 6 种最佳实践
weixin_68789096的博客
08-23 161
对于在一个有各种角色的团队中工作的数据科学家来说，编写干净的代码是一项必备的技能，因为：清晰的代码增强了可读性，使团队成员更容易理解和贡献于代码库。清晰的代码提高了可维护性，简化了调试、修改和扩展现有代码等任务。为了实现可维护性，我们的Python函数应该：小型只做一项任务没有重复有一个层次的抽象性有一个描述性的名字有少于四个参数我们先来看看下面的 get_data 函数。尽管在这个函数中有许多注释，但很难理解这个函数的作用，因为：该函数很长。该函数试图完成多项任务。
《毕业设计&代码复用》--1418Python基于KMeans聚类算法在高校宿舍分配中的应用带文档-毕业源码案例设计.zip
04-17
本人十余年JAVA架构设计经验，擅长JAVA高可用、分布式、高并发系统架构设计。有志于做JAVA系统性的技术提升的同学可与我联系，交个朋友哦~ 本人十余年JAVA架构设计经验，擅长JAVA高可用、分布式、高并发系统架构...
scratch编程项目源代码文件案例素材-[我的世界].zip
05-16
9. **自定义积木**：高级用户可能创建了自定义积木，封装复用的代码片段，使程序更加模块化。 10. **交互性**：通过接收用户的输入（如键盘、鼠标点击）来响应玩家的操作，比如控制角色移动或执行特定动作。 11. *...
《毕业设计&代码复用》--基于安卓AndroidStudio在线订餐app设计毕业源码案例设计.zip
04-17
本人十余年JAVA架构设计经验，擅长JAVA高可用、分布式、高并发系统架构设计。有志于做JAVA系统性的技术提升的同学可与我联系，交个朋友哦~ 本人十余年JAVA架构设计经验，擅长JAVA高可用、分布式、高并发系统架构...
可复用的代码
pingsiyue6550的博客
05-01 441
XML mybatis 全剧配置文件 <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> mapper <!DOCTYPE mapper PUBLIC "-//mybatis...
Android基础入门教程——2.4.7 构建一个可复用的自定义BaseAdapter
Coder-Pig的猪栏
09-22 3万+
Android基础入门教程——2.4.7 构建一个可复用的自定义BaseAdapter标签（空格分隔）： Android基础入门教程本节引言： 如题，本节给大家带来的是构建一个可复用的自定义BaseAdapter，我们每每涉及到ListView GridView等其他的Adapter控件，都需要自己另外写一个BaseAdapter类，这样显得非常麻烦， 又比如，我们想在一个界面显示两
【Java基础-34】深入理解Java中的抽象类
最新发布
weixin_39033358的博客
01-10 549
抽象类是一种特殊的类，它不能被实例化，只能被继承。抽象类通常用于定义一些通用的行为或属性，而这些行为或属性的具体实现则由其子类来完成。在Java中，使用abstract关键字来声明一个抽象类。抽象类可以包含抽象方法（没有方法体的方法）和具体方法（有方法体的方法）。抽象类非常适合用于定义一组相关类的通用行为。例如，在一个游戏中，所有角色（如玩家、敌人、NPC）可能都有一些共同的行为（如移动、攻击），但这些行为的具体实现可能不同。
学习笔记---1.函数式编程
TF_0806
09-28 404
1.函数式编程 本质是对运算过程进行抽象，已达到像数学里的函数一样值和结果一一映射的关系。相同的输入始终得到相同的输出，与执行环境和顺序无关。 函数式编程不会保留计算中间的结果，所以变量不可变（无状态）。 在js中函数就是一个普通的对象，因此函数是一等公民： 可以存储在变量中 可以作为参数 可以作为返回值 高阶函数（函数是一等公民特性的体现）： 可以把函数作为参数传递给另一个函数 函数的返回结果也可以是一个函数 Eg:函数作为参数。ForEach，循环时使用参数，即执行函数。定义时并不关心作为参数
Java中对数组进行操作的函数处理完后函数不会改变，仍然是原来的函数的原因
hahaha8129的博客
10-06 707
今天运行下面这个函数的时候在函数里面输出的是处理完的数组，跳出后仍然是原来的数组。 public static void moveZeroes1(int[] nums) { HashMap<Integer,Integer>hashMap=new HashMap<Integer, Integer>(); int t=0; for (int i = 0; i < nums.length; i++) { if(n
JAVA之反射学习1-如何获取Class对象
qq_42265608的博客
12-01 303
获取Class类的对象 1.使用类的class属性获取该类对应的Class对象。 2.调用对象的getClass()方法，返回该对象所属的Class对象 3.使用Class类中的静态方法forName(String className)，字符串的值为类的全路径，即完整报名的路径 package com.itheima_02; /* 三种方式获取Class对象 1:使用类的class属性来获取该类对应的Class对象。举例：Student.class将会返回Student类对应的.
几种常见的代码复用级别
tq1086的博客
03-02 1500
几种常见的代码复用级别 http://tommwq.tech/blog/2021/03/02/331 级别1：复制粘帖 这个级别的代码复用是通过复制粘帖完成的。需要复用代码时，找到相似的代码复制过来，稍加修改即可完成。这种复用方法看起来简单、快速，但难以应对需求变更。假设一份代码复制到了10处，需求变化时，就要手动修改10个地方。工作量大，还容易产生缺陷。这种代码复用方式灵活性差、健壮性差。当然，如果只有2-3出使用了相同的代码，可以采用这种方式复用。但如果复制次数超过3次，最好采用更高级别的复用方式
编写函数实现员工信息录入和输出_高中信息技术【必修1】2.4可以复用的代码...
weixin_39961522的博客
12-08 1001
学习目标★了解函数的作用。★学会函数的定义和调用方法，并能熟练使用函数解决问题。★学会发布共享代码的常见方法，并能熟练使用模块解决问题。本课要点任务一 用自定义函数实现火柴摆数字问题活动1 用流程图表述问题解决的思路有6根火柴棒，列出所有能摆出的自然数，要求火柴棒正好用完。要找出这些数，可以从0到111依次判断这些数是不是恰巧需要6根火柴棒。为什么是0到111呢?观察上图可知，在0~9...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值