Web前端架构模式介绍(一)

最新推荐文章于 2024-05-13 00:45:54 发布

一颗心动的桃子

最新推荐文章于 2024-05-13 00:45:54 发布

阅读量410

点赞数

文章标签：前端架构 javascript

本文链接：https://blog.csdn.net/weixin_44934785/article/details/128668670

版权

Web前端架构模式介绍(一)

文章目录

Web前端架构模式介绍(一)

什么是架构模式

架构模式又名框架模式，用于描述一个软件系统里的基本结构组织或纲要。
架构模式会事先定义子系统，然后分配责任，并将其组织在一起成为法则和指南。
架构模式通常可以分解成多个设计模式（例：工厂模式、观察者模式）联合使用。

架构模式可解决的问题

代码复用问题
团队协作问题

实例

题目
输入姓名、年龄后，点击“保存”按钮，即可添加一行数据到列表
需实现①可多次添加②以列表形式展示已添加的多行数据③点击上传则以数组形式输出列表
分析

在这里插入图片描述

代码

<!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>
    <style>
    th{
        border: 1px solid #999;
    }
    </style>
</head>
<body>
    <h1>人员管理系统</h1>
    <div>
        <input id="name" type="text" placeholder="请输入姓名">
        <input id="age" type="text" placeholder="请输入年龄">
        <button id="save">保存</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="list"></tbody>
    </table>
    <button id="upload">上传</button>
</body>
<script>
document.getElementById("save").addEventListener("click",()=>{
    let name = document.getElementById('name').value;
    let age = document.getElementById("age").value;
    let listHtml = `
    <tr>
        <td>${name}</td>
        <td>${age}</td>
    </tr>`;
    let tableElement = document.getElementById("list").innerHTML +=listHtml;
});
document.getElementById("upload").addEventListener("click",()=>{
    let listElement = document.getElementById("list");
    let lineElement = listElement.querySelectorAll("tr");
    let result =[];
    lineElement.forEach(item=>{ 
        let tds = item.querySelectorAll("td");
        let name = tds[0].innerText;
        let age = tds[1].innerText;
        result.push({name,age});
    });
    console.log(result);
});
</script>
</html>

显示结果
- 保存操作
- 上传操作
  
  如图，结果以数组形式输出
缺点
- 每次获取列表数据都需要读取DOM
- 不在DOM中的数据需要维护在其他数据结构中

优化1

策略
- 增加一个数组，用来维护列表数据
- 修改DOM的同时，更新数据
代码修改（仅script部分）

<script>
    let result =[];
document.getElementById("save").addEventListener("click",()=>{
    let name = document.getElementById('name').value;
    let age = document.getElementById("age").value;
    let listHtml = `
    <tr>
        <td>${name}</td>
        <td>${age}</td>
    </tr>`;
    document.getElementById("list").innerHTML +=listHtml;
    result.push({name ,age});

});
document.getElementById("upload").addEventListener("click",()=>{
    
    console.log(result);
});
</script>