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"
         }
     ]);
 }