Javascript嵌套函数调用

hs1ihplo  于 2023-05-27  发布在  Java
关注(0)|答案(3)|浏览(114)

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

参见jLibrary.php中函数Div中setBorder Nested

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);
t2a7ltrp

t2a7ltrp1#

您可以尝试使用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)是,你可以更容易地选择你想要初始化的属性,而不必创建许多不同的构造函数。

oyt4ldly

oyt4ldly2#

如果你想写这个.createBorder(...).setColor(...)这意味着createBorder应该返回一个带有setColor方法的对象...

to94eoyn

to94eoyn3#

多亏了Sebas我才能想出这个...

嵌套在this.createBorder()中

this.createBorder = function(width) {

        CSS.border = width + 'px';

        function DivBorderBuilder() {

            this.setColor = function(r, b, g) {
                alert('color');
                CSS.borderColor = 'rgb(' + new Array(r, g, b) + ')';
                return this;
            }
            
            this.setStyle = function(s){
                
                CSS.borderStyle = s;
                
                return this;
            }

        }return new DivBorderBuilder();

    }

在index.php中创建边框

<script>

var div1 = new Div();
div1.setPosition(Div.POSITION.ABSOLUTE);
div1.setBounds(0,700, 200,200);
div1.createBorder(5).setStyle(Div.BORDER.SOLID).setColor(255,0,0);// Works Perfectly Now !

</script>

相关问题