jquery和zepto冲突解决以及体会

最新推荐文章于 2024-08-09 10:42:44 发布

weixin_33778544

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量153

点赞数

文章标签：前端 javascript 测试 ViewUI

原文链接：https://my.oschina.net/gcdong/blog/1120371

版权

为什么80%的码农都做不了架构师？>>>

##背景最近公司在做一个基于移动端的项目，算是第一次公司好几个人都参与的，在前端的js插件选用上，前端人员选择了使用zepto,前端的妹子说这个对于移动端的支持会比较好，然后还使用了一个require.js的技术。 ##问题前端在做一个三级联动的地址选择的时候，使用了一个pick的插件，但是这个插件是基于jquery的，这就导致了一个问题，我们基本所有页面都使用了zepto,而且zepto的选择关键字也设置为了$，和jquery重复了，导致我们在zepto和jquery都引入的情况下，使用$这个选择器的时候，会有一定情况无法正确识别是哪个，页面就会报错了 ##解决一开始，我们以为是因为使用了require.js导致的，但是后面发现无论我们怎么去调整，都是不可以的，最后不得已问百度，最后在知乎里面看到 https://www.zhihu.com/question/37202729 我就在代码做了修改,凡是用到jquery的地方，我都使用jQuery的关键字来调用


jQuery 和其他 JavaScript 框架
正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？
其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

jQuery.noConflict();
jQuery(function($){
         $("#add-city").cityPicker({
            title: "请输入地址",
        });
});

#后记至此，问题算是解决了，虽然很简单，但是缺花费了大量的时间，后面仔细想想，其实是我们一开始的路子没走好，我们选择了一个js框架，按理是不应该再选择其他的，我们还用了其他并且使用了同样的关键字，而且在问题出现的时候去胡乱搞，并没有善用搜索工具，其实我们遇到的问题肯定别人也会遇到的，这几点要切记。

转载于:https://my.oschina.net/gcdong/blog/1120371