使用 Object.defineProperty 實現單例模式,解決 layui 組件覆蓋致使的問題

先前在 逼乎 知乎看到對 Layui 的爭論,絕大部分職業前端都在吐槽,支持者都是一些順手寫寫前端的後端或者前端小白。
雖然我是半路出家,但好歹也是個職業前端人,態度嘛自不待言。因爲 Layui 學起來沒啥壓力、引入方式又那麼方便,因此不少用着過期的技術、靠拼湊代碼過活的外包公司尤爲喜好,因此會致使出現不少難以維護的代碼。其實我也明白,賢心大佬的出發點是好的,錯不在 Layui ,錯在許多使用者輕視前端開發的工程化和專業化的風氣,而 Layui 則滋長了這樣的風氣
很不巧因爲公司研發力量薄弱,老闆又要小步快跑,因而買了一套基於 Discuz 的系統,前端代碼基本都是 php 拼合的 HTML 片斷,因爲前述緣由,不少片斷都引入了 Layui 及其個別組件,一個頁面最多引入十二次之多……致使後面的 Layui 引入以後,每每會把前面的給覆蓋掉,覆蓋是沒問題的,問題在於把人家的組件也蓋掉了,因此控制檯裏山河一片紅,都是找不到組件。
一開始我選擇手動加上報錯的組件,可是這套系統時不時還有更新,每更新一次個人代碼就被覆蓋一次,抓狂。
思前想後,問題緣由是 Layui 的反覆初始化 ,用單例模式便可解決,落地的方案是在頁面公共頭部加這段代碼:javascript

!function(){
        // catch the first layui
        // fixme Warning: 此實現可能致使版本滯後,引發兼容問題。
        // TODO 將全部插件混入同一個 layui 實例,並升級 layui (儘可能採用最新的版本)
        var layuiBuffer = null;
        Object.defineProperty(window, 'layui', {
            get: function(){
                return layuiBuffer || this;
            },
            set: function(value){
                !layuiBuffer && (layuiBuffer = value);
                return value
            }
         });
    }();

雖然不是完美的解決方案(註釋裏也說了,被欽點爲單例的版本可能滯後,致使新的問題),可是那一堆報錯算是解決了。
以後我也構想過一個比較「完美」的解決方案 —— upgrade.js,來解決解決上述方案可能致使版本滯後的問題,可是考慮到相似 JS 庫會慢慢被淘汰,而且相似問題出現的機率不大,頓時就沒了更新的動力。php

相關文章
相關標籤/搜索