Let’s look at the original code
Actually, this is an old project that could have just solved the bugs and done nothing else. But there is no way, ocD is more serious, ha ha! The code looks like this:
$scope.proInfoChange = function( info ) {
if (($scope.newInfo.Width >=screenWidth )||($scope.newInfo.Height >=screenHeight )) {
var scaleX = screenWidth / $scope.newInfo.Width;
var scaleY = screenHeight / $scope.newInfo.Height;
var scale;
if (scaleX < scaleY) {
scale = scaleX;
info.Width = parseInt(screenWidth/scale);
info.Height = parseInt($scope.newInfo.Height)
}else{
scale = scaleY;
info.Width = parseInt($scope.newInfo.Width);
info.Height = parseInt(screenHeight/scale);
}
info.Scale = parseFloat(scale.toFixed(2));
$scope.newInfo.Scale=info.Scale;
// $scope.maxScale = info.Scale;
// sessionStorage.setItem("maxScale",JSON.stringify($scope.maxScale))
// sessionStorage.setItem("displayInfo",JSON.stringify($scope.newInfo))
}else if ($scope.newInfo.Width &&$scope.newInfo.Height &&$scope.newInfo.Width < screenWidth &&$scope.newInfo.Height < screenHeight ) {
info.Width = $scope.newInfo.Width;
info.Height = $scope.newInfo.Height;
$scope.newInfo.Scale=info.Scale = 1;
}else{
return false
}
preview.setWinfoBase(info);
var value = JSON.stringify(info);
sessionStorage.setItem("windowInfo",value);
dataChange();
};
Copy the codeDoes that make sense? Do you look confused?
What this code does is that the page has a container, and when you change the size of the container, compare its size to the viewport size, and scale it to avoid exceeding the viewport size. Of course, this method is not written by myself, I also read the context carefully to know. Now let’s start optimizing!
To optimize
Step 1: Delete expired comments
Delete all the commented out code and use Git when you want it back. Git is a basic operation, you must know. So the code looks like this:
$scope.proInfoChange = function( info ) {
if (($scope.newInfo.Width >=screenWidth )||($scope.newInfo.Height >=screenHeight )) {
var scaleX = screenWidth / $scope.newInfo.Width;
var scaleY = screenHeight / $scope.newInfo.Height;
var scale;
if (scaleX < scaleY) {
scale = scaleX;
info.Width = parseInt(screenWidth/scale);
info.Height = parseInt($scope.newInfo.Height)
}else{
scale = scaleY;
info.Width = parseInt($scope.newInfo.Width);
info.Height = parseInt(screenHeight/scale);
}
info.Scale = parseFloat(scale.toFixed(2));
$scope.newInfo.Scale=info.Scale;
}else if ($scope.newInfo.Width &&$scope.newInfo.Height &&$scope.newInfo.Width < screenWidth &&$scope.newInfo.Height < screenHeight ) {
info.Width = $scope.newInfo.Width;
info.Height = $scope.newInfo.Height;
$scope.newInfo.Scale=info.Scale = 1;
}else{
return false
}
preview.setWinfoBase(info);
var value = JSON.stringify(info);
sessionStorage.setItem("windowInfo",value);
dataChange();
};
Copy the codeStep 2: Merge variable declarations
There are four vArs in the code, which is the equivalent of four declarations, and the syntax interpreter’s brain is too much work to do. We can combine them into one sentence. So the code looks like this:
$scope.proInfoChange = function( info ) {
var scaleX = screenWidth / $scope.newInfo.Width,
scaleY = screenHeight / $scope.newInfo.Height,
scale,
value;
if (($scope.newInfo.Width >=screenWidth )||($scope.newInfo.Height >=screenHeight )) {
if (scaleX < scaleY) {
scale = scaleX;
info.Width = parseInt(screenWidth/scale);
info.Height = parseInt($scope.newInfo.Height)
}else{
scale = scaleY;
info.Width = parseInt($scope.newInfo.Width);
info.Height = parseInt(screenHeight/scale);
}
info.Scale = parseFloat(scale.toFixed(2));
$scope.newInfo.Scale=info.Scale;
}else if ($scope.newInfo.Width &&$scope.newInfo.Height &&$scope.newInfo.Width < screenWidth &&$scope.newInfo.Height < screenHeight ) {
info.Width = $scope.newInfo.Width;
info.Height = $scope.newInfo.Height;
$scope.newInfo.Scale=info.Scale = 1;
}else{
return false
}
preview.setWinfoBase(info);
value = JSON.stringify(info);
sessionStorage.setItem("windowInfo",value);
dataChange();
};
Copy the codeStep 3: Cache variables that occur more than once
$scope.newinfo. Width and $scope.newinfo. Height appear 6 times each, and both variables are in a multi-layer nested object. The code looks like this:
$scope.proInfoChange = function( info ) {
var newInfo = $scope.newInfo,
newW = newInfo.Width,
newH = newInfo.Height,
scaleX = screenWidth / newW,
scaleY = screenHeight / newH,
scale,
value;
if ((newW >=screenWidth )||(newH >=screenHeight )) {
if (scaleX < scaleY) {
scale = scaleX;
info.Width = parseInt(screenWidth/scale);
info.Height = parseInt(newH)
}else{
scale = scaleY;
info.Width = parseInt(newW);
info.Height = parseInt(screenHeight/scale);
}
info.Scale = parseFloat(scale.toFixed(2));
$scope.newInfo.Scale=info.Scale;
}else if (newW &&newH &&newW < screenWidth &&newH < screenHeight ) {
info.Width = newW;
info.Height = newH;
$scope.newInfo.Scale=info.Scale = 1;
}else{
return false
}
preview.setWinfoBase(info);
value = JSON.stringify(info);
sessionStorage.setItem("windowInfo",value);
dataChange();
};
Copy the codeStep 4: Code logic optimization
This is where patience becomes more demanding, as we need to clarify the code logic and the specific business logic. The business logic is that the user can input the width and height of the container to change the size of the container, and scale the container equally if it exceeds the size of the viewport. Info is the data that needs to be saved, and its structure looks like this:
{
Width: 512,
Height: 256,
Scale: 1
}
Copy the codeNewInfo is a copy of info. , and the input box in the page for bidirectional binding, in order to feedback user input.
A closer look shows a lot of if… else… And,
else {
return false
}
Copy the codeObviously it can be removed. And then this paragraph
var newInfo = $scope.newInfo,
newW = newInfo.Width,
newH = newInfo.Height,
scaleX = screenWidth / newW,
scaleY = screenHeight / newH,
scale,
value;
if ((newW >=screenWidth )||(newH >=screenHeight )) {
...
}else if (newW &&newH &&newW < screenWidth &&newH < screenHeight ) {
...
}
Copy the codeWhen the width or height of the container exceeds the viewport, do something else or do nothing else. So the if… else if… Else can be further optimized as:
if (newW && newH) {
if ((newW >=screenWidth) || (newH >= screenHeight)) {
...
} else{... }}Copy the codeThe code then looks like this:
$scope.proInfoChange = function( info ) {
var newInfo = $scope.newInfo,
newW = newInfo.Width,
newH = newInfo.Height,
scaleX = screenWidth / newW,
scaleY = screenHeight / newH,
scale,
value;
if (newW && newH) {
if ((newW >=screenWidth) || (newH >= screenHeight)) {
if (scaleX < scaleY) {
scale = scaleX;
info.Width = parseInt(screenWidth/scale);
info.Height = parseInt(newH)
}else{
scale = scaleY;
info.Width = parseInt(newW);
info.Height = parseInt(screenHeight/scale);
}
info.Scale = parseFloat(scale.toFixed(2));
$scope.newInfo.Scale=info.Scale;
} else {
info.Width = newW;
info.Height = newH;
$scope.newInfo.Scale=info.Scale = 1;
}
preview.setWinfoBase(info);
value = JSON.stringify(info);
sessionStorage.setItem("windowInfo",value); dataChange(); }};Copy the codeStep 5: Modify the faulty business logic
In fact, the code is mainly to solve this Bug. As mentioned earlier, newInfo is the user input and info is the data to save, located on $scope. But in this code, the user’s input is obviously tampered with, resulting in “what you see is not what you get” consequences. So we need to get rid of the tampering. With a few tweaks, the code looks like this:
$scope.$watch("newInfo".function(newValue) {
Object.assign($scope.info, newValue);
proInfoChange();
}, true); // Remove the manual assignment of height and width so as not to be inconsistent with the input field values, resulting in "what you see is not what you get".function proInfoChange () {
var newInfo = $scope.newInfo,
newW = typeof newInfo.Width === 'number' ? newInfo.Width : null,
newH = typeof newInfo.Height === 'number' ? newInfo.Height : null,
info = $scope.info;
if (newW && newH) {
if ((newW >= screenWidth )||(newH >= screenHeight )) {
var scaleX = (screenWidth / newW).toFixed(2),
scaleY = (screenHeight / newH).toFixed(2);
newInfo.Scale = info.Scale = scaleX < scaleY ? parseFloat(scaleX) : parseFloat(scaleY);
} else {
newInfo.Scale = info.Scale = 1;
}
preview.setWinfoBase(info);
sessionStorage.setItem("windowInfo", JSON.stringify(info)); dataChange(); }}Copy the codeThe logic of this code is to listen for the user’s input, cache it in $scope.info when the user changes the width and height for saving, and then use the proInfoChange method to calculate the scale to control the container size.
conclusion
