Edwin's blog
0%

发表于 更新于 分类于

If module is referenced by index.html, all js below that module can use the function without referenced module, even needn’t import and module.js needn’t export.

If module.js doesn’t be referenced by index.html, other js can only import module.js function and which also need to export.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script src="./moduleC.js"></script>
<script src="./main.js" type="module"></script>
</html>
1
2
3
4
5
6
7
8
// main.js
console.log('main1')
import {a} from './moduleA.js'
import {moduleB} from './moduleB.js'
a()
moduleB()
moduleC()
console.log('main2')
1
2
3
4
5
6
7
// moduleA.js
import { moduleB } from './moduleB.js'
export var a = function(){
    moduleB()
    moduleC()
}
console.log('aaa')
1
2
3
4
5
// moduleB.js
export let moduleB = function(){
    console.log('moduleB');
}
console.log('bbb')
1
2
3
4
5
// moduleC.js
function moduleC() {
    console.log('moduleC');
}
console.log('ccc')
1
2
3
4
5
6
7
8
// output
ccc
bbb
aaa
moduleB
moduleC
moduleB
moduleC

Because moduleC.js is upper than main.js, so ccc first. And I guess all code should waiting the module loaded then run. First, import moduleA in faster than moduleB in main.js, and moduleB is referenced by moduleA. So it will output bbb first, then aaa. And moduleB.js has been referenced, so it wouldn’t occur again even main.js refer it.

发表于 更新于 分类于

HTMLDocument.style is point to DOM

1
2
3
4
5
6
7
8
9
10
11
<style>
.d{
	color: red;
}
</style>
<div class="d">DOM</div>
<script>
console.log(document.querySelector('.d').style.color)
// 空
</script>

1
2
3
4
5
6
7
8
9
10
11
<style>
.d{
	color: red;
}
</style>
<div class="d" style="color: green;">DOM</div>
<script>
console.log(document.querySelector('.d').style.color)
// green
</script>

So it mean HTMLDocument.style just refer html label. Even though you have written the color in css file but not written in html label, it just print ‘’ in terminal.

发表于 更新于 分类于

If you want to set a percentage width or height, you must sure the parent nood have set a fix width or height, min-width and min-height are not the kind of fix. normally, you can set a min-width and width to make a responsive website. This approach like flex-grow flex-shrink flex-base, flex-grow can automatically adjust, flex-base is set a base size.

flex-basis is a CSS property used in a flex container to define the initial size of a flex item before any extra space is distributed based on flex-grow or flex-shrink properties. Think of flex-basis as a starting point for the width (in a row layout) or height (in a column layout) of the flex item.

PS: If father flex-direction is row, the children can’t set width. Conversely, If the flex-direction is column, the height parameter of children will invalid. You only can set the flex-base to modify your main-axis sizing.

And the cross-axis sizing is default 100% without setting align-items.

GPT said

Your color-bar div isn’t taking up the full 60% height as expected due to a few potential issues. Here’s how to troubleshoot and fix this:

  1. section-one height constraints: Since section-one is defined to have a minimum height (min-height: 90vh), the color-bar div’s height of 60% is relative to the .section-one container, which can make the layout behave unexpectedly based on screen height.

  2. Parent container height: Because .section-one only has a min-height, its height can change if the content inside it grows, making color-bar‘s height unpredictable.

  3. Testing with height directly: To see the desired effect of color-bar taking up 60% of the viewport height, try setting its height explicitly as height: 60vh; (viewport height). Alternatively, ensure .section-one has a fixed height rather than just min-height.

Here’s the modified code with 60vh applied to color-bar:

1
2
3
<div class="color-bar" style="height: 60vh;">
    hi
</div>

Or set the height of .section-one to a fixed height, for example, 90vh, to make the 60% height work as intended:

1
2
3
4
5
6
7
8
.section-one {
    height: 90vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    position: relative;
}

This should help you see the color-bar at the expected height. Let me know if this works for you!

发表于 更新于 分类于

I make a adjust seat website, which increase my understanding of javascript.

I learned how to delate the loop

1
2
3
4
5
6
7
8
9
10
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function delayedLoop() {
    for (let i = 0; i < 10; i++) {
        await delay(1000);
        console.log(i);
    }
}
delayedLoop();

and 

1
2
3
4
5
for (let i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i);
    }, i * 1000);
}

Once, I make a sleep function, but I forget to return the Promise data.

Which let me impress. And I find that no need to change asyncfunction.

1
2
3
function sleep(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

Because it is no use to add async to sleep function, only add async to your operative function, adding await sleep(delate) just take effect. Otherwise, your operative wouldn’t wait the sleep function, running next code directly.

发表于 分类于

I try to use GPT to assist me to doing homework. It is really helpful and explain clearly, answering some deep and specific question.

me:

​ here is a topic”Working from home or working in the office:which is better?” I want to ask why this sentence use working form home instead of working in home or at home

GPT:

  • “From” implies origin or source, which makes sense here because it suggests that work is being done starting from a home location.
  • “In home” is not correct because “home” doesn’t function as a place you can be “inside” in this context.
  • “At home” could make sense in casual settings to mean you’re doing something at your residence, but in the phrase “working from home,” the focus is on the origin of the work, not the specific physical location.

in office. emphasizes being physically inside a specific place

from home. suggests that home is the starting point or base for
your work, without necessarily emphasizing a specific location within the home.

not only we can ask GPT explain, but also can let GPT revise your sentence like correct your grammar.

which can interpret detailedly why you get wrong .

发表于 更新于 分类于

whenever I want to build a new environment on python, it must disturb me a long time. Just now, I want to learn OCR suddenly, because I want to write a code which can automatically do the MCQ on website. I ever watch the course at bilibili, but it is not entire. I consider I need to learn how to read the official document and use the product.

paddleocr, I find that I can’t casual install or uninstall anything, like numpy, when I copy the code in terminal, it maybe install the suitable numpy automatically. If I reinstall it, it will get wrong.

If you have something wrong, maybe rebuild the environment is the best method.

发表于 更新于 分类于

I found a sentence “how about if you watch this movie with me?” in Duolingo. I’m curious why it would insert ‘if’ in the sentence above. Then, I asked GPT.

“how about if you watch this movie with me?” why the above sentence need to add ‘if’

The word “if” in the sentence “How about if you watch this movie with me?” is used to propose a hypothetical situation or suggestion. It introduces the idea that “watching the movie” is something the other person might choose to do. Without “if,” the sentence would sound more like a direct invitation rather than a suggestion for consideration.

Here’s a breakdown:

  • With “if”: “How about if you watch this movie with me?” This implies you’re offering the idea of watching the movie together, but you’re framing it as a possibility, leaving room for the other person to think about it.
  • Without “if”: “How about you watch this movie with me?” This comes across as more of a direct suggestion or invitation, where the choice seems less hypothetical and more like an expectation.

The “if” softens the suggestion, making it feel more open-ended and polite.

So, I learned it.