分析Javascript函数中的多个对象

Parsing multiple objects in a Javascript function

本文关键字：对象 Javascript 函数 分析      更新时间：2023-09-26

我下面有一个loadScript的函数，也就是将css和js文件加载到html文档header和body中，同时检测并避免重复。最初，我使用_.type作为切换条件，但为此，我必须在调用时定义类型："js"

loadScript({
        type: "js",
        path: KERNEL +"/client/js/",
        ref: ["script1.js"]
    });
var loadScript = function(_){
    console.log(_.ref);
    var type = _.ref[0].slice(_.ref[0].lastIndexOf('.')+1);
    console.log(type);
    switch (type) {
        case 'js':
            _.ref.forEach(function(file){
                var scripts = document.getElementsByTagName("script");
                for(var i = 0; i < scripts.length; i++){
                    var src = scripts[i].getAttribute('src');
                    if(src)
                    if(src.indexOf(file) > -1){
                        return;
                    }
                }
                var link = document.createElement('script');
                link.src = _.path + file;
                link.type = 'text/javascript'; link.async = true; // async = false if you need scripts loaded in sequence!
                document.getElementsByTagName('body')[0].appendChild(link);
            });
            break;
        case 'css':
            _.ref.forEach(function(file){
                for(var i = 0; i < document.styleSheets.length; i++){
                    if(document.styleSheets[i].href.indexOf(file) > -1){
                        return;
                    }
                }
                var head  = document.getElementsByTagName('head')[0];
                var link  = document.createElement('link');
                link.rel  = 'stylesheet';
                link.type = 'text/css';
                link.href = _.path + file;
                head.appendChild(link);
            });
            break;
        default:
            // code
    }
};

因此，我在开关中将其设置为type，而不是_.type以避免解析额外的参数，但我无法执行以下调用：

loadScript({
            path: KERNEL+"/client/js/",
            ref: ["script1.js"]
        }, {
            path: PLUGIN_URL +"/js/",
            ref: ["process1.js", "process2.js", "ui.js"]
        },{
            path: UTILS_BOWER_URL+"/client/css/",
            ref: ["front2.css", "default.css"]
});

我不想每次都做（3次）：

loadScript({
            path: KERNEL+"/client/js/",
            ref: ["script1.js"]
        }); 
loadScript({
            path: PLUGIN_URL +"/js/",
            ref: ["process1.js", "process2.js", "ui.js"]
        });

参考文献：

  1. 异步

  2. 环境

您可以使用arguments，例如：

function loadScript() {
  var length = arguments.length;
  for (i = 0; i < length; i++) {
    //do something
    console.log(arguments[i])}
}

您可以在这里阅读更多

我通过编写一个额外的方法来进行前期检查，以查看传递的参数是Array还是Object。

var multipleScript = function(_){
    if (_ instanceof Array) {
        _.map(function(o){
            console.log(o);
            loadScript(o);
        })
    } else if ( _ instanceof Object)
        loadScript(_);
};

现在我可以打电话了，工作正常，经过测试！但我的解决方案的缺点是，它必须是内部的数组[]！将相同的方法应用于一组对象。

multipleScript([{
            path: KERNEL+"/client/js/",
            ref: ["script1.js"]
        }, {
            path: PLUGIN_URL +"/js/",
            ref: ["process1.js", "process2.js", "ui.js"]
        },{
            path: UTILS_BOWER_URL+"/client/css/",
            ref: ["front2.css", "default.css"]
}]);
相关文章：