yuncms /
framework
| Conditions | 28 |
| Paths | 9750 |
| Total Lines | 168 |
| 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 load-image-scale.js ➔ ... ➔ loadImage.scale 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 | /* |
||
| 116 | loadImage.scale = function (img, options, data) { |
||
| 117 | options = options || {} |
||
| 118 | var canvas = document.createElement('canvas') |
||
| 119 | var useCanvas = |
||
| 120 | img.getContext || |
||
| 121 | (loadImage.hasCanvasOption(options) && canvas.getContext) |
||
| 122 | var width = img.naturalWidth || img.width |
||
| 123 | var height = img.naturalHeight || img.height |
||
| 124 | var destWidth = width |
||
| 125 | var destHeight = height |
||
| 126 | var maxWidth |
||
| 127 | var maxHeight |
||
| 128 | var minWidth |
||
| 129 | var minHeight |
||
| 130 | var sourceWidth |
||
| 131 | var sourceHeight |
||
| 132 | var sourceX |
||
| 133 | var sourceY |
||
| 134 | var pixelRatio |
||
| 135 | var downsamplingRatio |
||
| 136 | var tmp |
||
| 137 | function scaleUp () { |
||
| 138 | var scale = Math.max( |
||
| 139 | (minWidth || destWidth) / destWidth, |
||
| 140 | (minHeight || destHeight) / destHeight |
||
| 141 | ) |
||
| 142 | if (scale > 1) { |
||
| 143 | destWidth *= scale |
||
| 144 | destHeight *= scale |
||
| 145 | } |
||
| 146 | } |
||
| 147 | function scaleDown () { |
||
| 148 | var scale = Math.min( |
||
| 149 | (maxWidth || destWidth) / destWidth, |
||
| 150 | (maxHeight || destHeight) / destHeight |
||
| 151 | ) |
||
| 152 | if (scale < 1) { |
||
| 153 | destWidth *= scale |
||
| 154 | destHeight *= scale |
||
| 155 | } |
||
| 156 | } |
||
| 157 | if (useCanvas) { |
||
| 158 | options = loadImage.getTransformedOptions(img, options, data) |
||
| 159 | sourceX = options.left || 0 |
||
| 160 | sourceY = options.top || 0 |
||
| 161 | if (options.sourceWidth) { |
||
| 162 | sourceWidth = options.sourceWidth |
||
| 163 | if (options.right !== undefined && options.left === undefined) { |
||
| 164 | sourceX = width - sourceWidth - options.right |
||
| 165 | } |
||
| 166 | } else { |
||
| 167 | sourceWidth = width - sourceX - (options.right || 0) |
||
| 168 | } |
||
| 169 | if (options.sourceHeight) { |
||
| 170 | sourceHeight = options.sourceHeight |
||
| 171 | if (options.bottom !== undefined && options.top === undefined) { |
||
| 172 | sourceY = height - sourceHeight - options.bottom |
||
| 173 | } |
||
| 174 | } else { |
||
| 175 | sourceHeight = height - sourceY - (options.bottom || 0) |
||
| 176 | } |
||
| 177 | destWidth = sourceWidth |
||
| 178 | destHeight = sourceHeight |
||
| 179 | } |
||
| 180 | maxWidth = options.maxWidth |
||
| 181 | maxHeight = options.maxHeight |
||
| 182 | minWidth = options.minWidth |
||
| 183 | minHeight = options.minHeight |
||
| 184 | if (useCanvas && maxWidth && maxHeight && options.crop) { |
||
| 185 | destWidth = maxWidth |
||
| 186 | destHeight = maxHeight |
||
| 187 | tmp = sourceWidth / sourceHeight - maxWidth / maxHeight |
||
| 188 | if (tmp < 0) { |
||
| 189 | sourceHeight = maxHeight * sourceWidth / maxWidth |
||
| 190 | if (options.top === undefined && options.bottom === undefined) { |
||
| 191 | sourceY = (height - sourceHeight) / 2 |
||
| 192 | } |
||
| 193 | } else if (tmp > 0) { |
||
| 194 | sourceWidth = maxWidth * sourceHeight / maxHeight |
||
| 195 | if (options.left === undefined && options.right === undefined) { |
||
| 196 | sourceX = (width - sourceWidth) / 2 |
||
| 197 | } |
||
| 198 | } |
||
| 199 | } else { |
||
| 200 | if (options.contain || options.cover) { |
||
| 201 | minWidth = maxWidth = maxWidth || minWidth |
||
| 202 | minHeight = maxHeight = maxHeight || minHeight |
||
| 203 | } |
||
| 204 | if (options.cover) { |
||
| 205 | scaleDown() |
||
| 206 | scaleUp() |
||
| 207 | } else { |
||
| 208 | scaleUp() |
||
| 209 | scaleDown() |
||
| 210 | } |
||
| 211 | } |
||
| 212 | if (useCanvas) { |
||
| 213 | pixelRatio = options.pixelRatio |
||
| 214 | if (pixelRatio > 1) { |
||
| 215 | canvas.style.width = destWidth + 'px' |
||
| 216 | canvas.style.height = destHeight + 'px' |
||
| 217 | destWidth *= pixelRatio |
||
| 218 | destHeight *= pixelRatio |
||
| 219 | canvas.getContext('2d').scale(pixelRatio, pixelRatio) |
||
| 220 | } |
||
| 221 | downsamplingRatio = options.downsamplingRatio |
||
| 222 | if ( |
||
| 223 | downsamplingRatio > 0 && |
||
| 224 | downsamplingRatio < 1 && |
||
| 225 | destWidth < sourceWidth && |
||
| 226 | destHeight < sourceHeight |
||
| 227 | ) { |
||
| 228 | while (sourceWidth * downsamplingRatio > destWidth) { |
||
| 229 | canvas.width = sourceWidth * downsamplingRatio |
||
| 230 | canvas.height = sourceHeight * downsamplingRatio |
||
| 231 | loadImage.renderImageToCanvas( |
||
| 232 | canvas, |
||
| 233 | img, |
||
| 234 | sourceX, |
||
| 235 | sourceY, |
||
| 236 | sourceWidth, |
||
| 237 | sourceHeight, |
||
| 238 | 0, |
||
| 239 | 0, |
||
| 240 | canvas.width, |
||
| 241 | canvas.height |
||
| 242 | ) |
||
| 243 | sourceX = 0 |
||
| 244 | sourceY = 0 |
||
| 245 | sourceWidth = canvas.width |
||
| 246 | sourceHeight = canvas.height |
||
| 247 | img = document.createElement('canvas') |
||
| 248 | img.width = sourceWidth |
||
| 249 | img.height = sourceHeight |
||
| 250 | loadImage.renderImageToCanvas( |
||
| 251 | img, |
||
| 252 | canvas, |
||
| 253 | 0, |
||
| 254 | 0, |
||
| 255 | sourceWidth, |
||
| 256 | sourceHeight, |
||
| 257 | 0, |
||
| 258 | 0, |
||
| 259 | sourceWidth, |
||
| 260 | sourceHeight |
||
| 261 | ) |
||
| 262 | } |
||
| 263 | } |
||
| 264 | canvas.width = destWidth |
||
| 265 | canvas.height = destHeight |
||
| 266 | loadImage.transformCoordinates(canvas, options) |
||
| 267 | return loadImage.renderImageToCanvas( |
||
| 268 | canvas, |
||
| 269 | img, |
||
| 270 | sourceX, |
||
| 271 | sourceY, |
||
| 272 | sourceWidth, |
||
| 273 | sourceHeight, |
||
| 274 | 0, |
||
| 275 | 0, |
||
| 276 | destWidth, |
||
| 277 | destHeight |
||
| 278 | ) |
||
| 279 | } |
||
| 280 | img.width = destWidth |
||
| 281 | img.height = destHeight |
||
| 282 | return img |
||
| 283 | } |
||
| 284 | }) |
||
| 285 |
Loading history...