终于有人入手jQuery了，一键去掉项目对它的依赖

大家好，我是零一。虽然很多前端项目都在用Vue和React，但是也有很多项目依赖jquery，尤其是比较老的项目。仍在维护jquery项目的那些人，您想从项目中删除jquery吗？毕竟这个库那么大，你能用的代码只有15%~30%，而且jquery在处理各种浏览器的兼容问题上也做了很多（代码量上去了），但实际上，很多老项目也不会考虑兼容很边缘的浏览器，所以其实jquery里面做兼容处理的代码也不是太需要。我最近发现了一个有趣的工具。上线仅2周，就有600+星。它说它可以帮助你的项目摆脱对jquery的依赖，感觉是个好主意。来看看吧~这个工具的名字叫replace-jquery。据说可以帮你自动找到项目中所有用到的jquery方法，并生成一套原生js的方法来替换。让我们构建一个最小的jquery项目index.htmlmain.js来测试页面的功能。没关系。接下来我们使用replace-jquery工具尝试去除main.js中的jquery代码，先全局下载npminstall-greplace-jquery，然后在项目目录下使用。语法是replace-jquery目标js文件生成的js文件replace-jquerymain.jsnewMain.js这个工具会自动找到你文件中使用的所有jquery方法。这里有个确认步骤，可以选择要替换哪些方法（默认全选），生成过程中回车完成替换，生成新文件exportclassUtils{constructor(selector){this.elements=Utils.getSelector(selector);this.element=this.get(0);returnthis;}on(events,listener){events.split('').forEach((eventName)=>{this.each((el)=>{consttNEventName=Utils.setEventName(el,eventName);if(!Array.isArray(Utils.eventListeners[tNEventName])){Utils.eventListeners[tNEventName]=[];}Utils.eventListeners[tNEventName]。推送（监听器）；//https://github.com/microsoft/TypeScript/issues/28357if(el){el.addEventListener(eventName.split('.')[0],listener);}});});returnthis;}remove(){this.each((el)=>{el.parentNode.removeChild(el);});returnthis;}css(css,value){if(value!==undefined){这个.each((el)=>{Utils.setCss(el,css,value);});returnthis;}if(typeofcss==='object'){for(constpropertyincss){if(Object.prototype.hasOwnProperty.call(css,property)){this.each((el)=>{Utils.setCss(el,property,css[property]);});}}returnthis;}constcssProp=Utils.camelCase(css);constproperty=Utils.styleSupport(cssProp);returngetComputedStyle(this.element)[属性];}staticgetSelector(selector,context){if(selector&&typeofselector!=='string'){if(selector.length!==undefined){returnselector;}return[selector];}context=context||document;//性能原因，使用getElementById//eslint-disable-next-lineno-control-regexconstidRegex=/^#(?:[\w-]|\\.|[^\x00-\xa0])*$/;if(idRegex.test(selector)){constel=document.getElementById(selector.substring(1));returnel?[el]:[];}return[].slice.call(context.querySelectorAll(selector)||[]);}get(index){if(index!==undefined){returnthis.elements[index];}returnthis.elements;}each(func){if(!this.elements.length){returnthis;}this.elements.forEach((el,index)=>{func.call(el,el,index);});returnthis;}staticsetEventName(el,eventName){//需要验证https://stackoverflow.com/questions/1915341/whats-wrong-with-adding-properties-to-dom-element-objectsconstelementUUId=el.eventEmitterUUID;constuuid=elementUUId||Utils.generateUUID();//eslint-disable-next-lineno-param-reassignel.eventEmitterUUID=uuid;returnUtils.getEventName(eventName,uuid);}staticsetCss(el,prop,value){//prettier-ignoreletcssProperty=Utils.camelCase(prop);cssProperty=Utils.styleSupport(cssProperty);el.style[cssProperty]=value;}staticcamelCase(text){returntext.replace(/-([a-z])/gi,(s,group1)=>group1.toUpperCase());}staticstyleSupport(prop){letvendorProp;letsupportedProp;constcapProp=prop.charAt(0).toUpperCase()+prop.slice(1);constprefixes=['Moz','Webkit','O','ms'];letdiv=document.createElement('div');if(propindiv.style){supportedProp=prop;}else{for(leti=0;i{//eslint-disable-next-lineno-bitwiseconstr=(Math.random()*16)|0;//eslint-disable-下一行no-bitwiseconstv=c==='x'?r:(r&0x3)|0x8;returnv.toString(16);});}staticgetEventName(eventName,uuid){return`${eventName}__EVENT_EMITTER__${uuid}`;}}Utils.eventListeners={};exportdefaultfunction$utils(selector){returnnewUtils(selector);}简单看了下，好像是把我们用的jquery方法换成简单的native方法封装在了Utils类，我们每次调用$("xxx")，实际上是在调用这个类的一个方法，所以对这个文件做一些修改//这里删除exportclassUtils{//...省略一些代码}Utils.eventListeners={};//这里把exportdefault删掉，把函数$utils改成$function$(selector){returnnewUtils(selector);}这相当于在jquery的全局模拟中定义了一个$method。这时候html文件中的jquery引用就可以删除了，我们刚才生成的文件引入删除jquery，注入一个替代然后去页面尝试操作dom，可以看到效果是和之前一样，成功！补充如果想用这个工具生成所有jqueryAPI的替换文件，也就是生成一个super-mini-jquery，可以这样replace-jquery--build-allsuper-mini-jquery.js会混淆codeanduglifyit，只有10kb左右super-mini-jquery包大小因为这个工具才发布不到2周，所以只实现了大部分的jquery代码替换。比如ajax暂时不能换。如果你尝试替换，该工具也会提醒你不能替换ajax总的来说，这个工具的想法不错，希望以后能支持更多的语法替换！