yuncms /
framework
| Conditions | 12 |
| Paths | 240 |
| Total Lines | 158 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like effect-size.js ➔ ... ➔ $.effects.define(ꞌsizeꞌ) often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /*! |
||
| 32 | return $.effects.define( "size", function( options, done ) { |
||
| 33 | |||
| 34 | // Create element |
||
| 35 | var baseline, factor, temp, |
||
| 36 | element = $( this ), |
||
| 37 | |||
| 38 | // Copy for children |
||
| 39 | cProps = [ "fontSize" ], |
||
| 40 | vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ], |
||
| 41 | hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ], |
||
| 42 | |||
| 43 | // Set options |
||
| 44 | mode = options.mode, |
||
| 45 | restore = mode !== "effect", |
||
| 46 | scale = options.scale || "both", |
||
| 47 | origin = options.origin || [ "middle", "center" ], |
||
| 48 | position = element.css( "position" ), |
||
| 49 | pos = element.position(), |
||
| 50 | original = $.effects.scaledDimensions( element ), |
||
| 51 | from = options.from || original, |
||
| 52 | to = options.to || $.effects.scaledDimensions( element, 0 ); |
||
| 53 | |||
| 54 | $.effects.createPlaceholder( element ); |
||
| 55 | |||
| 56 | if ( mode === "show" ) { |
||
| 57 | temp = from; |
||
| 58 | from = to; |
||
| 59 | to = temp; |
||
| 60 | } |
||
| 61 | |||
| 62 | // Set scaling factor |
||
| 63 | factor = { |
||
| 64 | from: { |
||
| 65 | y: from.height / original.height, |
||
| 66 | x: from.width / original.width |
||
| 67 | }, |
||
| 68 | to: { |
||
| 69 | y: to.height / original.height, |
||
| 70 | x: to.width / original.width |
||
| 71 | } |
||
| 72 | }; |
||
| 73 | |||
| 74 | // Scale the css box |
||
| 75 | if ( scale === "box" || scale === "both" ) { |
||
| 76 | |||
| 77 | // Vertical props scaling |
||
| 78 | if ( factor.from.y !== factor.to.y ) { |
||
| 79 | from = $.effects.setTransition( element, vProps, factor.from.y, from ); |
||
| 80 | to = $.effects.setTransition( element, vProps, factor.to.y, to ); |
||
| 81 | } |
||
| 82 | |||
| 83 | // Horizontal props scaling |
||
| 84 | if ( factor.from.x !== factor.to.x ) { |
||
| 85 | from = $.effects.setTransition( element, hProps, factor.from.x, from ); |
||
| 86 | to = $.effects.setTransition( element, hProps, factor.to.x, to ); |
||
| 87 | } |
||
| 88 | } |
||
| 89 | |||
| 90 | // Scale the content |
||
| 91 | if ( scale === "content" || scale === "both" ) { |
||
| 92 | |||
| 93 | // Vertical props scaling |
||
| 94 | if ( factor.from.y !== factor.to.y ) { |
||
| 95 | from = $.effects.setTransition( element, cProps, factor.from.y, from ); |
||
| 96 | to = $.effects.setTransition( element, cProps, factor.to.y, to ); |
||
| 97 | } |
||
| 98 | } |
||
| 99 | |||
| 100 | // Adjust the position properties based on the provided origin points |
||
| 101 | if ( origin ) { |
||
| 102 | baseline = $.effects.getBaseline( origin, original ); |
||
| 103 | from.top = ( original.outerHeight - from.outerHeight ) * baseline.y + pos.top; |
||
| 104 | from.left = ( original.outerWidth - from.outerWidth ) * baseline.x + pos.left; |
||
| 105 | to.top = ( original.outerHeight - to.outerHeight ) * baseline.y + pos.top; |
||
| 106 | to.left = ( original.outerWidth - to.outerWidth ) * baseline.x + pos.left; |
||
| 107 | } |
||
| 108 | element.css( from ); |
||
| 109 | |||
| 110 | // Animate the children if desired |
||
| 111 | if ( scale === "content" || scale === "both" ) { |
||
| 112 | |||
| 113 | vProps = vProps.concat( [ "marginTop", "marginBottom" ] ).concat( cProps ); |
||
| 114 | hProps = hProps.concat( [ "marginLeft", "marginRight" ] ); |
||
| 115 | |||
| 116 | // Only animate children with width attributes specified |
||
| 117 | // TODO: is this right? should we include anything with css width specified as well |
||
| 118 | element.find( "*[width]" ).each( function() { |
||
| 119 | var child = $( this ), |
||
| 120 | childOriginal = $.effects.scaledDimensions( child ), |
||
| 121 | childFrom = { |
||
| 122 | height: childOriginal.height * factor.from.y, |
||
| 123 | width: childOriginal.width * factor.from.x, |
||
| 124 | outerHeight: childOriginal.outerHeight * factor.from.y, |
||
| 125 | outerWidth: childOriginal.outerWidth * factor.from.x |
||
| 126 | }, |
||
| 127 | childTo = { |
||
| 128 | height: childOriginal.height * factor.to.y, |
||
| 129 | width: childOriginal.width * factor.to.x, |
||
| 130 | outerHeight: childOriginal.height * factor.to.y, |
||
| 131 | outerWidth: childOriginal.width * factor.to.x |
||
| 132 | }; |
||
| 133 | |||
| 134 | // Vertical props scaling |
||
| 135 | if ( factor.from.y !== factor.to.y ) { |
||
| 136 | childFrom = $.effects.setTransition( child, vProps, factor.from.y, childFrom ); |
||
| 137 | childTo = $.effects.setTransition( child, vProps, factor.to.y, childTo ); |
||
| 138 | } |
||
| 139 | |||
| 140 | // Horizontal props scaling |
||
| 141 | if ( factor.from.x !== factor.to.x ) { |
||
| 142 | childFrom = $.effects.setTransition( child, hProps, factor.from.x, childFrom ); |
||
| 143 | childTo = $.effects.setTransition( child, hProps, factor.to.x, childTo ); |
||
| 144 | } |
||
| 145 | |||
| 146 | if ( restore ) { |
||
| 147 | $.effects.saveStyle( child ); |
||
| 148 | } |
||
| 149 | |||
| 150 | // Animate children |
||
| 151 | child.css( childFrom ); |
||
| 152 | child.animate( childTo, options.duration, options.easing, function() { |
||
| 153 | |||
| 154 | // Restore children |
||
| 155 | if ( restore ) { |
||
| 156 | $.effects.restoreStyle( child ); |
||
| 157 | } |
||
| 158 | } ); |
||
| 159 | } ); |
||
| 160 | } |
||
| 161 | |||
| 162 | // Animate |
||
| 163 | element.animate( to, { |
||
| 164 | queue: false, |
||
| 165 | duration: options.duration, |
||
| 166 | easing: options.easing, |
||
| 167 | complete: function() { |
||
| 168 | |||
| 169 | var offset = element.offset(); |
||
| 170 | |||
| 171 | if ( to.opacity === 0 ) { |
||
| 172 | element.css( "opacity", from.opacity ); |
||
| 173 | } |
||
| 174 | |||
| 175 | if ( !restore ) { |
||
| 176 | element |
||
| 177 | .css( "position", position === "static" ? "relative" : position ) |
||
| 178 | .offset( offset ); |
||
| 179 | |||
| 180 | // Need to save style here so that automatic style restoration |
||
| 181 | // doesn't restore to the original styles from before the animation. |
||
| 182 | $.effects.saveStyle( element ); |
||
| 183 | } |
||
| 184 | |||
| 185 | done(); |
||
| 186 | } |
||
| 187 | } ); |
||
| 188 | |||
| 189 | } ); |
||
| 190 | |||
| 192 |
