先前在 逼乎 知乎看到对 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