Javascript - 需要Designpattern建议 [英] Javascript - Designpattern suggestion needed

问题描述

你好，

我在Javascript中有3个不同的功能，第一个替换用UL创建的HTML Selectboxs宽度自定义选择框。

I have 3 Different function in Javascript, the first one replaces HTML Selectboxs width custom selectbox created with ULs.

，另外2个分别替换Checkbox和Radio按钮。

and the other 2 replace Checkbox and Radio buttons respectivly.

现在我想从这些函数中派生出类，需要你的建议，会是什么是否可以将这些功能组织到课堂中，是否可以使用？

Now I want to derive classes out of these functions, and need your suggestions, what will be the best way to organize these functions into class, whether inheretance is possible?

我真的很高兴你的帮助。

I really appriciate your help.

谢谢。

以下是一些示例代码。

function replaceSelect(formid) {

    var form = $(formid);
    if (!form) return;

    invisibleSelectboes = document.getElementsByClassName("optionsDivInvisible");
    if (invisibleSelectboes.length > 0) {
        for (var i = 0; i < invisibleSelectboes.length; i++) {
            document.body.removeChild(invisibleSelectboes[i]);
        }
    }

    var selects = [];
    var selectboxes = form.getElementsByTagName('select');

    var selectText = "Bitte auswählen";
    var selectRightSideWidth = 21;
    var selectLeftSideWidth = 8;
    selectAreaHeight = 21;
    selectAreaOptionsOverlap = 2;

    // Access all Selectboxes in Search mask.
    for (var cfs = 0; cfs < selectboxes.length; cfs++) {
        selects.push(selectboxes[cfs]);
    }

    // Replace the select boxes
    for (var q = 0; q < selects.length; q++) {
        if (selects[q].className == "") continue;

        var onchangeEvent = selects[q].onchange;

        //create and build div structure
        var selectArea = document.createElement('div');
        var left = document.createElement('div');
        var right = document.createElement('div');
        var center = document.createElement('div');
        var button = document.createElement('a');
        //        var text = document.createTextNode(selectText);
        var text = document.createTextNode('');
        center.id = "mySelectText" + q;

        if ( !! selects[q].getAttribute("selectWidth")) {
            var selectWidth = parseInt(selects[q].getAttribute("selectWidth"));
        } else {
            var selectWidth = parseInt(selects[q].className.replace(/width_/g, ""));
        }

        center.style.width = selectWidth + 'px';
        selectArea.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';

        if (selects[q].style.display == 'none' || selects[q].style.visibility == 'hidden') {
            selectArea.style.display = 'none';
        }

        button.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';
        button.style.marginLeft = -selectWidth - selectLeftSideWidth + 'px';
        //  button.href = "javascript:toggleOptions( + q + ")";
        Event.observe(button, 'click', function (q) {
            return function (event) {
                clickObserver(event, q)
            }
        }(q));

        button.onkeydown = this.selectListener;
        button.className = "selectButton"; //class used to check for mouseover
        selectArea.className = "selectArea";

        selectArea.id = "sarea" + q;
        left.className = "left";
        right.className = "right";
        center.className = "center";
        right.appendChild(button);
        center.appendChild(text);
        selectArea.appendChild(left);
        selectArea.appendChild(right);
        selectArea.appendChild(center);
        //hide the select field
        selects[q].style.display = 'none';
        //insert select div
        selects[q].parentNode.insertBefore(selectArea, selects[q]);

        //build & place options div
        var optionsDiv = document.createElement('div');

        if (selects[q].getAttribute('width')) optionsDiv.style.width = selects[q].getAttribute('width') + 'px';
        else optionsDiv.style.width = selectWidth + 8 + 'px';

        optionsDiv.className = "optionsDivInvisible";
        optionsDiv.id = "optionsDiv" + q;
        optionsDiv.style.left = findPosX(selectArea) + 'px';
        optionsDiv.style.top = findPosY(selectArea) + selectAreaHeight - selectAreaOptionsOverlap + 'px';

        //get select's options and add to options div
        for (var w = 0; w < selects[q].options.length; w++) {
            var optionHolder = document.createElement('p');

            if (selects[q].options[w].className == "informal") {
                var optionLink = document.createElement('a');
                var optionTxt = document.createTextNode(selects[q].options[w].getAttribute('text'));
                optionLink.innerHTML = selects[q].options[w].getAttribute('text');
                optionLink.className = "informal";
                cic.addEvent(optionLink, 'click', function (event) {
                    Event.stop(event);
                });

                Event.observe(optionLink, 'mouseover', function (event) {
                    Event.stop(event);
                });

                Event.observe(optionLink, 'mouseout', function (event) {
                    Event.stop(event);
                });
            }
            else {
                var optionLink = document.createElement('a');
                var optionTxt = document.createTextNode(selects[q].options[w].text);
                optionLink.appendChild(optionTxt);
                cic.addEvent(optionLink, 'click', function (id, w, q, onchangeEvent) {
                    return function () {
                        showOptions(q);
                        selectMe(selects[q].id, w, q, onchangeEvent);
                    }
                }(selects[q].id, w, q, onchangeEvent));
            }

            //optionLink.href = "javascript:showOptions(" + q + "); selectMe('" + selects[q].id + "'," + w + "," + q + ");";

            optionHolder.appendChild(optionLink);
            optionsDiv.appendChild(optionHolder);

            if (selects[q].options[w].selected) {
                selectMe(selects[q].id, w, q);
            }
        }
        document.getElementsByTagName("body")[0].appendChild(optionsDiv);
        Event.observe(optionsDiv, 'mouseleave', function (submenuid) {
            optionsDiv.className = 'optionsDivInvisible'
        });

        cic.addEvent(optionsDiv, 'click', function (event) {
            if (event.stopPropagation) event.stopPropagation();
            else event.cancelBubble = true;
        });

    }
    form.setStyle({
        visibility: 'visible'
    });
}​

推荐答案

所有答案都是一般的模式我认为它们都不是真的有用。仅仅因为你将3个巨大的函数放入一个对象中并不能使你的代码模块化，可重用，可维护。

All the answers are general patterns I think none of them is really helpful. Just because you put your 3 huge function into an object doesn't make your code modular, reusable, maintainable.

所以我的第一个建议就是利用 功能分解 。你提到了继承。现在，如果您的代码基本上由这3个巨型函数组成，则无法继承或共享任何内容。您应该将功能逻辑按目的分成更小，更直接的功能逻辑。

So my first suggestion is to utilize function decomposition. You've mentioned inheritance. Now if your code is basically made of this 3 giant functions nothing can be inherited or shared. You should separate function logic by purpose into smaller, more straighforward ones.

一个很好的例子就是你提到替换一词在所有情况下都是相关的。也许你可以设置一个独立于元素类型负责DOM替换的函数。这样的功能可以在您的模块之间共享，使您的代码更加健壮，并允许您 DRY 。

A good example is that you've mentioned the word replacing is relevant in all your cases. Maybe you can set up a function that is responsible for DOM replacement independently of the element's type. Such function can be shared between your modules making your code more robust and allowing you to DRY.

组织此过程的最佳方式称为一厢情愿，当您使用以下函数解决问题时直观和有用，即使它们甚至可能不存在。这与您如何设计有效的相互作用有关。

The best way to organize this process is called wishful thinking, when you solve your problem with functions which are intuitive and helpful even though they may not even exist. This is related to how you can design effective interaces.

这篇关于Javascript - 需要Designpattern建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！