Task 3 has been released. The task period for the beginner class is from May 7th to May 18th, and for the intermediate class is from April 30th to May 10th.
TASK 0003 Content: https://github.com/baidu-ife/ife/tree/master/task/task0003
What I did: https://github.com/DIYgod/ife-work/tree/master/task0003
Online Demo: https://www.anotherhome.net/file/ife/task0003/
This task took a total of 10 days (May 6th to May 16th).
Below are some records of my process in completing TASK 0003.
1. JavaScript Scope (Reference: Bird Brother: JavaScript Scope Principle Understanding JavaScript Scope and Scope Chain)
Functions in JavaScript run in the scope they are defined in, not the scope they are executed in.
JS has a pre-compilation process. Before executing each segment of JS code, JS will first process the var keyword and function definitions (function declarations and function expressions). Before calling a function, it will first create an activation object, then search for local variable definitions and function definitions in this function, and use the variable names and function names as properties of this activation object. For local variable definitions, the value of the variable will be calculated only when it is actually executed, at which point it will be simply assigned as undefined.
Inspiration for code optimization:
From the structure of the scope chain, it can be seen that the deeper the position of an identifier in the runtime context's scope chain, the slower the reading and writing speed. Because global variables always exist at the end of the runtime context's scope chain, looking up global variables is the slowest. Therefore, when writing code, try to use global variables as little as possible and use local variables as much as possible. A good rule of thumb is: if a cross-scope object is referenced more than once, store it in a local variable before using it.
For example, the following code:
This function references the global variable document twice. Looking up this variable requires traversing the entire scope chain until it is found in the global object. This code can be rewritten as follows:
This code is relatively simple, and rewriting it will not show a significant performance improvement. However, if there are many global variables being accessed repeatedly in the program, the performance of the rewritten code will be significantly improved.
2. Height Auto-Adjustment (Reference: CSS Layout Tips and Tricks - Height Auto-Adjustment)
Height auto-adjustment is not as simple as width auto-adjustment and is slightly more complex in terms of browser compatibility.
However, simply writing height: 100%; doesn't work. You need to do this:
3. Mysterious Gap that Appears and Disappears on its Own
Here's the situation: everything was fine with the page yesterday (May 12th), but when I woke up this morning and refreshed the page, the page had changed. There were gaps to the right and below the elements with the overflow: scroll CSS property, as shown in the images:
And if I remove the overflow: scroll property, the gaps disappear. I tested this in Chrome and Safari, and the issue occurred in both browsers. I also tried clearing the cache, but it didn't solve the problem. So I committed the code at that time and pushed it to GitHub.
In the afternoon, in the same tab and on the same page, I refreshed and the bug disappeared on its own. At this time, the code had only a few minor and insignificant changes compared to the morning. I committed the code again and pushed it to GitHub (all changes are recorded on GitHub). I took another screenshot:
Note: I tested Chrome and Safari browsers and cleared the cache after both changes.
At this point, I have no clue and can't reproduce the issue, so I can't investigate further.
I suspect it's a bug with Mac.
4. JavaScript Object and JSON Text Conversion (Reference: JavaScript Object and JSON String Conversion JSON Tutorial - W3CSCHOOL)
eval function: Converts JSON text to JavaScript object; calls JavaScript editor; very fast, but may have security issues
Using JSON parser:
JSON.parse function: Converts JSON text to JavaScript object
JSON.stringify function: Converts JavaScript object to JSON text
5. Textarea and Input Sizes Larger than Expected
Thanks to Li Sheng for the help.
This problem is actually quite simple, but I didn't think of it at first and it was quite puzzling. Here's the code:
See the Pen RPaJpb by DIYgod (@DIYgod) on CodePen.
The problem is that the textarea and input are 6px wider than the set width, which was bothering my perfectionism. In fact, these two elements have a default 2px padding and 1px border. Adding the following CSS to these elements will solve the issue:
Or a more elegant solution:
That's it.
☆ﾐ(o*･ω･)ﾉ The end. Waiting for review.