How to better organize the code?

with pictures

this is a code to obtain order data. Function and method bindings are basically click events bound in html , as well as drop-down refresh functions. How to better organize the code structure for easy maintenance and module mode?

I have added corresponding comments to the following code

  // 
    template.defaults.imports.Balance = function (number) {
      return number.toFixed(2);
    }
    
    // 
    appcan.ready(function () {

      uexWindow.setWindowScrollbarVisible("false");

      appcan.frame.setBounce(1, function (type) {
        $("-sharppullstatus").html("");
      }, function (type) {
        $("-sharppullstatus").html("");
      }, function (type) {
        $("-sharppullstatus").html(",,");
        // 
        appcan.frame.resetBounce(1);
        var num = Number(pageNo) * limit;

        $("-sharppullstatus" + type).html("");
        // alert("totalRows=" + totalRows)

        if (Number(totalRows) <= num) {
          appcan.window.openToast({
            msg: "",
            duration: 1000,
            position: 5,
            type: 0
          });
          return;
        }

        pageNo = Number(pageNo) + 1;
        addData();
      });
      queryCusBasOrg();

    });
    // 
    function changeCompany() {

      $("-sharpbills_list").html = "";
      var linkId = $("-sharpcompanyList")[0].value;
      pageNo = 1;
      queryBills(linkId)
    }

    //  
    function queryCusBasOrg() {
      var url = URL + "/app/cus/queryCusBasOrg";

      var paramJsonStr = "";
      var func = showCompanyCallback;
      var dataType = "text";
      ajaxPostQuery(url, paramJsonStr, func, dataType);
      appcan.window.openToast("...", "0", "5", "1");

    }

    // 
    function showCompanyCallback(data) {

      appcan.window.closeToast();

      if (typeof data == "string") {
        data = JSON.parse(data);
      };

      var html = template("Company_tmpl", {
        list: data
      });

      $("-sharpcompanyList").html(html);
      document.querySelector("-sharptishi").style.height = "5em"

      var linkId = $("-sharpcompanyList")[0].value;

      queryBills(linkId);
    }

    // 
    function queryBills(linkId) {

      var url = URL + "/app/cus/queryCusPayMoney";
      var paramJsonStr = "&pager.pageNo=" + pageNo + "&pager.pageSize=" + pageSize + "&cusOrgLinkid=" + linkId;

      var func = showBillsCallback;
      var dataType = "text";
      ajaxPostQuery(url, paramJsonStr, func, dataType);
      appcan.window.openToast("...", "0", "5", "1");

    }

    // 
    function showBillsCallback(data) {

      appcan.window.closeToast();

      if (typeof data == "string") {
        data = JSON.parse(data)
      };
      totalRows = data["pager.totalRows"];
      // alert(totalRows)

      var html = "";
      if (data === 0) {
        html = "<div id="" class="ub ub-pc pc time-wrapper"">" + "<span class="mf-size2 time"></span>" + "</div>";
        $("-sharptishi").html(html);
      } else {
        html = template("bills_tmpl", {
          list: data.rows
        });
        $("-sharpbills_list").html(html);
        document.getElementById("tishi").innerHTML = "";
      }

      // document.querySelector(".list-content:last-child").style.margin = "0  0 6em"

    }

    // 
    function addData() {
      var linkId = $("-sharpcompanyList")[0].value;
      var url = URL + "/app/cus/queryCusPayMoney";
      var paramJsonStr = "&pager.pageNo=" + pageNo + "&pager.pageSize=" + pageSize + "&cusOrgLinkid=" + linkId;

      var func = addDataCallback;
      var dataType = "text";
      ajaxPostQuery(url, paramJsonStr, func, dataType);
      appcan.window.openToast("...", "0", "5", "1");
    }

    // 
    function addDataCallback(data) {
      appcan.window.closeToast();

      if (typeof data == "string") {
        data = JSON.parse(data)
      };
      totalRows = data["pager.totalRows"];
      // alert(totalRows)

      var html = "";
      if (data === 0) {
        html = "<div id="" class="ub ub-pc pc time-wrapper"">" + "<span class="mf-size2 time"></span>" + "</div>";
        $("-sharptishi").html(html);
      } else {
        html = template("bills_tmpl", {
          list: data.rows
        });

        $("-sharpbills_list").append(html);
        document.getElementById("tishi").innerHTML = "";
      }
    }

    // 
    function openDetail(id) {
      appcan.locStorage.setVal("FUNDSUB_ID", id);
      appcan.window.open("detail", "order_detail.html", 10);
    }

