如何减少Javascript代码的数量

How to reduce the amount of Javascript code

本文关键字：代码何减少 Javascript 更新时间：2023-09-26

我只是在学习Javascript，想缩短代码。

我想缩短的部分涉及vertical_axis设置为2、3和4的代码块。

        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        var FChartValue = new Array();
        var FChartName = new Array();

        $("document").ready(function () {
            var horizontal_axis = 1; // Number of column for "Horizontal Axis" counted from "Title" column = 0
            var arrayList = $("td.ms-vb-title:contains('')");
            arrayList = arrayList.closest('tbody').find('tr');
            var arrayList_temp = null;
            $(arrayList).each(function () {
                if ($(this).find('td.ms-vb2').eq(1).text() != "") {
                    if (arrayList_temp)
                        arrayList_temp = arrayList_temp.add($(this).find('td.ms-vb2').eq(horizontal_axis));
                    else
                        arrayList_temp = $(this).find('td.ms-vb2').eq(horizontal_axis);
                }
            });
            var Coords = new Array();
            var Coords1 = new Array();
            var Coords2 = new Array();
            var Labels = new Array();
            $.each(arrayList_temp, function (i, e) {
                Labels[i] = $(e).text();
            });
            var vertical_axis = 2; // Number of column for "Vertical Axis" counted from "Title" column = 0
            var arrayList1 = $("td.ms-vb-title:contains('')");
            arrayList1 = arrayList1.closest('tbody').find('tr');
            var arrayList1_temp = null;
            $(arrayList1).each(function () {
                if ($(this).find('td.ms-vb2').eq(1).text() != "") {
                    if (arrayList1_temp)
                        arrayList1_temp = arrayList1_temp.add($(this).find('td.ms-vb2').eq(vertical_axis));
                    else
                        arrayList1_temp = $(this).find('td.ms-vb2').eq(vertical_axis);
                }
            });
            $.each(arrayList1_temp, function (i, e) {
                Coords[i] = $(e).text();
            });
            var vertical_axis1 = 3; // Number of column for "Vertical Axis" counted from "Title" column = 0
            var arrayList2 = $("td.ms-vb-title:contains('')");
            arrayList2 = arrayList2.closest('tbody').find('tr');
            var arrayList2_temp = null;
            $(arrayList2).each(function () {
                if ($(this).find('td.ms-vb2').eq(1).text() != "") {
                    if (arrayList2_temp)
                        arrayList2_temp = arrayList2_temp.add($(this).find('td.ms-vb2').eq(vertical_axis1));
                    else
                        arrayList2_temp = $(this).find('td.ms-vb2').eq(vertical_axis1);
                }
            });
            $.each(arrayList2_temp, function (i, e) {
                Coords1[i] = $(e).text();
            });
            var vertical_axis2 = 4; // Number of column for "Vertical Axis" counted from "Title" column = 0
            var arrayList3 = $("td.ms-vb-title:contains('')");
            arrayList3 = arrayList3.closest('tbody').find('tr');
            var arrayList3_temp = null;
            $(arrayList3).each(function () {
                if ($(this).find('td.ms-vb2').eq(1).text() != "") {
                    if (arrayList3_temp)
                        arrayList3_temp = arrayList3_temp.add($(this).find('td.ms-vb2').eq(vertical_axis2));
                    else
                        arrayList3_temp = $(this).find('td.ms-vb2').eq(vertical_axis2);
                }
            });
            $.each(arrayList3_temp, function (i, e) {
                Coords2[i] = $(e).text();
            });
            FChartValue = Coords;
            FChartValue1 = Coords1;
            FChartValue2 = Coords2;
            FChartName = Labels;
        });
        //Graph Rendering
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Number');
            data.addColumn('number', 'P1');
            data.addColumn('number', 'P2');
            data.addColumn('number', 'P3');
            data.addRows(FChartValue.length);
            for (i = 0; i < FChartValue.length; i++) {
                data.setValue(i, 0, FChartName[i]);
                data.setValue(i, 1, parseInt(FChartValue[i]));
                data.setValue(i, 2, parseInt(FChartValue1[i]));
                data.setValue(i, 3, parseInt(FChartValue2[i]));
            }
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, {
                title: 'Report for Electric Energy Consumption',
                width: 1000, height: 400, is3D: false,
                hAxis: { title: "Year" },
                vAxis: { title: "kW" }
            }
            );
        }
    </script>

当您看到具有相同模式的代码一遍又一遍地重复时，可以将该模式创建为一个新函数。可变部分是参数。

似乎唯一改变的是临时变量的名称，这些名称仅用于将值收集到Coords123...和vertical_axis值中。

所以看起来我们需要vertical_aaxis作为一个参数。coords数组需要作为返回值。函数的主体可以从其中一个副本中提取，并简单地清理一下。

当您或其他人稍后再次看到该函数时，应将其命名为有用函数。

重复的代码的主要作用是填充Coords数组的值。因此我们可以将函数命名为getCoords。

还要注意的是，Javascript中有一种风格是许多程序员使用的，其中带有多个单词（如get-coords）的名称的第一个字母小写，每个后续单词的第一个字符大写，这样当这些单词一起运行时，您就可以在视觉上将它们分开。getCoords比getCoords 更容易阅读

function getCoords(vertical_axis){
            var Coords=[]; // Coords will be used to store the result to be returned
            var arrayList1 = $("td.ms-vb-title:contains('')");
            arrayList1 = arrayList1.closest('tbody').find('tr');
            var arrayList1_temp = null;
            $(arrayList1).each(function () {
                if ($(this).find('td.ms-vb2').eq(1).text() != "") {
                    if (arrayList1_temp)
                        arrayList1_temp = arrayList1_temp.add($(this).find('td.ms-vb2').eq(vertical_axis));
                    else
                        arrayList1_temp = $(this).find('td.ms-vb2').eq(vertical_axis);
                }
            });
            $.each(arrayList1_temp, function (i, e) {
                Coords[i] = $(e).text();
            });
            return Coords;
}

然后，该代码模式的3个副本可以减少为该功能的3个用途，如下所示：

Coords = getCoords(2);
Coords1 = getCoords(3);
Coords2 = getCoords(4);