异步编程是JavaScript中的一个重要概念。为了理解异步编程，首先需要了解同步编程的工作原理。在同步编程中，代码按行执行，每行必须在下一行开始之前完成执行。当处理长时间运行的任务或需要等待外部资源时，这可能会导致性能问题。
JavaScript中的异步编程允许非阻塞代码执行，这意味着代码可以在等待长时间运行的任务或外部资源时继续运行。这是通过使用回调函数、Promise和async/await实现的。
回调函数是作为参数传递给其他函数并在原始函数完成其任务时执行的函数。Promise是表示异步操作的最终完成或失败的对象，并允许编写更可读和可维护的代码。
async/await是一种新的语法，通过使用关键字“async”和“await”来处理Promise，从而实现更可读和可维护的异步代码。

#### 回调

先从一个回调函数开始：

    function cb(callback){
        callback()
    }
    cb(()=>{console.log("callback函数")})

回调函数的参数中会有一个函数的参数。

下面的这个回调函数，调用了一个自定义的函数：

    function cb1(callback){
        const rest = {name:"callbackdata"}
        callback(rest)
    }

    function print_rest(rest){
        console.log(rest)
    }

    cb1(print_rest)

第三个回调函数加入了`setTimeout`：

    function fetchData(name, callback) {
        setTimeout(() => {
            const data = {name: name};
            callback(data);
        }, 3000);
    }

    fetchData("one", (data) => {
        console.log(data);
    });

这会使代码运行3秒后打印数据。其实最开始的时候我也不太理解回调，运行一下这三个函数试试理解一下。
在此示例中，fetchData函数使用setTimeout函数模拟从外部资源获取数据，以延迟执行回调函数1秒钟。fetchData函数接受一个回调函数作为参数，在可用时使用获取的数据执行该函数。
回调函数可能很快变得难以管理，并导致回调地狱，其中嵌套的回调函数变得难以阅读和维护。Promise可以通过允许编写更可读和可维护的代码来帮助缓解此问题.

#### Promise

以下是使用Promise处理JavaScript中的异步代码的示例：

    function fetchData_a() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const data = {name: "two"};
                resolve(data);
            }, 2000);
        });
    }

    fetchData_a()
        .then((data) => {
            console.log(data);
        })
        .catch((error) => {
            console.error(error);
        });


在此示例中，fetchData_a函数返回一个Promise，该Promise在可用时解析为获取的数据。使用then方法处理已解析的Promise并将数据记录到控制台.使用catch方法处理可能在Promise执行期间发生的任何错误。

#### async/await
async/await是一种新的语法，通过使用关键字“async”和“await”来处理Promise，从而实现更可读和可维护的异步代码.
以下是使用async/await处理JavaScript中的异步代码的示例：

    function fetchData_b() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const data = {name: "three"};
                resolve(data);
            }, 1000);
        });
    }

    async function getData() {
        try {
            const data = await fetchData_b();
            console.log(data);
        } catch (error) {
            console.error(error);
        }
    }

    getData();

在此示例中，fetchData_b函数返回一个Promise，该Promise在可用时解析为获取的数据。getData函数声明为async，并使用await关键字处理已解析的Promise并将数据记录到控制台.
使用try和catch块处理可能在Promise执行期间发生的任何错误.
总之，异步编程在JavaScript中是一个重要的概念，对于编写性能良好且易于维护的代码非常重要。通过使用回调函数、Promise和async/await，开发人员可以编写非阻塞代码并处理长时间运行的任务和外部资源.


异步编程是JavaScript中的一个重要概念。为了理解异步编程，首先需要了解同步编程的工作原理。在同步编程中，代码按行执行，每行必须在下一行开始之前完成执行。当处理长时间运行的任务或需要等待外部资源时，这可能会导致性能问题。

从回调函数到JavaScript异步编程


在前端界面的设计时，经常要用到css的布局属性，这里主要对flex、gird做一些学习上的总结，flex和grid都是CSS布局模块，允许响应式和灵活的设计。但是，它们具有不同的用例和属性。

### flex 弹性盒子

flex主要用于一维布局，例如在行或列中排列项目。它在容器元素上使用display: flex属性，在子元素上使用flex属性来控制它们的大小和位置。一些关键属性包括：

- flex-direction：确定主轴的方向（行或列）
- justify-content：沿主轴对齐项目
- align-items：沿交叉轴对齐项目
- flex-wrap：确定是否应在没有足够空间时将项目换行

例子：

    <nav>
    <ul style="display: flex; justify-content: space-between;">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    </nav>
<nav>
  <ul style="display: flex; justify-content: space-between;">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>



### grid 网格布局

grid用于二维布局，例如创建行和列的网格。它在容器元素上使用display: grid属性，在子元素上使用grid属性来控制它们的位置和大小。一些关键属性包括：

- grid-template-columns和grid-template-rows：定义网格中列和行的大小和数量
- grid-column和grid-row：指定网格中项目的起始和结束位置
- grid-gap：设置网格项之间的间距

一个简单的例子：

    <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px;">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    </div>

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px;">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
</div>