project does not support es6 syntax, try modularization rewrite

        // 
        template.defaults.imports.Balance = function(number) {
            return number.toFixed(2);
        }
        // 
        appcan.ready(function() {

            uexWindow.setWindowScrollbarVisible('false');

            appcan.frame.setBounce(1, function(type) {
                $("-sharppullstatus").html("");
            }, function(type) {
                $("-sharppullstatus").html("");
            }, function(type) {
                $("-sharppullstatus").html(",,");
                // 
                appcan.frame.resetBounce(1);
                var num = Number(pageNo) * limit;

                $("-sharppullstatus").html("");
                // alert("totalRows=" + totalRows)

                if (Number(totalRows) <= num) {
                    appcan.window.openToast({
                        msg : '',
                        duration : 1000,
                        position : 5,
                        type : 0
                    });
                    return;
                }

                pageNo = Number(pageNo) + 1;
                Orders.addData();
            });
            Orders.init();

        });
        var Orders = {
            init : function() {
                this.queryCusBasOrg();
                this.options().bind();
            },
            options : function() {
                var yue = this,
                    options = {};
                yue.options.companyList = document.getElementById('companyList');
                yue.options.bills_list = document.getElementById("bills_list");
                yue.options.tishi = document.getElementById('tishi');
                return yue;
            },
            bind : function() {
                var yue = this;
                this.options.companyList.onchange = function() {
                    yue.changeCompany();
                }
            },

            // 
            queryCusBasOrg : function() {
                var yue = this;
                var func = yue.showCompanyCallback.bind(yue);

                ajaxPostQuery(URL + "/app/cus/queryCusBasOrg", "", func, "text");

            },
            // 
            showCompanyCallback : function(data) {
                var yue = this;
                var tishi = yue.options.tishi;
                var companyList = yue.options.companyList;

                if ( typeof data == "string") {
                    data = JSON.parse(data);
                };

                var html = template('Company_tmpl', {
                    list : data
                });

                $('-sharpcompanyList').html(html);
                tishi.style.height = "5em"

                var linkId = companyList.value;

                Orders.queryBills(linkId);
            },
            // 
            queryBills : function(linkId) {
                var yue = this;
                var paramJsonStr = "&pager.pageNo=" + pageNo + "&pager.pageSize=" + pageSize + "&cusOrgLinkid=" + linkId;
                var func = yue.showBillsCallback.bind(yue);
                ajaxPostQuery(URL + "/app/cus/queryCusPayMoney", paramJsonStr, func, "text");
                appcan.window.openToast('...', '0', '5', '1');

            },
            // 
            showBillsCallback : function(data) {
                var yue = this;
                var tishi = yue.options.tishi;
                var bills_list = yue.options.bills_list;

                appcan.window.closeToast();

                if ( typeof data == "string") {
                    data = JSON.parse(data)
                };
                totalRows = data["pager.totalRows"];
                // alert(totalRows)

                var html = '';
                if (data === 0) {
                    html = "<div id='' class='ub ub-pc pc time-wrapper''>" + "<span class='mf-size2 time'></span>" + "</div>";
                    tishi.innerHTML = html;
                } else {
                    html = template('bills_tmpl', {
                        list : data.rows
                    });
                    bills_list.innerHTML = html;
                    tishi.innerHTML = "";
                }

            },
            // 
            addData : function() {
                var yue = this;
                var linkId = yue.options.companyList.value;
                var paramJsonStr = "&pager.pageNo=" + pageNo + "&pager.pageSize=" + pageSize + "&cusOrgLinkid=" + linkId;

                ajaxPostQuery(URL + "/app/cus/queryCusPayMoney", paramJsonStr, yue.addDataCallback, "text");
                appcan.window.openToast('...', '0', '5', '1');
            },
            // 
            addDataCallback : function(data) {
                var yue = this;
                var tishi = yue.options.tishi;
                appcan.window.closeToast();

                if ( typeof data == "string") {
                    data = JSON.parse(data)
                };
                totalRows = data["pager.totalRows"];
                // alert(totalRows)

                var html = '';
                if (data === 0) {
                    html = "<div id='' class='ub ub-pc pc time-wrapper''>" + "<span class='mf-size2 time'></span>" + "</div>";
                    tishi.innerHTML = html;
                } else {
                    html = template('bills_tmpl', {
                        list : data.rows
                    });

                    $('-sharpbills_list').append(html);
                    tishi.innerHTML = '';
                }
            },
            // 
            changeCompany : function() {
                var yue = this;
                yue.options.bills_list.innerHTML = "";
                var linkId = yue.options.companyList.value;
                pageNo = 1;
                yue.queryBills(linkId)
            },
            // 
            openDetail : function(id) {
                appcan.locStorage.setVal('FUNDSUB_ID', id);
                appcan.window.open("detail", 'order_detail.html', 10);
            }
        }
  • Js Design pattern problem

    export const typeMarry = (type) => { const charts = [ pie , bar , line ], text = [ normalText , multText ], media = [ file , picture , music , video ] if(charts.indexOf(type) !== -1) { return CHARTS } ...

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2bb3e-2bac0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2bb3e-2bac0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?