重构Javascript代码示例(重构前后对比)

青旅半醒 2021-07-04 14:24 588阅读 0赞

今天有做了几个`asp.net`结合`Javascript`的教程文章。现回顾头来看看那些`Javascript`脚本，有写得不太理想，过于复杂。现抽取出来，重构它们。  
之前一：

代码如下:

function SelectedAll(cb) { 
        cb.checked = cb.checked ? false : true;
        var gv = document.getElementById('<%=GridViewCouplets.ClientID %>');
        var rc = gv.rows.length;
        for (var i = 1; i < rc; i++) { 
            var input = gv.rows[i].cells[0].getElementsByTagName("input");
            if (input[0].type == "checkbox" && input[0].checked) { 
                input[0].checked = false;
                gv.rows[i].style.backgroundColor = "";
            } else { 
                input[0].checked = true;
                gv.rows[i].style.backgroundColor = "#66ff33;";
            }
        }
    }
    
    function SelectedSingle(cb) { 
        var row = cb.parentNode.parentNode;
        if (cb.checked) { 
            row.style.backgroundColor = "#66ff33;";
        } else { 
            row.style.backgroundColor = "";
        }
    }

经过重构之后的Javascript脚本:

代码如下:

function SelectedAll(cb) { 
        var gv = document.getElementById('<%=GridViewCouplets.ClientID %>');
        var rc = gv.rows.length;
        for (var i = 1; i < rc; i++) { 
            var input = gv.rows[i].cells[0].getElementsByTagName("input");
            if (input[0].type == "checkbox") { 
                input[0].checked = cb.checked;
                gv.rows[i].style.backgroundColor = input[0].checked ? "#66ff33;" : "";
            }
        }
    }
    
    function SelectedSingle(cb) { 
        var row = cb.parentNode.parentNode;
        row.style.backgroundColor = cb.checked ? "#66ff33;" : "";
    }

之前二：

代码如下:

function Check_Uncheck_All(cb) { 
        var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>");
        var input = cbl.getElementsByTagName("input");
        if (cb.checked) { 
            for (var i = 0; i < input.length; i++) { 
                input[i].checked = true;
            }
        } else { 
            for (var i = 0; i < input.length; i++) { 
                input[i].checked = false;
            }
        }
    }

重构之后的`Javascript`脚本：  
代码如下:

function Check_Uncheck_All(cb) { 
        var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>");
        var input = cbl.getElementsByTagName("input");
        for (var i = 0; i < input.length; i++) { 
            input[i].checked = cb.checked;
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，588人围观）

还没有评论，来说两句吧...

相关阅读

相关代码重构挑战：Python函数和类的重构示例

代码重构通常涉及改进现有的代码结构，使其更易于理解和维护。下面是一个使用Python进行函数和类重构的示例： **原始代码（功能单一）：** ```python def a

- 日理万妓/ 2025年02月08日 21:06/ 0 赞/ 69 阅读

相关代码重构挑战：从旧Java代码到新标准的重构示例

旧Java代码重构到新标准，通常涉及到语法、库使用、异常处理等方面的变化。这里以一个简单的增删改查（CRUD）操作为例：旧Java代码（使用JDBC）： ```java

迷南。/ 2024年11月22日 15:15/ 0 赞/ 131 阅读

相关代码重构挑战：Java面向对象设计的重构示例

重构是软件工程中的一个重要概念，它涉及到改进代码的设计和结构，而不改变其外部行为。以下是一个使用Java面向对象设计重构的例子：原始代码（类A）： ```java pub

悠悠/ 2024年10月14日 06:48/ 0 赞/ 181 阅读

相关项目重构挑战：Java代码重构技巧——示例分析

在进行Java项目重构时，我们面临着一系列挑战。以下是一些主要的挑战，以及相应的Java代码重构技巧示例分析： 1. **代码复杂度高**： - 技巧：分模块重构，逐步

r囧r小猫/ 2024年09月26日 08:15/ 0 赞/ 205 阅读

相关《重构代码设计》

1、什么是重构？ 1、经常性的重构有助于代码维护自己该有的形态 2、消除重复代码，可以确定所有事务和行为在代码中只表述一次，这正是优秀设计的根本 3、重构可以帮我

古城微笑少年丶/ 2023年09月28日 19:08/ 0 赞/ 59 阅读

相关代码重构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

悠悠/ 2023年06月17日 03:55/ 0 赞/ 125 阅读

相关代码重构感想

本文是一篇流水账，将会浪费你几分钟的时间，刷到的铁子不太闲就没必要看了絮絮叨叨月初，我来到了实习的公司入职，认识了一下各种以前没有接触过的平台，业务，有些词汇也没接

╰+攻爆jí腚メ/ 2023年02月19日 08:24/ 0 赞/ 103 阅读

相关代码重构点

文章出处： http://blog.csdn.net/lovelion/article/details/9301691 Martin Fowler在Refactor

一时失言乱红尘/ 2022年06月09日 05:53/ 0 赞/ 358 阅读

相关代码重构技巧

代码重构 1. 提炼函数规则 a. 避免出现超大函数 b. 独立出来的函数有助于复用 c. 独立出来的函数更容易被覆写

- 日理万妓/ 2022年06月07日 09:20/ 0 赞/ 431 阅读

相关重构Javascript代码示例(重构前后对比)

今天有做了几个`asp.net`结合`Javascript`的教程文章。现回顾头来看看那些`Javascript`脚本，有写得不太理想，过于复杂。现抽取出来，重构它们。之

青旅半醒/ 2021年07月04日 14:24/ 0 赞/ 589 阅读