Question

使用Highcharts我设法得到两个显示随机数据的基本量表。这取决于我的主代码中的一大块javascript函数。它还使用另一个函数来生成随机结果。我希望将它移到外部文件中，我该怎么做呢？

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/highcharts-more.js"></script>

        <link rel="stylesheet" type="text/css" href="styles/result-light.css">
        <style type="text/css"></style>

        <title>2 gauge</title>

    <!--  start of .js-->
        <script type="text/javascript">
        $(window).load(function(){
            $(function() {
            $('#chart-A').highcharts({
                    chart: {
                        type: 'gauge',
                    },
                    title: {
                        text: 'Gauge1'
                    },
                    pane: {
                        startAngle: -150,
                        endAngle: 150,
                    },
                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 200,
                    },
                    series: [{
                        data: [1]
                    }]
                },
                // Add some life
                function(chart) {
                    if (!chart.renderer.forExport) {
                        setInterval(function() {
                            var point = chart.series[0].points[0],
                                newVal,
                                inc = Math.round((Math.random() - 0.5) * 20);

                            newVal = point.y + inc;
                            if (newVal < 0 || newVal > 200) {
                                newVal = point.y - inc;
                            }

                            point.update(newVal);

                        }, 3000);
                    }
                });


            $('#chart-B').highcharts({
                    chart: {
                        type: 'gauge',
                    },
                    title: {
                        text: 'Gauge2'
                    },
                    pane: {
                        startAngle: -150,
                        endAngle: 150,
                    },
                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 100,
                    },
                    series: [{
                        data: [1]
                    }]
                },
                // Add some life
                function(chart) {
                    if (!chart.renderer.forExport) {
                        setInterval(function() {
                            var point = chart.series[0].points[0], 
                                    newVal, 
                                    inc = Math.round((Math.random() - 0.5) * 20);
                                newVal = point.y + inc;

                            if (newVal < 0 || newVal > 100) {
                                newVal = point.y - inc;
                            }
                                point.update(newVal);
                            }, 500);
                        }
                    });
                });
        });

        </script>
    <!--  end of .js-->

    </head>
    <header>
        <div class="row">
            <div class="col">
                Couple of random guages
            </div>
        </div>
    </header>
    <body>
        <div class="row">
            <div class="col">
                <div id="chart-A" class="chart"></div>
                <div id="chart-B" class="chart"></div>
            </div>
        </div>
    </body>
</html>

你可以看到它占用了大量空间并且重复了两次，并且它还使用了我想要分离的另一个函数。

你的Simon M。

Answer 1

将js代码移到外部文件myjscode.js

中

并将其导入您的html：

<script src="myjscode.js"></script>

Answer 2

简答：在.js文件中定义函数，然后使用脚本标记将它们导入html，

<script src="/js/myFile.js"></script>

但是，如果您的应用程序增长，这将不容易。因此，你可以使用像React，Vue或Angular这样的前端框架。

或者您可以使用最现代的方法，webcomponents。（这样输出不是一种过度杀伤力）。您可以使用Polymer框架来构建Web组件。

webcomponents的强大之处在于，无论框架如何，您都可以在任何地方使用它们。

Answer 3

Pubudu和Sebastien都是正确答案，我发现Dreamweaver可以为你做到。

工具 - 外化JavaScript。

你的Simon M。

如何移动Javascript函数

3 个答案: