終於有人對 jQuery 下手了，一鍵移除項目對它的依賴

大家好，我是零一。雖然現在很多前端項目都在用 Vue、React，但依賴 jquery 的項目也不少，尤其是年代比較久遠的項目，那些還正在維護 jquery 項目的你，是否想將 jquery 從你的項目中移除？畢竟這個庫那麼大，你能用到的代碼也就只有 15%~30%，而且 jquery 對各個瀏覽器的兼容性也做了很大的處理（代碼量 up up），但其實很多老項目也不會去考慮兼容很邊緣的瀏覽器了，所以其實 jquery 中兼容處理的代碼也沒太大必要

最近新發現了一個有意思的工具，僅上線 2 周，就有600+的 Star，它說能幫助你的項目脫離對 jquery 的依賴，感覺是個不錯的想法，一起來看看吧~

使用方式

這個工具的名字叫 replace-jquery[1]，據說是能幫你從項目中自動查找所有用到的 jquery 方法，並生成一套原生 js 的方法去替代

先來搞一個極簡的 jquery 項目

index.html

index.html

main.js

main.js

測試一下頁面的功能，是 OK 的

演示動圖

接下來我們用 replace-jquery 工具試着移除一下 main.js 中的 jquery 代碼

先全局下載一下

npm install -g replace-jquery

然後在項目目錄使用，語法爲replace-jquery 目標js文件 生成的js文件

replace-jquery main.js newMain.js

該工具會自動找到你文件中所有用到的 jquery 方法。此處有一個確認的步驟，你可以選擇想要替換哪些方法（默認是全選的）

生成過程

按回車鍵即可完成替換，並生成新的文件

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 引用就可以刪除了，並把我們剛纔生成的文件引進來

刪除 jquery，注入替代品

再去頁面中嘗試操作 dom，可以看到效果跟之前一樣，成功！

補充

如果你想用該工具生成 jquery 所有 api 的替代文件，即生成一個super-mini-jquery，你可以這麼做

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

將代碼混淆醜化以後大概只有 10kb

super-mini-jquery 包體大小

因爲這個工具剛發佈才 2 個星期不到，只實現了大部分的 jquery 代碼替換，比如ajax暫時是沒辦法替換的，你如果嘗試去替換，工具也會提醒你

無法替換 ajax

總的來說，這個工具想法不錯，希望後期能支持更多的語法替換！

對於這個工具，你們有什麼看法，歡迎在評論區留言討論~

我是零一，分享技術，不止前端。關注我，瞭解更多前端新姿勢~

參考資料

[1]

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/wmSr-DfSdwKgxyhcXRiGXA