Question

我只是在学习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>

Answer 1

当您看到具有相同模式的代码反复重复时，可以将模式转换为新函数。可变部分是参数。

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

所以看起来我们需要vertical_axis作为参数。 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);

如何减少Javascript代码的数量

1 个答案: