终于有人对 jQuery下手了，一键移除项目对它的依赖

朱雀 2022-09-16 14:28 145阅读 0赞

最近新发现了一个有意思的工具，仅上线2周，就有`600+`的Star，它说能帮助你的项目脱离对jquery的依赖，感觉是个不错的想法，一起来看看吧~

## 使用方式 ##

这个工具的名字叫replace-jquery\[1\]，据说是能帮你从项目中自动查找所有用到的jquery方法，并生成一套原生js的方法去替代

先来搞一个极简的jquery项目

index.html

![6b889e2884374e0076473653f94da104.png][] index.html

main.js

![ba0d204bb6d8633c6288a6cc8edde571.png][] main.js

测试一下页面的功能，是OK的

![538dbdeba2f7cae50fb0b22a9c47d195.gif][] 演示动图

接下来我们用 replace-jquery 工具试着移除一下 `main.js` 中的jquery代码

先全局下载一下

npm install -g replace-jquery

然后在项目目录使用，语法为`replace-jquery 目标js文件 生成的js文件`

replace-jquery main.js newMain.js

该工具会自动找到你文件中所有用到的jquery方法。此处有一个确认的步骤，你可以选择想要替换哪些方法（默认是全选的）

![c8f26af82fde83313bcd18956cc0812f.png][] 生成过程

按回车键即可完成替换，并生成新的文件

export class Utils {
        constructor(selector) {
            this.elements = Utils.getSelector(selector);
            this.element = this.get(0);
            return this;
        }
    
        on(events, listener) {
            events.split(' ').forEach((eventName) => {
                this.each((el) => {
                    const tNEventName = Utils.setEventName(el, eventName);
                    if (!Array.isArray(Utils.eventListeners[tNEventName])) {
                        Utils.eventListeners[tNEventName] = [];
                    }
                    Utils.eventListeners[tNEventName].push(listener);
    
                    // https://github.com/microsoft/TypeScript/issues/28357
                    if (el) {
                        el.addEventListener(eventName.split('.')[0], listener);
                    }
                });
            });
    
            return this;
        }
        remove() {
            this.each((el) => {
                el.parentNode.removeChild(el);
            });
            return this;
        }
        css(css, value) {
            if (value !== undefined) {
                this.each((el) => {
                    Utils.setCss(el, css, value);
                });
                return this;
            }
            if (typeof css === 'object') {
                for (const property in css) {
                    if (Object.prototype.hasOwnProperty.call(css, property)) {
                        this.each((el) => {
                            Utils.setCss(el, property, css[property]);
                        });
                    }
                }
                return this;
            }
            const cssProp = Utils.camelCase(css);
            const property = Utils.styleSupport(cssProp);
            return getComputedStyle(this.element)[property];
        }
        static getSelector(selector, context) {
            if (selector && typeof selector !== 'string') {
                if (selector.length !== undefined) {
                    return selector;
                }
                return [selector];
            }
            context = context || document;
    
            // For performance reasons, use getElementById
            // eslint-disable-next-line no-control-regex
            const idRegex = /^#(?:[\w-]|\\.|[^\x00-\xa0])*$/;
            if (idRegex.test(selector)) {
                const el = document.getElementById(selector.substring(1));
                return el ? [el] : [];
            }
            return [].slice.call(context.querySelectorAll(selector) || []);
        }
        get(index) {
            if (index !== undefined) {
                return this.elements[index];
            }
            return this.elements;
        }
        each(func) {
            if (!this.elements.length) {
                return this;
            }
            this.elements.forEach((el, index) => {
                func.call(el, el, index);
            });
            return this;
        }
        static setEventName(el, eventName) {
            // Need to verify https://stackoverflow.com/questions/1915341/whats-wrong-with-adding-properties-to-dom-element-objects
            const elementUUId = el.eventEmitterUUID;
            const uuid = elementUUId || Utils.generateUUID();
            // eslint-disable-next-line no-param-reassign
            el.eventEmitterUUID = uuid;
            return Utils.getEventName(eventName, uuid);
        }
        static setCss(el, prop, value) {
            // prettier-ignore
            let cssProperty = Utils.camelCase(prop);
            cssProperty = Utils.styleSupport(cssProperty);
            el.style[cssProperty] = value;
        }
        static camelCase(text) {
            return text.replace(/-([a-z])/gi, (s, group1) => group1.toUpperCase());
        }
        static styleSupport(prop) {
            let vendorProp;
            let supportedProp;
            const capProp = prop.charAt(0).toUpperCase() + prop.slice(1);
            const prefixes = ['Moz', 'Webkit', 'O', 'ms'];
            let div = document.createElement('div');
    
            if (prop in div.style) {
                supportedProp = prop;
            } else {
                for (let i = 0; i < prefixes.length; i++) {
                    vendorProp = prefixes[i] + capProp;
                    if (vendorProp in div.style) {
                        supportedProp = vendorProp;
                        break;
                    }
                }
            }
    
            div = null;
            return supportedProp;
        }
        static generateUUID() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
                // eslint-disable-next-line no-bitwise
                const r = (Math.random() * 16) | 0;
                // eslint-disable-next-line no-bitwise
                const v = c === 'x' ? r : (r & 0x3) | 0x8;
                return v.toString(16);
            });
        }
        static getEventName(eventName, uuid) {
            return `${eventName}__EVENT_EMITTER__${uuid}`;
        }
    }
    
    Utils.eventListeners = {};
    
    export default function $utils(selector) {
        return new Utils(selector);
    }

