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 函数（类似于 Factory），它接受类型并执行 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.

  }
}

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

Javascript/Jquery Load Callback and Writing a Base Function

html

javascript

jquery

jquery-load