待優化的代碼如下

• 以上代碼,在至少10個頁面中重復應用.
• 如果要修改某個功能,就得在至少10個頁面中修改.給后期維護帶來了極大的不便.
• 關鍵是這些信息都是在編程中不需要看見的.放在開始每次都要滑過它,太浪費時間了.

[注意代碼行數,后期會用到]

參數分類

1. 聲明類: 對layui模塊引用的特定格式
2. 通用類: 多個頁面公用的一些參數
3. 特殊類: 調用模塊后,生成的一些多個頁面公用的參數

目標

• 一開始只調用一個Mar模塊,由mar.use來負責傳遞參數
• 由于生成的參數是在use函數內部.因此需要傳入一個回調函數

[tip: 找到不變的,或者很少變化的代碼很關鍵]

line:180~200

• 這幾行基本屬于聲明類了
  
• 我們希望Mar類的使用如下:

layui.use('Mar', () =>{const mar = new Mar(layui);// 假設我們想用到layui的layer函數const cb = ( {layer} ) =>{layer.msg('ok', {icon: 1});}mar.use(cb);	
})

• 原本的Mar類如下
  
• 我們盡量不要動原文件,因為它有可能被其他頁面使用,因此改進如下:

class Mar {constructor (conf) {this.$layui = conf;}use (cb) {cb(this.layui)}
}

• 此時,以及可以通過解構賦值使用layui原生和自定義的模塊了.

line:201~203、207、209 ~213

• 這幾行屬于頁面通用類
  
  
• 下一步需要做的就是將一些通用的變量掛載到$layui上

class Mar {constructor (conf) {...},use(cb) {this.$layui.$domLine = '#chart-index-echartLine';cb(this.$layui) }
}

• 調用Mar類測試

layui.use('Mar', () => {const mar = new Mar(layui);const cb = ( { layer, $domLine} ) =>{layer.msg($domLine, {icon: 1});};mar.use(cb);
})

line: 206、208

• 這幾行屬于使用類
  
  
• 這里用到了模塊jquery和admin
• 因此需要從layui中解構出jquery和admin

class Mar{construcotr(){/**/}use(cb) {const { $, admin} = this.$layui;this.$layui.view = $('#VIEW-list-mqi');this.$layui.lineNo = admin.data()['lineNo'];}
}

說明

• 平均一個頁面可以減少25行左右的代碼量
• Mar類中的use方法,返回的參數供10個頁面通用
• 后期如果有其他通用模板,可以重新寫一個方法進行參數傳遞.