Javascript 嵌套函数调用

Question

我正在尝试开发一个 javascript 库，使我更容易生成 DOM 元素并编辑它们的属性。我遇到的问题是某些元素的属性太多，导致代码困惑。例如，我必须在生成之前使用方法调用以编程方式设置边框、背景、阴影等的颜色。

参见 jLibrary.php 中的 setBorder 嵌套在函数 Div 中

function Div() {

    Div.POSITION = {

        STATIC : 'static',
        ABSOLUTE : 'absolute',
        RELATIVE : 'relative',
        FIXED : 'fixed'

    }

    Div.BORDER = {

        SOLID : 'solid',
        DOTTED : 'dotted'

    }

    Div.ALIGN = {

        LEFT : 0,
        CENTER : 1,
        RIGHT : 2,
        TOP : 0,
        MIDDLE : 1,
        BOTTOM : 2

    }

    var ELEMENT;
    var CSS;

    var horizontalAlign;
    var verticalAlign;

    var colorQueue;



    (function() {

        this.div = document.createElement('div');

        ELEMENT = this.div;
        CSS = this.div.style;


        colorQueue = 'rgb(' + new Array(0, 0, 0) + ')';


        document.body.appendChild(this.div);




    }());

    this.setPosition = function(postype) {

        if (!horizontalAlign && !verticalAlign) {

            CSS.position = postype;

        }


    }

    this.setBounds = function(x, y, width, height) {

        CSS.left = x + 'px';
        CSS.top = y + 'px';
        CSS.width = width + 'px';
        CSS.height = height + 'px';

    }

    this.setColorQueue = function(r, g, b) {

        colorQueue = 'rgb(' + new Array(r, g, b) + ')';
        alert(colorQueue);

    }

    this.setBackgroundColorToQueue = function(){

        CSS.backgroundColor = colorQueue;

    }

    this.createShadow = function(x, y, width, height){

        CSS.boxShadow = y + 'px ' + x + 'px ' + width + 'px ' + height + 'px ' + colorQueue;


    }

    this.createBorder = function(width,style){
     CSS.border = width + 'px ' + style + ' ' + colorQueue;
     /* Theoretical Method.
     this.setColor = function(r,g,b){ //This will not work the way I want it...
          CSS.border = 'rgb(' + new Array(r, g, b) + ')';
     }
     */
}

    this.rotateDiv = function(degrees){

        CSS.transform = 'rotate(' + degrees + 'deg)';

    }

    this.horizontalAlign = function(horiz) {

        var freeSpaceX = ((window.innerWidth - ELEMENT.offsetWidth) / 2);
        var defPadding = '8px';
        var defPaddingCenter;
        var defPaddingRight;
        var defPaddingLeft;

        horizontalAlign = true;

        if (CSS.position == 'relative' || CSS.position == 'static' || CSS.position == 'absolute') {

            CSS.position = 'absolute';
            defPaddingCenter = 4;
            defPaddingRight = 4;
            defPaddingLeft = 8;



        } else if (CSS.position == 'fixed') {

            defPaddingCenter = 4;
            defPaddingRight = 4;
            defPaddingLeft = 8;

        }

        if (horiz == 0) {

            if (!verticalAlign) {
                CSS.marginTop = defPadding;
            }
            CSS.marginLeft = defPaddingLeft + 'px';

        } else if (horiz == 1) {

            if (!verticalAlign) {
                CSS.marginTop = defPadding;
            }
            CSS.marginLeft = freeSpaceX - defPaddingCenter + 'px';

        } else if (horiz == 2) {

            if (!verticalAlign) {
                CSS.marginTop = defPadding;
            }
            CSS.marginLeft = (freeSpaceX - defPaddingRight) * 2 + 'px';

        }

    }

    this.verticalAlign = function(vertical) {

        var freeSpaceY = ((window.innerHeight - ELEMENT.offsetHeight) / 2);
        var defPadding = '8px';
        var defPaddingTop;
        var defPaddingMid;
        var defPaddingBot;

        verticalAlign = true;

        if (CSS.position == 'relative' || CSS.position == 'static') {

            CSS.position = 'absolute';

        }

        defPaddingTop = 8;
        defPaddingMid = 8;
        defPaddingBot = 8;

        if (vertical == 0) {

            if (!horizontalAlign) {
                CSS.marginLeft = defPadding;
            }
            CSS.marginTop = defPadding;


        } else if (vertical == 1) {

            if (!horizontalAlign) {
                CSS.marginLeft = defPadding;
            }
            CSS.marginTop = freeSpaceY - defPaddingMid + 'px';


        } else if (vertical == 2) {

            if (!horizontalAlign) {
                CSS.marginLeft = defPadding;
            }
            CSS.marginTop = (freeSpaceY * 2) - defPaddingBot + 'px';

        }

    }



}

index.php 中的setBorder 示例

var div1 = new Div();
div1.setPosition(Div.POSITION.ABSOLUTE);
div1.setBounds(0,700, 200,200);
div1.setColorQueue(0,0,0); //This method must be called every time a different color is needed for a certain attribute.
div1.createBorder(5, Div.BORDER.SOLID); // I really want something like this --> div1.createBorder(5,Div.BORDER.SOLID).setColor(0,0,0);

Answer 1

您可以尝试使用 Builder pattern :

function DivBuilder() {
    var color;
    var border;
    var position;
    var bounds;

    this.DivBuilder = function() {}

    this.color = function(c) {
        //set the color
        this.color = c;
        return this;
    }

    this.border = function(b) {
        //set the border
        this.border = b;
        return this;
    }

    this.position = function(p) {
        //set position
        this.position = p;
        return this;
    }

    this.bounds = function(b) {
        //set bounds
        this.border = b;
        return this;
    }

    this.build = function () {
        //build the new Div object with the properties of the builder
        var d = new Div(this);
        return d;
    }

}

然后:

var divb = new DivBuilder();
divb.position().bounds().border().color();
var div = divb.buid();

与 telescopic constructor pattern 相比的主要优势(好吧，它对 javascript 的改编)是您可以更轻松地选择要初始化的属性，而无需创建许多不同的构造函数案例。