Fatal编程技术网
  • javascript/
  • Javascript 作为参数传递（object.function）

Javascript 作为参数传递（object.function）

javascript methods ecmascript-6

Javascript 作为参数传递（object.function）,javascript,methods,promise,ecmascript-6,es6-promise,Javascript,Methods,Promise,Ecmascript 6,Es6 Promise,我正在构建一个简单的拖放上传程序，但是当我尝试传递一个方法（object.function）作为promise的回调函数resolve/reject的参数时，我得到了一个未捕获的SyntaxError:Unexpected token. 我希望将我的承诺回调组织为resolve和reject对象下的方法，因此在上载的情况下，它将是resolve.upload和reject.upload，例如，如果我对用户身份验证有一个sign承诺，那么它将是ie.resolve.sign和reject.sign

我正在构建一个简单的拖放上传程序，但是当我尝试传递一个方法（object.function）作为promise的回调函数resolve/reject的参数时，我得到了一个
未捕获的SyntaxError:Unexpected token.

我希望将我的承诺回调组织为
resolve
和
reject
对象下的方法，因此在上载的情况下，它将是
resolve.upload
和
reject.upload
，例如，如果我对用户身份验证有一个sign承诺，那么它将是ie.
resolve.sign
和
reject.sign

当前的promise模式是chain then（）、catch（）、reject（）、resolve（）。这是一种可怕的编程模式，如果您使用套接字和chain 2+异步调用，代码将变得难以管理，因为您嵌套了越来越多的匿名函数（也称为），以避免这种模式，当我设置异步事件监听器
client.addEventListener（prop，callback.upload[prop]）时，我正在使用另一个我在异步调用中使用过无数次的监听器，正如我在下面的代码中所做的那样
并在一个单独的对象
callback.upload.event
中处理它们

与我处理异步请求的回调响应的方式相同，我尝试实现for promission以避免将5-10个异步请求链接/嵌套在如此长的不可管理函数中，但是为promises
函数（resolve.upload，reject.upload）
的回调函数传递方法（object.function）似乎不起作用，但是，如果我传递一个全局函数（function），即，
resolve
或
reject
，它将正常工作，但是这并不好，因为它会弄乱全局名称空间，这就是为什么我试图传递一个
对象。方法

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles/upload.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <script>
        //EVENT LISTENERS
        var listen = {
            drag: ['dragenter','dragover','drop','dragleave'],
            async: ['readystatechange','loadstart','progress','abort','error','load','timeout','loadend']
        };
        //PROMISES
       var executor = {
            //THIS IS WHERE MY PROBLEM LIES
            upload: function(resolve.upload,reject.upload){
                var data = new FormData();
                var client = new XMLHttpRequest();
                data.append('xls', executor.upload.files); 
                for(prop of listen.async){ 
                    client.addEventListener(prop, callback.upload[prop]);
                }
                client.open("POST", "/core/upload.php");
                client.send(data);
            }
        };
        //PROMISES HANDLERS
        var resolve = {
            upload: function(value){
                 console.log(value);
            }
        };
        var reject = {
             upload: function(reason){
                 console.log(reason);
             }
        };
        //USER HANDLERS
        var handles = {
            upload: {
                dragenter: function(e){
                    e.target.classList.remove('emboss');
                }
                dragover: function(e){
                     e.preventDefault();
                }
                drop: function(e){
                    e.preventDefault();
                    executor.upload.files = e.dataTransfer.files[0];
                    //CREATE PROMISE
                    var p = new Promise(executor.upload);
                    console.log(p);
                    //CHECK PROMISE STATUS, EVERY 3 SECS
                    setInterval(function(){
                        console.log(p);
                    }, 3000);
                }
                dragleave: function(e){
                     e.target.classList.add('emboss');
                }
            }
        };

        //ASYNC HANDLERS
        var callback = {
            upload: {
                readystatechange: function(e){
                    console.log(e.target.readyState);
                }
                loadstart: function(e){ 
                    console.log('loadstart');
                }
                progress: function(e){
                    console.log('progress');
                }
                abort: function(e){
                    console.log('abort');
                }
                error: function(e){
                    console.log('error');
                }
                load: function(e){
                    console.log('load');
                }
                timeout: function(e){
                    console.log('timeout');
                }
                loadend: function(e){
                    console.log('loadend');
                }
            }   
        };

        //INITIALIZATION
        function init(){
            var dropbox = document.getElementById('dropbox');
            for(prop of listen.drag){ 
                dropbox.addEventListener(prop, handles.upload[prop]);}
            };
        //CALL INIT
        document.addEventListener('DOMContentLoaded', init);
    </script>
    </head>
    <body>
        <div id="dropbox" class="fa fa-file-excel-o fa-4x emboss"></div>
    </body>
