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

青旅半醒 2021-07-04 14:24 507阅读 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 条评论，507人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 javascript代码重构: 如何写好函数

在写JavaScript代码时，写好函数很关键，本文通过9个方面详细的讨论了如何写好函数，写好函数，就会让你的代码读起来清晰得多，值得学习一下。 --------------

灰太狼/ 2024年04月01日 15:01/ 0 赞/ 141 阅读

相关代码重构

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

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

相关代码重构感想

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

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

相关代码重构点

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

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

相关代码重构技巧

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

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

相关《重构改善既有代码的设计》(第一章)【重构，第一个示例】

起点开篇以例子来说明重构的过程 // plays.json { "hamlet": { "name": "Hamlet", "type"

柔光的暖阳◎/ 2021年07月04日 22:58/ 0 赞/ 454 阅读

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

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

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