时间戳

首页 > 解决方案 > 简化 Javascript 代码的最有效方法

javascript - 简化 Javascript 代码的最有效方法

问题描述

我有一个函数来查找类的名称，然后根据编辑器包含库来查找。它检查函数声明以了解库是否已被导入。

该代码工作正常，但它重复。

问题：以下代码是否简化

问题：我无法将变量传递给匿名函数$.getScript

function wfRunEditors(reScann) {
    if ($('.wfe-editorjs').length) {
        if ('undefined' === typeof initWfEditorJS) {
            $.getScript('/src/libs/js/editorjs.full.min.js', function () {
                $.getScript('/src/js/editor/wfeditorjs.js', function () {
                    $.loadCSS('/src/css/editors/editorjs.min.css');
                    wfCheckerFunction['editorjs'] = true;
                    initWfeditorjs(reScann);
                });
            });
        } else {
            wfCheckerFunction['editorjs'] = true;
            initWfeditorjs(reScann);
        }
    }
    if ($('.wfe-trumbowyg').length) {
        if ('undefined' === typeof initWfTrumbowyg) {
            $.getScript('/src/libs/js/trumbowyg.full.min.js', function () {
                $.getScript('/src/js/editor/wftrumbowyg.js', function () {
                    $.loadCSS('/src/css/editors/trumbowyg.min.css');
                    wfCheckerFunction['trumbowyg'] = true;
                    initWftrumbowyg(reScann);
                });
            });
        } else {
            wfCheckerFunction['trumbowyg'] = true;
            initWftrumbowyg(reScann);
        }
    }
    // add other editors
}

解决方案：

function wfRunEditors() {
    let editors = [
        'editorjs',
        'trumbowyg'
        // add other editors
    ];
    for (i = 0; i < editors.length; i++) {
        if ($('.wfe-' + editors[i]).length) {
            if ('undefined' === typeof window['initWf' + editors[i]]) {
                $.getScript('/src/js/editor/' + editors[i] + '.full.min.js');
            } else {
                wfCheckerFunction[editors[i]] = true;
                window['initWf' + editors[i]]();
            }
        }
    }
}

标签： javascriptjquery

解决方案

第一：两个if语句的结构不完全相同：

  • 在第一个中，您加载一个名为编辑器但带有wfbefore: 的脚本，'/src/js/editor/wfeditorjs.js'但在第二个中您没有：'/src/js/editor/trumbowyg.js'
  • 在第二个if语句中，您还加载了一个 css 文件：$.loadCSS('/src/libs/css/trumbowyg.min.css');

如果两个if语句具有完全相同的结构并且被调用的函数不使用 camelCase 中的编辑器名称（feinitWfeditorjs而不是initWfEditorJS），您可以只保存一个包含编辑器名称的数组并在for-loop 中循环它们。

在该循环中，您可以通过与编辑器名称（例如 ）连接来“构建”您的选择器字符串和 src 字符串，并$('.wfe-' + editors[i])使用： 调用函数window['yourFunctionName'](your_function_param)，例如window['initWf' + editors[i]](reScann)。

此外：如果该变量像您的变量一样全局声明，则不需要将变量传递给匿名函数reScann。

例子：

function wfRunEditors(reScann) {
    let editors = [
        'editorjs',
        'trumbowyg'
    ];
    
    for (i = 0; i < editors.length; i++) {
        if ($('.wfe-' + editors[i]).length) {
            if ('undefined' === typeof window['initWf' + editors[i]]) {
                $.getScript('/src/libs/js/' + editors[i] + '.full.min.js', function () {
                    $.getScript('/src/js/editor/wf' + editors[i] + '.js', function () {
                        $.loadCSS('/src/libs/css/' + editors[i] + '.min.css');
                        wfCheckerFunction[editors[i]] = true;
                        window['initWf' + editors[i]](reScann);
                    });
                });
            } else {
                window['initWf' + editors[i]](reScann);
            }
        }
    }
}

推荐阅读