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

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

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

相关阅读

相关代码重构挑战：Java代码重用和优化示例

在Java编程中，代码重构是一个重要的优化环节。主要目标是提高代码的复用性、可读性和性能。下面我们将通过一个具体的例子来展示如何进行代码重构。假设我们有一个Java类`Em

た入场券/ 2024年10月20日 21:33/ 0 赞/ 46 阅读

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

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

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

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

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

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

相关代码重构：Java重构代码提高软件质量的实践

代码重构是软件开发过程中的一个重要环节，它旨在改进现有代码的设计、结构和可维护性，而不会改变程序的行为。以下是在Java中进行代码重构的一些实践： 1. **提取方法**：当

向右看齐/ 2024年09月20日 06:21/ 0 赞/ 60 阅读

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

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

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

相关代码重构

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

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

相关代码重构点

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

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

相关代码重构技巧

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

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

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

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

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

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

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

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