鍍金池/ 問答/Java  HTML/ 如何更好的組織代碼?

如何更好的組織代碼?

附圖
圖片描述

這是一段獲取訂單數(shù)據(jù)的代碼,函數(shù)方法綁定基本都是在html中里綁定的點擊事件,還有下拉刷新的功能,求教大家怎樣更好的組織代碼結(jié)構(gòu),好維護(hù),模塊模式?

下面的代碼我都加了對應(yīng)的注釋

  // 模板引擎補(bǔ)充
    template.defaults.imports.Balance = function (number) {
      return number.toFixed(2);
    }
    
    // 當(dāng)所有組件準(zhǔn)備好后執(zhí)行內(nèi)部回調(diào)方法
    appcan.ready(function () {

      uexWindow.setWindowScrollbarVisible('false');

      appcan.frame.setBounce(1, function (type) {
        $("#pullstatus").html("");
      }, function (type) {
        $("#pullstatus").html("");
      }, function (type) {
        $("#pullstatus").html("松手了,產(chǎn)生事件了,開始更新數(shù)據(jù)!");
        // 下拉事件發(fā)生
        appcan.frame.resetBounce(1);
        var num = Number(pageNo) * limit;

        $("#pullstatus" + 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() {

      $('#bills_list').html = '';
      var linkId = $('#companyList')[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');

    }

    // 獲取公司列表回調(diào)
    function showCompanyCallback(data) {

      appcan.window.closeToast();

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

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

      $('#companyList').html(html);
      document.querySelector("#tishi").style.height = "5em"

      var linkId = $('#companyList')[0].value;

      queryBills(linkId);
    }

    // 獲取訂單數(shù)據(jù)
    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');

    }

    // 獲取訂單數(shù)據(jù)回調(diào)
    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>";
        $('#tishi').html(html);
      } else {
        html = template('bills_tmpl', {
          list: data.rows
        });
        $('#bills_list').html(html);
        document.getElementById('tishi').innerHTML = '';
      }

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

    }

    // 下拉刷新添加數(shù)據(jù)
    function addData() {
      var linkId = $('#companyList')[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');
    }

    // 下拉刷新添加數(shù)據(jù)回調(diào)
    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>";
        $('#tishi').html(html);
      } else {
        html = template('bills_tmpl', {
          list: data.rows
        });

        $('#bills_list').append(html);
        document.getElementById('tishi').innerHTML = '';
      }
    }

    // 打開詳情頁
    function openDetail(id) {
      appcan.locStorage.setVal('FUNDSUB_ID', id);
      appcan.window.open("detail", 'order_detail.html', 10);
    }
回答
編輯回答
晚風(fēng)眠

項目不支持es6語法,嘗試模塊化改寫的

        // 模板引擎補(bǔ)充
        template.defaults.imports.Balance = function(number) {
            return number.toFixed(2);
        }
        // 當(dāng)所有組件準(zhǔn)備好后執(zhí)行內(nèi)部回調(diào)方法
        appcan.ready(function() {

            uexWindow.setWindowScrollbarVisible('false');

            appcan.frame.setBounce(1, function(type) {
                $("#pullstatus").html("");
            }, function(type) {
                $("#pullstatus").html("");
            }, function(type) {
                $("#pullstatus").html("松手了,產(chǎn)生事件了,開始更新數(shù)據(jù)!");
                // 下拉事件發(fā)生
                appcan.frame.resetBounce(1);
                var num = Number(pageNo) * limit;

                $("#pullstatus").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");

            },
            // 回調(diào)
            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
                });

                $('#companyList').html(html);
                tishi.style.height = "5em"

                var linkId = companyList.value;

                Orders.queryBills(linkId);
            },
            // 獲取訂單數(shù)據(jù)
            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');

            },
            // 獲取訂單數(shù)據(jù)回調(diào)
            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 = "";
                }

            },
            // 下拉刷新添加數(shù)據(jù)
            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');
            },
            // 下拉刷新添加數(shù)據(jù)回調(diào)
            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
                    });

                    $('#bills_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);
            }
        }
2017年8月25日 04:47