简单看了一下，似乎就是把我们用到的jquery方法替换成了简单的原生方法，并封装在`Utils`这个类中，那么我们每次调用`$("xxx")`时，其实就是在调用该类上的方法，那么对这个文件做一些修改

// 此处删除export
    class Utils {
     // ...省略一些代码
    }
    
    Utils.eventListeners = {};
    
    // 此处删除 export default，并将函数 $utils改成 $
    function $(selector) {
        return new Utils(selector);
    }

这样就相当于我们在全局模拟jquery定义了一个`$`方法。此时html文件中的jquery引用就可以删除了，并把我们刚才生成的文件引进来

![cf9e62e978aa6d3eec7f00e956271e3d.png][] 删除jquery，注入替代品

再去页面中尝试操作dom，可以看到效果跟之前一样，成功！

## 补充 ##

如果你想用该工具生成jquery所有api的替代文件，即生成一个`super-mini-jquery`，你可以这么做

replace-jquery --build-all super-mini-jquery.js

将代码混淆丑化以后大概只有10kb

![d959787deb49489fd655e998d53cfef1.png][] super-mini-jquery包体大小

因为这个工具刚发布才2个星期不到，只实现了大部分的jquery代码替换，比如`ajax`暂时是没办法替换的，你如果尝试去替换，工具也会提醒你

![aea27c769a69a484da943b51bca1c0ea.png][] 无法替换ajax

总的来说，这个工具想法不错，希望后期能支持更多的语法替换！

对于这个工具，你们有什么看法，欢迎在评论区留言讨论~

我是零一，分享技术，不止前端。关注我，了解更多前端新姿势~

### 参考资料 ###

\[1\]

replace-jquery: https://github.com/sachinchoolur/replace-jquery

往期干货：
     26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载（免费） 干货~~~2021最新前端学习视频~~速度领取
     前端书籍-前端290本高清pdf电子书打包下载
    点赞和在看就是最大的支持❤️

[6b889e2884374e0076473653f94da104.png]: /images/20220828/5375de4ba3f048809b3c10f3a9e2646e.png
[ba0d204bb6d8633c6288a6cc8edde571.png]: /images/20220828/e5b57b3de8cd496abcf0dfa6a9d49f15.png
[538dbdeba2f7cae50fb0b22a9c47d195.gif]: /images/20220828/bea0fc094f434b98b04746b63bbec8cb.png
[c8f26af82fde83313bcd18956cc0812f.png]: /images/20220828/fef70e61a5c24ab59dc8c087c11a15f5.png
[cf9e62e978aa6d3eec7f00e956271e3d.png]: /images/20220828/54c4cc590e01414bb5dcaea1cc4bdff3.png
[d959787deb49489fd655e998d53cfef1.png]: /images/20220828/5907fa7f7a1c4418b734b518cc76498b.png
[aea27c769a69a484da943b51bca1c0ea.png]: /images/20220828/4b5457edfe2c462287d8904ea68b0870.png