在javascript中,相同的代码解析不同函数中的参数 - 复制与否?

时间:2011-08-06 07:58:42

标签: javascript function syntax readability

有一系列函数,每个函数都以相同的方式解析它的参数。现在,这个解析块被剪切并粘贴到每个函数的开头。有更好的方法吗?

Post.update = function( e ) {

        // parse args
        var e, el, orig_el, args, render, callBack;
        for( var i=0; i<arguments.length; i++ ) {
                if( arguments[i] instanceof HTMLElement ) orig_el = arguments[i];
                else if( arguments[i] instanceof Render ) render = arguments[i];
                else if( arguments[i] instanceof Event ) {
                        e = arguments[i];
                        orig_el = orig_el || e.target;
                }
                else if( typeof arguments[i] == 'function' )  callBack = arguments[i];
        }

        // Post.update work here
}

Post.verify = function( e ) {

       // parse args
       ...

       // Post.verify work here
}

解析原因而不是单独传递的原因是,有五个+可能的args

  • 我很容易在排序和遗漏方面犯错误,用一长串的args调用func

  • 将一个参数更改为函数意味着更改每次调用func

  • imho一个具有五个参数的函数与通过必要的函数相比是非常难以理解的

所以我的目标是抽象函数的解析部分,同时保持函数调用的清晰度。

4 个答案:

答案 0 :(得分:1)

而不是从函数中解析5个参数,你应该意识到函数不应该有3个以上的参数。

你要做的是让最后一个参数成为一个对象

Post.update = function(ev, obj) {
  // obj.el
  // obj.render
  // obj.ev
  // obj.cb
}

然后只需要一个可以重复使用的功能

Post.parseObj = function(obj) {
  ...
} 

Post.update = function(ev, obj) {
  obj = Post.parseObj(obj);
}

答案 1 :(得分:1)

当然你应该使用一个函数来防止复制和粘贴所有代码!

如果要更改代码中的单个字符,该怎么办?现在你必须再次复制和粘贴所有内容!那真是不好。

将该代码粘贴到函数中并每次调用它,这样当您在代码函数中更改某些内容时,更改将反映到使用该函数的每个位置。

你是否担心将这么多参数传递给函数?你真的要担心,因为传递这么多参数到函数中真的很糟糕。只需将所有参数都粘贴到单个对象中,然后只将该对象传递给函数,如下所示:

var arg = {
    arg1: 'bla bla bla',
    arg2: 4,
    //.....
};

// call the function passing only one parameter
myFunction( arg );

然后在函数内部,您将拥有一个参数,您可以访问所有其他参数:

function myFunction( arg ) {
    // arg.arg1
    // arg.arg2 ...
}

答案 2 :(得分:0)

定义一次函数并重复使用

var update = function (e) { /* etc */ }
Post.update = update;

答案 3 :(得分:0)

为什么不使用Post.parseArgs函数?

Post.parseArgs = function(args)
{
    // parse args
    var e, el, orig_el, args, render, callBack;
    for( var i=0; i<arguments.length; i++ ) {
            if( arguments[i] instanceof HTMLElement ) orig_el = arguments[i];
            else if( arguments[i] instanceof Render ) render = arguments[i];
            else if( arguments[i] instanceof Event ) {
                    e = arguments[i];
                    orig_el = orig_el || e.target;
            }
            else if( typeof arguments[i] == 'function' )  callBack = arguments[i];
    }
    // return what you want...
}