banner
DIYgod

Hi, DIYgod

写代码是热爱,写到世界充满爱!
github
twitter
bilibili
telegram
email
steam
playstation
nintendo switch

Baidu Frontend Technology College Coding Challenge (TASK 0003)

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:

function changeColor(){
    document.getElementById("btnChange").onclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

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:

function changeColor(){
    var doc=document;
    doc.getElementById("btnChange").onclick=function(){
        doc.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

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:

position: absolute;
top: 60px;
bottom: 0;

 

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:

task0003_1

task0003_2

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:

task0003_3

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

var obj = eval('(' + JSONTest + ')');

Using JSON parser:

JSON.parse function: Converts JSON text to JavaScript object

JSON.parse(text[, reviver])

JSON.stringify function: Converts JavaScript object to JSON text

JSON.stringify(value[, replacer[, space]])

 

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:

padding: 0;
border: 0;

Or a more elegant solution:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

That's it.

 

☆ミ(o*・ω・)ノ The end. Waiting for review.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.