Flask + Echarts 前端代码如何进行拆分

1. 遇到的问题

写Echarts前端代码太长了，为什么css和js代码都要放在html文件里，怎么拆开来？

2. 直接拆行吗

先直接把js独立出来

/static/js/myEcharts.js

let height = '600px'
let width = '945px'

let divEles = document.getElementsByTagName('div')
for (let i = 0; i < divEles.length; i++) {
    divEles[i].style.height = height
    divEles[i].style.width = width
}

let myEcharts1 = echarts.init(document.getElementById('div1'))
let myEcharts2 = echarts.init(document.getElementById('div2'))

// jinja2
echartsData = {{ data | safe }}

这还用说？直接报错

jinja2等后端模板引擎只能在html中用，js是不认识的。（除非使用一些前端渲染模板）

3. 思考一下

为什么要使用jinja2模板？

向前端传数据

前端不能自己拿数据吗？

可以，用js向后端发起一个请求就行

4. 用jq发起一个Ajax请求

4.1 定义接口

在发请求前先定义一个接口

@charts.route('/echartsData')
def get_echarts_data():
    option1 = get_option1()
    option5_guangdong, option5_jiangsu, option5_shandong = get_option5()
    option9_x, option9_d = get_option9()
    option11_d1, option11_d2 = get_option11()

    echarts_data = {
        'option1': option1,
        'option5_guangdong': option5_guangdong,
        'option5_jiangsu': option5_jiangsu,
        'option5_shandong': option5_shandong,
        'option9_x': option9_x,
        'option9_d': option9_d,
        'option11_d1': option11_d1,
        'option11_d2': option11_d2
    }

    return echarts_data

4.2 get请求

$.get('/echartsData', function (data) {
        let echartsData = data;
});

可是这样请求并不会发送，因为没有调用。

可以使用$(document).ready(function()等待doc加载完毕后自动调用

$(document).ready(function () {
    $.get('/echartsData', function (data) {
        let echartsData = data;
    })
})

但是这样的话，因为是异步请求，变量echartsData是不能在全局中使用的，之后的所有用到echartsData的代码都要卸载这个函数中

$(document).ready(function () {
    $.get('/echartsData', function (data) {
        let echartsData = data;
        
        option1 = {
			......
        };
        
        option2 = {
            ......
        };
        
        myEcharts1.setOption(option1);
        myEcharts2.setOption(option2);
    });
});

4.3 禁止异步

感觉函数太长了，难看，怎么禁止异步呢？

其实上面Ajax请求的代码是简写模式，完整的Ajax请求应该是这样写的：

let echartsData;

$.ajax({
    url: '/echartsData',
    async: false,
    success: function (data) {
        echartsData = data
    }
});

关于参数async，官网的解释是这样的：

async (default: true)

Type: Boolean

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.

意思默认值是true发起异步请求，设置为false禁止异步。

这样一来，就可以禁止异步请求，把数据赋值给全局变量了，拆分工作完成！

参考

https://api.jquery.com/jQuery.Ajax/