只写一次执行函数 同时兼容桌面noConflict后的jQuery与移动端的Zepto

今天遇到一个比较特殊的情况是这样子,维护一个年代比较久远的项目,说年代久远也就三年前开发上线的,实际生产线还是用的很稳,只不过中间经历了一次改版,后端倒没啥,同一个部门维护的,前端当时因为排期问题,为了及时上线,所以做桌面端模板和移动端模板是两个不同的部门的开发,于是,现在需要做一些中间层的需求就遇到了这么一个稍微有点坑爹的情况。

需求回顾

功能本身不复杂,就是后台系统有一个模块是存放提前配置好的函数功能,里面包含一些模板参数,到时候用户在前台的发布界面上填好参数,提交后,就会渲染到浏览器去执行相应的功能,有点类似于我们常用的插入视频url生成视频等功能。

如上图,其中桌面版是引入了jQuery库,并由于$符号与其他库冲突,当时的开发对jQ做了noConflict,所以在桌面版除非自己使用形参函数,否则都得用jq或者jQuery来代替$,移动端是使用了Zepto,默认是$,并且双端引入库的位置也不一样,编辑器渲染的代码是在页面中间,这就需要等页面加载完毕才能执行编辑器代码,才不会导致出现异常。

定位问题

理清楚需求,再来看有什么问题:

1、双端本来可以用同一套代码,但因为noConflict,无法直接使用$

2、代码需要等页面加载完毕再执行,但页面上已有onload事件,无法重复使用onload,也因为$的问题,无法使用ready

3、涉及ajax并且是非简单请求(虽然这个可以用原生js实现,但为了简化代码还是想解决一下然后用jQ/Zp)

解决思路

1、第一个问题:无法使用$

这个倒比较好解决,因为形参的存在,通过稍微变形就可以解决

2、第二个问题,无法使用onload和ready

再细化一下问题,既然解决了$的问题,也就相当于只要jQuery和Zepto有定义,即可成功使用$去操作。

桌面版jQuery库是引入在页头,所以在编辑器代码渲染出来的时候,jQuery这个关键词是已经定义过的,桌面版可以直接ready执行。

移动版由于Zepto在页尾,编辑器代码渲染的时候,浏览器还不知道Zepto是什么,由于onload无法用,那么就得尝试别的方式,在查找了相关资料之后,采用了addEventListener监听页面加载情况来解决。因为addEventListener目前对主流浏览器已经兼容的非常好,并且移动端需求,没有IE8这种坑爹浏览器需要考虑,当然更主要的是,允许有多个load的监听,类似jQ允许一个页面上有多个ready一样。

解决了1和2,第3个问题关于ajax非简单请求就不是什么问题了。

最终方案

汇总一下解决方案的代码如下:

为您推荐

Leave a Reply

Your email address will not be published. Required fields are marked *