</html>


//事件侦听器
var侦听={
拖动：['dragenter'、'dragover'、'drop'、'dragleave']，
异步：['readystatechange'，'loadstart'，'progress'，'abort'，'error'，'load'，'timeout'，'loadend']
};
//许诺
变量执行器={
//这就是我的问题所在
上传：函数（解析。上传，拒绝。上传）{
var data=new FormData（）；
var client=new XMLHttpRequest（）；
data.append（'xls'，executor.upload.files）；
对于（listen.async的属性）{
client.addEventListener（prop，callback.upload[prop]）；
}
open（“POST”，“/core/upload.php”）；
发送（数据）；
}
};
//承诺经理人
变量解析={
上传：函数（值）{
console.log（值）；
}
};
var拒绝={
上传：功能（原因）{
控制台日志（原因）；
}
};
//用户处理程序
变量句柄={
上传：{
排水剂：功能（e）{
e、 target.classList.remove（'emboss'）；
}
德拉戈弗：功能（e）{
e、 预防默认值（）；
}
删除：功能（e）{
e、 预防默认值（）；
executor.upload.files=e.dataTransfer.files[0]；
//创造承诺
var p=新承诺（执行人上传）；
控制台日志（p）；
//每3秒检查一次承诺状态
setInterval（函数（）{
控制台日志（p）；
}, 3000);
}
dragleave：函数（e）{
e、 target.classList.add（'emboss'）；
}
}
};
//异步处理程序
变量回调={
上传：{
readystatechange:函数（e）{
console.log（例如target.readyState）；
}
loadstart:函数（e）{
log（'loadstart'）；
}
进展：职能（e）{
console.log（'progress'）；
}
中止：函数（e）{
console.log（'abort'）；
}
错误：函数（e）{
console.log（'error'）；
}
负载：功能（e）{
console.log（'load'）；
}
超时：函数（e）{
log（'timeout'）；
}
loadend:函数（e）{
console.log（'loadend'）；
}
}   
};
//初始化
函数init（）{
var dropbox=document.getElementById（'dropbox'）；
对于（listen.drag的道具）{
dropbox.addEventListener（prop，handles.upload[prop]）；}
};
//调用初始化
document.addEventListener（'DOMContentLoaded'，init）；
在“fatarrow”语法中：

左侧括号中的名称是
{thing to return}
部分的本地名称。事实上，除了“this”的区别之外，几乎所有的fatarrow都是一个语法速记。所以这两个函数定义基本相同：

blah: ( alpha, bravo ) => alpha + ", " + bravo
function blah ( alpha, bravo ) { return alpha + ", " + bravo; }
你想要：

upload: ( resfunc, rejfunc ) => { ...etc... }
无论你在哪里调用upload，你都会去：

upload(resolve.upload, reject.upload)
我也不确定你是否使用承诺。据我所知，回电是给你的，你可以打电话。就是像这样

var promise = new Promise(
    function(resolve, reject) {
        img.onload = function() {
            ctx.drawImage(img, 300, 100);
            resolve();                          // done, tell the promise
        };
        img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
    }
);
然后，您可以使用以下内容：

promise.then ( function () { /* promise says it is done, do something */ } );
您不能将自己的回调传递给传递给Promise构造函数的函数。您可以做的是在后续链中注册回调，例如：

var p = new Promise(executor.upload).then(resolve.upload, reject.upload);
但是，要使其有用，
execute.upload
函数必须根据w调用传递的
resolve
和
reject
参数 
var p = new Promise(executor.upload).then(resolve.upload, reject.upload);

executor.upload = (resolve, reject) => {
    var client = new XMLHttpRequest();

    client.addEventListener('readystatechange', (e) => {
        // call `resolve` or `reject` as appropriate
    });

    // then register any more specific handlers
    for (prop of listen.async){ 
        client.addEventListener(prop, callback.upload[prop]);
    }

    client.open("POST", "/core/upload.php");
    client.send(data);
}