0

我是 js 的菜鸟，对 processing.org 有一些背景，这是一个 java 框架。我试图从处理附带的示例中理解下面的代码。现在我对 javaScript 做了一点挖掘。但是这个..

var someName = (function(){..code, code, code...})());

让我很困惑。

我知道

var name = function(){} // builds a function

或者

var name = {code}// 生成 obj

乃至

function name(...){...}//一个对象

但是......所以括号之间的东西正在取代论点？我不明白。

下面是完整的代码（我的意思是这个函数，该代码旨在将 html 输入标签与在浏览器中的 processing.js 中运行的处理进行通信，可以看到这里运行的所有代码也从那里链接）

任何帮助表示赞赏。谢谢

var Controller = (function(){

    function Controller () {
        var sketch = arguments[0];
        var form = document.getElementById(arguments[1]);
        form.onsubmit = function () {return false};
        var inputs = {};

        this.createInputElement = function ( id, type, labelStr ) {
            var input = document.createElement('input');
            input.id = id;
            input.name = id;
            input.type = type;
            if ( labelStr !== undefined && labelStr !== '' )
            {
                var label = document.createElement('label');
                label['for'] = id;
                label.id = id+'-label';
                label.innerHTML = labelStr;
                form.appendChild(label);
            }
            form.appendChild(input);
            return input;
        }

        this.addInputField = function ( l, t ) {
            var id = createIdFromLabel(l);
            if ( inputs[id] == undefined ) {
                inputs[id] = this.createInputElement(id, t, l);
                inputs[id].onchange = function(){
                    changeFunc()(sketch, id, this.value);
                    return false;
                }
            }
            return inputs[id];
        }

        this.addRange = function ( l, c, mi, mx ) {
            var input = this.addInputField( l, "range" );
            input.value = c;
            input.min = mi;
            input.max = mx;
            return input;
        }

        this.addPassword = function ( l ) {
            var input = this.addInputField ( l, "password" );
            return input;
        }

        this.addEmail = function ( l ) {
            var input = this.addInputField ( l, "email" );
            return input;
        }

        this.addSearch = function ( l, c ) {
            var input = this.addInputField ( l, "search" );
            input.value = c;
            return input;
        }

        this.addNumber = function ( l, c ) {
            var input = this.addInputField ( l, "number" );
            input.value = c;
            return input;
        }

        this.addTelephone = function ( l, c ) {
            var input = this.addInputField ( l, "tel" );
            input.value = c;
            return input;
        }

        this.addUrl = function ( l, c ) {
            var input = this.addInputField ( l, "url" );
            input.value = c;
            return input;
        }

        this.addDate = function ( l, c ) {
            var input = this.addInputField ( l, "date" );
            input.value = c;
            return input;
        }

        this.addCheckbox = function ( l, c ) {
            var id = createIdFromLabel(l);
            if ( inputs[id] == undefined ) {
                inputs[id] = this.createInputElement(id, "checkbox", l);
                inputs[id].onchange = function(){
                    changeFunc()(sketch, id, this.checked);
                    return false;
                }
            }
            inputs[id].checked = c ? 'checked' : '';
            return inputs[id];
        }

        this.addTextfield = function ( l, c ) {
            var id = createIdFromLabel(l);
            if ( inputs[id] == undefined ) {
                inputs[id] = this.createInputElement(id, "text", l);
                inputs[id].onchange = function(){
                    changeFunc()(sketch, id, this.value);
                    return false;
                }
            }
            inputs[id].value = c;
            return inputs[id];
        }

        this.addTextarea = function ( l, c ) {
            var id = createIdFromLabel(l);
            if ( inputs[id] == undefined ) {
                var label = document.createElement('label');
                label['for'] = id;
                label.id = id+'-label';
                label.innerHTML = l;
                form.appendChild(label);
                inputs[id] = document.createElement('textarea');
                inputs[id].id = id;
                inputs[id].name = id;
                inputs[id].innerHTML = c;
                inputs[id].onchange = function(){
                    changeFunc()(sketch, id, this.value);
                    return false;
                }
                form.appendChild(inputs[id]);
            }
            inputs[id].value = c;
            return inputs[id];
        }

        this.addSelection = function ( l, o ) {
            var id = createIdFromLabel(l);
            if ( inputs[id] == undefined ) {
                var label = document.createElement('label');
                label['for'] = id;
                label.id = id+'-label';
                label.innerHTML = l;
                form.appendChild(label);
                var select = document.createElement('select');
                select.id = id;
                select.name = id;
                if ( o !== undefined && o.length && o.length > 0 ) {
                    for ( var i = 0; i < o.length; i++ ) {
                        var value = o[i].length > 1 ? o[i][1] : i;
                        var option = document.createElement('option');
                        option.innerHTML = o[i][0];
                        option.value = value;
                        select.appendChild(option);
                    }
                }
                select.onchange = function( event ){
                    changeFunc()(sketch, id, this.value);
                    return false;
                }
                inputs[id] = select;
                form.appendChild(inputs[id]);
            }
            return inputs[id];
        }
        this.addMenu = this.addSelection;

        this.setElementLabel = function ( element, labelStr ) {
            var label = document.getElementById(element.id+'-label');
            if ( label && label.childNodes && label.childNodes.length > 0 ) {
                label.childNodes[0].textContent = labelStr;
            } else {
                //console.log([element, label]);
            }
        }
    }

    var changeFunc = function () {
        return function ( sketch, id, value ) {
            try {
                sketch[id](value);
            } catch (e) {
                //console.log(e);
                sketch.println( "Function \"void "+id+"(value)\" is not defined in your sketch.");
            }
        }
    }

    var createIdFromLabel = function ( l ) {
        return l.replace(/^[^-_a-z]/i,'_').replace(/[^-_a-z0-9]/gi,'');
    }

    return Controller;

})();
4

2 回答 2

1

这是一个立即函数，在声明后立即调用，分配给变量的值是此立即函数返回的值（在您的代码中，它将是内部控制器函数）。此构造用于创建闭包范围，您可以在其中声明由所有内部函数共享但在全局范围内不可用的变量。

BTW {} 不是一个类，它是一个对象。Javascript 没有类的概念；它使用原型

于 2013-09-27T00:42:48.330 回答
0

正如其他人所说，这是一个立即调用的函数表达式。基本上相当于

var controllerFactory = function() {
    function Controller() {
        //Code code code
    }

    return Controller;
};

var Controller = controllerFactory();

唯一的区别是您不需要controllerFactoryIIFE 的变量。供您参考，IIFE 还有另一种常见的形式，如下所示

!function(params...) {
    //code code code
}(args...);

一个更具体的例子是

!function($, undefined) {

}(window.jQuery);

这可以确保$您的 IIFE 内部确实是 jQuery 并且undefined是真实的undefined.

于 2013-09-27T00:34:45.283 回答