webstorm抽取函数

webstrom

1.extact 抽取函数：选中代码，右键，refactor-extact

function matchPicLink() {
    var $match = $('#match');
    var mWidth = Math.floor($match.width());
    var mWidthHalf = Math.floor(mWidth / 2);
    $match.css({
        "width": mWidth,
//            "height": Math.floor(mWidth * 757 / 692) //按原宽高比缩放,height=mWidth* height0/width0
        "height": computeHeight(mWidth, 692, 757)
    });
    var mHeight = $match.height();
    var mHeightHalf = Math.floor(mHeight / 2);
    $(".poloShirt").css({
        "width": Math.floor(mHeight * 3 / 5),
        "background": "rgba(9,200,200,0.5)",
        "height": mHeightHalf
    });
    $(".poloShirt").click(function () {
        window.location.href = 'https://&0&商品id';
    });
    $(".vest").css({
        "width": mWidthHalf,
        "background": "rgba(9,200,200,0.5)",
        "height": mHeightHalf
    });
    $(".vest").click(function () {
        window.location.href = 'https://&0&商品id';
    });
}

抽取函数，传入参数。哪些可以传参

因为子类有多个，所有将子类作为数组传入；并且子类含有很多属性和方法，如css以及click，所有数组中每个对象是json，即{key：value}，调用的时候就是obj.key,所以将key作为参数传入。综合来看，就是

 childClassObjs[i]={cName：cName,

ratioMoleculeW ：ratioMoleculeW

ratioMoleculeH ：ratioMoleculeH
url：url

}

function picLinkInit(parentClassName, imgW, imgH, childClassObjs) {
    var $match = $(parentClassName);
    var mWidth = Math.floor($match.width());

    var mHeight = computeHeight(mWidth, imgW, imgH);
    $match.css({
        "width": mWidth,
        "height": mHeight
    });
    for (var i = 0; i < childClassObjs.length; i++) {
        var childClassObj = childClassObjs[i];

        $(childClassObj.cName).css({
            "width": Math.floor(mWidth * childClassObj.ratioMoleculeW / childClassObj.ratioDenominatorW),
          // "background": "rgba(9,200,200,0.5)",
            "height": Math.floor(mHeight * childClassObj.ratioMoleculeH / childClassObj.ratioDenominatorH)
        });
       /* if (childClassObj.url) {
            $(childClassObj.cName).click(function () {
                window.location.href =childClassObj.url;
            });
        }*/
        (function (i) {
            if ( childClassObjs[i].url) {
                $( childClassObjs[i].cName).click(function () {
                    window.location.href = childClassObjs[i].url;
                });
            }
        })(i);

    }

调用的时候是：

function matchPicLink4() {
    picLinkInit("#match4", 692, 677, [
        {
            "cName": ".aca4coat1",
            "ratioMoleculeW": 16,
            "ratioDenominatorW": 24,
            "ratioMoleculeH": 7,
            "ratioDenominatorH": 24,
            "url": "https://&0&0&4675"
        },  {
            "cName": ".aca4coat2",
            "ratioMoleculeW": 10,
            "ratioDenominatorW": 24,
            "ratioMoleculeH": 7,
            "ratioDenominatorH": 24,
            "url": "https://&0&0&4675"
        }
    ]);
}