总之，flex最适合一维布局，例如导航，瀑布流等，而grid最适合二维布局，比如站点的总体布局，数据表格布局等。但是，它们也可以一起使用以创建更复杂的布局。


在前端界面的设计时，经常要用到css的布局属性，这里主要对flex、gird做一些学习上的总结，flex和grid都是CSS布局模块，允许响应式和灵活的设计。但是，它们具有不同的用例和属性。

css布局如何选择flex和grid?


[使用Python编写并部署个人静态博客:(一)分析与设计](https://suiyan.cc/2023/20230410075954.html)

[使用Python编写并部署个人静态博客:(二)实现静态页面的输出](https://suiyan.cc/2023/20230420101527.html)

[使用Python编写并部署个人静态博客:(三)搜集博客数据](https://suiyan.cc/2023/20230517084718.html)

[使用Python编写并部署个人静态博客:(四)逐步输出静态页面](https://suiyan.cc/2023/20230609081842.html)

[使用Python编写并部署个人静态博客:(五)Python异步输出博文页面](https://suiyan.cc/2023/20230613193700.html)

实现静态页面的输出其实很简单，按着顺序来就行：搜集Markdown文件和站点配置文件->组织数据并渲染模板(jinja2)->输出HTML并保存到静态目录中。

## 最简单的静态文件输出

如果您想要向HTML文件添加字符串模板，您可以使用Python的字符串格式化功能。例如，如果您想要向HTML文件添加标题：

    title = "My Title"
    html_template = "<html><head><title>{0}</title></head><body>{1}</body></html>"
    body = "<h1>hello world</h1>"
    with open("file.html", "w") as f:
        f.write(html_template.format(title, body))

在此代码中，我们定义一个名为title的变量，其值为“My Title”，以及一个名为html_template的变量，其值为"{1}"。{0}和{1}是title和body变量的占位符，分别。然后，我们定义一个名为body的变量，其值为"hello world"。最后，我们以写入模式打开文件“file.html”，并使用format()方法将格式化的字符串写入其中。运行这段脚本后会在当前目录下生成一个`file.html`文件，内容如下：

    <html><head><title>My Title</title></head><body><h1>hello world</h1></body></html>

至此，我们实现了一个简单的模板系统。

## 使用jinja2模板引擎

但是我们的站点不可能就只有一两个模板的变量，他会是由一系列的数据组成的，而且渲染的出来的HTML页面我们还需要进行布局和前端的美化，所以我们需要一个健壮的模板引擎。

> Jinja 是一个快速、富有表现力、可扩展的模板引擎。模板中的特殊占位符允许编写类似于 Python 语法的代码。然后向模板传递数据以呈现最终文档。

### 安装

    $ pip install Jinja2

通过上边的命令行，我们很容易就能安装jinja2的依赖文件。关于使用jinja2生成HTML有两个重要的步骤：
1. 组织jinja2的模板变量，也就是站点的上下文。
2. 编写jinja2的模板，这里包括模板的继承和模板的渲染，以及最后的保存输出。

### jinja2的配置

    # 设置jinja模板的所在目录
    env = Environment(loader=FileSystemLoader(os.path.join("theme")))
    context = {
        "title" : "hello",
        "body" : "world"
    }
    tmp = env.get_template("index.html")  # 获取对应的模板
    sitemap_path = os.path.join('index.html')  # 输出静态文件
    with open(sitemap_path, mode='w', encoding='utf-8') as f:
        f.write(tmp.render(**context))

这是一个最简单的jinja2模板的配置，我们所有的静态文件的输出都会使用这段代码。

### 编写jinja2模板

编写jinja2模板首先需要布局你的网站页面，先规划好博客需要的页面，因为博客的页面布局大体相同，所以要先写`layout.html`，通过模板的继承与引用来实现页面制作的分工，应避免把重复的内容写到多个页面。

### jinja2语法

jinja2的语法很简单：

1. 语句结构 {% %}
2. 变量取值 {{ }}
3.  注释 {# #}
   
输出页面的标题：

    <h1>{{ title }}</h1>

循环输出标签：

    {% for tag in tags %}
    <samll>{{ tag }}</samll>
    {% endfor %}

对于复杂的页面我们应该建立多个继承，对于固定的内容应当使用引用。

建立继承块：

    <title>{{ blog_name_en }}-{{ blog_name }}{% block title %}{% endblock %}</title>

通过继承进行修改：

    {% extends "layout.html" %}
    {% block title %}-{{ title }}{% endblock %}
    {# 此处省略了一些代码 #}

[jinja2官方文档](https://jinja.palletsprojects.com/en/3.1.x/)，这里可以查询到更多有关jinja2模板引擎的使用帮助。


## 组合到一起

通过一些列的操作，我们可以生成一些简单的HTML页面了，接下来我们来看看在Python中如何具体组织这些功能并实现他们。





实现静态页面的输出其实很简单，按着顺序来就行：搜集Markdown文件和站点配置文件->组织数据并渲染模板(jinja2)->输出HTML并保存到静态目录中。

css布局如何选择flex和grid?

flex 弹性盒子

grid 网格布局

相关文章