Javascript/Jquery 加载回调和编写基本函数

Question

这可能是一个重复的问题，但我不知道如何用短语搜索它。我对 JS 属性不是很熟悉。

案例：

假设我创建了一些元素类型，例如文本、图像、音频、视频等，并假设我赋予它们相同的能力，例如拖动、旋转、调整大小等。为简单起见，让我们考虑这两个元素：文本和图像.

问题：

假设我需要获取这两个元素的大小并将它们设置为它们的包装 div。

• 文本元素很简单，我可以立即获取大小并设置包装div的大小。

• 图像元素等待图像的加载，它的大小只能在加载发生后设置，即在其加载回调中。

简单示例

function createText(){
    var aDiv = createWrapperDiv(); // <div class="element"></div>
    var anElem = $('<textarea></textarea>')
    aDiv.append(anElem)

    // can set immediately
    aDiv.attr('width', anElem.width());
    aDiv.attr('height', anElem.height());

    // Some other size-DEPENDENT and size-INDEPENDENT stuff can both be done here.
    sizeDependentStuff();
    sizeIndependentStuff();

}

function createImage(){
    var aDiv = createWrapperDiv(); // <div class="element"></div>
    var anElem = $('<img>')
    aDiv.append(anElem)

    // need to wait for element to load.
    anElem.attr('src',imageUrl)
    anElem.load(function(e) {
        aDiv.attr('width', e.currentTarget.width());
        aDiv.attr('height', e.currentTarget.height());

        // Some other size-DEPENDENT stuff.
        sizeDependentStuff();
    });

    // Some other size-INDEPENDENT stuff.
    sizeIndependentStuff();

}

我想要什么：

我想定义一个 createSimpleElement 函数（类似于工厂的东西），它接受类型并同时执行 sizeDependentStuff 和 sizeIndependentStuff，以便我可以重用相同的代码。请注意，我有 2 种以上的类型，并且数量可以增加。我找不到合适的方法来处理加载过程。

我希望它很清楚，请考虑我仍在学习过程中。

谢谢。

Answer 1

这样的事情呢？

function base(parentElement, element){
    parentElement.append(element);
    parentElement.attr('width', element.width());
    parentElement.attr('width', element.width());
    /*other common properties...*/
}

function createText(){
    var aDiv = createWrapperDiv();
    var anElem = $('<textarea></textarea>')
    base(aDiv, anElem);    
}

function createImage(){
    var aDiv = createWrapperDiv();
    var anElem = $('<img>')
    anElem.attr('src',imageUrl)
    anElem.load(function(e) {
        base(aDiv, anElem);   
    });

    // Some other size-INDEPENDENT stuff.

  }
}