前端开发规范的学习
<p><strong>1.KLOC 2.数据防腐层 3.分治思想 4.分层架构模式思想 5.<strong>SOLID 原则 6.关注分离点</strong></strong></p><p><strong>1.KLOC </strong></p>
<div class="auto-hide-last-sibling-br paragraph-u1TS5p paragraph-element br-paragraph-space"><strong> 定义</strong></div>
<ul class="auto-hide-last-sibling-br">
<li>KLOC 是 “千行代码”（Kilo Lines Of Code）的缩写。它是一种用于衡量软件项目规模大小的指标。通过统计软件项目中代码的行数（以千行为单位）来对项目规模进行量化评估。例如，如果一个项目的代码量是 5000 行，那么用 KLOC 来表示就是 5KLOC。</li>
</ul>
<div class="auto-hide-last-sibling-br paragraph-u1TS5p paragraph-element br-paragraph-space"><strong> 用途</strong></div>
<ul class="auto-hide-last-sibling-br">
<li><strong>项目规划与估算</strong>
<ul class="auto-hide-last-sibling-br">
<li>在项目初期，开发团队可以根据历史项目的 KLOC 数据以及对应的开发资源投入（如人力、时间等）来估算新项目的规模和所需的开发资源。例如，如果已知开发 1KLOC 平均需要 2 个人天，当新的项目规模预计为 10KLOC 时，就可以初步估算出大概需要 20 个人天的工作量来完成代码编写部分。</li>
</ul>
</li>
<li><strong>成本估算与控制</strong>
<ul class="auto-hide-last-sibling-br">
<li>软件成本在很大程度上与代码规模有关。KLOC 可以作为成本估算的一个基础因素。因为编写代码的行数越多，通常意味着需要投入更多的人力和时间，从而导致成本增加。通过对 KLOC 的统计和分析，项目经理可以更好地控制成本。例如，当 KLOC 超出预算范围时，可以及时分析是需求变更导致代码量增加，还是开发效率低下等原因造成的，并采取相应的措施。</li>
</ul>
</li>
<li><strong>质量评估与比较</strong>
<ul class="auto-hide-last-sibling-br">
<li>一定程度上，KLOC 可以用于软件质量的评估和比较。一般来说，在功能相同的情况下，代码行数越少，可能意味着软件的结构越紧凑、效率越高。不过这只是一个参考因素，因为代码质量还与代码的可读性、可维护性、可复用性等诸多因素有关。例如，两个实现相同功能的模块，一个是 10KLOC，另一个是 15KLOC，可能 10KLOC 的模块在代码结构上更简洁，但还需要进一步分析代码的内部质量才能确定。</li>
</ul>
</li>
</ul>
<p><strong>2.数据防腐层</strong></p>
<ul class="auto-hide-last-sibling-br">
<li>数据防腐层（Anti - Corruption Layer，ACL）是一种软件架构中的隔离层概念。它主要用于隔离两个不同系统或者子系统之间的交互，防止一个系统的变化对另一个系统产生不良影响，尤其是在系统之间存在数据格式、业务逻辑、技术栈等差异的情况下。</li>
<li>就像是在两个不同 “世界”（系统）之间设置的一个缓冲带，这个缓冲带能够对数据和业务逻辑进行转换和适配，确保两边的系统都能按照自己的规则和方式正常运转，避免一方的 “规则变化” 或者 “异常” 对另一方造成干扰或者破坏。</li>
</ul>
<p><strong>2.1数据防腐层的组成部分与功能实现</strong></p>
<p> <strong>数据转换功能</strong></p>
<p> 这是数据防腐层最基本的功能之一。它能够将一个系统的数据格式转换为另一个系统能够接受的数据格式。这可能涉及到数据结构的转换、数据类型的转换、编码方式的转换等。例如，将一种数据库系统（如 MySQL）中的数据格式转换为另一种数据库系统（如 Oracle）能够识别的数据格式，或者将以文本格式存储的数据转换为二进制格式。</p>
<p><strong> 业务逻辑适配功能</strong></p>
<p> 除了数据格式的转换，数据防腐层还需要对不同系统之间的业务逻辑差异进行适配。比如，两个系统对于同一业务概念可能有不同的定义和处理方式。一个系统中产品的 “价格” 可能是含税价格，而另一个系统中的 “价格” 可能是不含税价格。数据防腐层就需要根据系统之间的这种业务逻辑差异，对数据进行调整和适配。</p>
<p><strong> 接口封装功能</strong></p>
<p> 数据防腐层可以对系统之间交互的接口进行封装。它隐藏了两个系统内部接口的复杂性和差异性，对外提供一个统一的、相对简单的接口。这样，两个系统在进行交互时，只需要通过这个封装后的接口进行通信，而不需要了解对方内部接口的详细情况。例如，数据防腐层可以将一个系统复杂的 RESTful API 接口进行封装，使其与另一个系统简单的 RPC 接口能够顺利进行通信。</p>
<p><strong>3.分治思想</strong></p>
<div class="message-box-content-wrapper-nDROih">
<div class="message-content message-box-content-lcvP3O receive-message-box-content-Ak2lgP samantha-message-box-content-h0ZP5s" data-testid="message_content">
<div class="container-p2nY4f flow-markdown-body theme-samantha-D0_4Ug" dir="ltr" data-testid="message_text_content" data-show-indicator="false"><ol class="auto-hide-last-sibling-br">
<li>
<div class="auto-hide-last-sibling-br paragraph-u1TS5p paragraph-element br-paragraph-space"><strong>基本概念</strong></div>
<ol>
<li>分治思想，即 “分而治之”（Divide and Conquer）。它的核心是将一个复杂的大问题分解为若干个规模较小、相对独立且容易解决的子问题。这些子问题的性质与原问题相同，然后分别解决这些子问题，最后将子问题的解合并起来得到原问题的解。</li>
<li>例如，在计算一个大型数组的排序问题时，可以将这个数组不断地拆分成更小的子数组，直到子数组的规模小到可以轻易地进行排序（如只有 1 个或 2 个元素）。这就像把一个庞大的任务（对整个数组排序）分解成了许多小任务（对小的子数组排序）。</li>
</ol></li>
<li>
<div class="auto-hide-last-sibling-br paragraph-u1TS5p paragraph-element br-paragraph-space"><strong>在算法设计中的体现</strong></div>
<ol>
<li><strong>排序算法中的应用</strong><ol>
<li>以归并排序（Merge Sort）为例，这是一种典型的基于分治思想的排序算法。它首先将一个数组分成两个长度大致相等的子数组，然后对这两个子数组分别进行排序（这两个子数组的排序也是通过同样的分治过程，不断划分更小的子数组来完成）。当子数组排序完成后，再将两个有序的子数组合并成一个有序的大数组。整个过程不断地将问题划分，解决子问题，最后合并结果。</li>
</ol></li>
<li><strong>搜索算法中的应用</strong><ol>
<li>二分搜索（Binary Search）也是分治思想的体现。对于一个有序数组，要查找某个目标元素。它每次将数组分成两部分，通过比较目标元素和中间元素的大小，确定目标元素可能在左半部分还是右半部分。然后继续在确定的那一半数组中进行同样的划分和搜索操作，直到找到目标元素或者确定目标元素不存在。</li>
</ol></li>
</ol></li>
<li>
<div class="auto-hide-last-sibling-br paragraph-u1TS5p paragraph-element br-paragraph-space"><strong>在软件系统设计中的应用</strong></div>
<ol>
<li><strong><strong>功能模块划分 ：</strong></strong>根据页面的功能将前端代码划分为不同的模块。例如，在一个电商网站前端，可以划分为商品列表模块、购物车模块、用户订单模块等。每个模块可以有自己独立的 HTML、CSS 和 JavaScript 代码。</li>
<li><strong>组件化开发 : </strong>在现代前端框架（如 React、Vue）中，采用组件化开发是分治思想的很好体现。可以将页面中的一个按钮、一个表单或者一个导航栏等都作为一个独立的组件进行开发。每个组件都有自己的状态和行为，然后将这些组件组合起来构成完整的页面。</li>
<li><strong>分布式系统设计：</strong>在分布式系统中，分治思想更为明显。例如，一个分布式数据库系统为了处理海量的数据存储和查询任务，会将数据分散存储在多个节点上。每个节点负责存储和处理一部分数据，这相当于把数据存储和查询这个大问题分解到各个节点上的小问题。当需要查询数据时，系统会协调各个节点，将各个节点的查询结果合并起来得到最终的结果。</li>
</ol></li>
<li>
<div class="auto-hide-last-sibling-br paragraph-u1TS5p paragraph-element br-paragraph-space"><strong>优势</strong></div>
<ol>
<li><strong>降低问题复杂度 </strong>通过将大问题分解为小问题，使得每个小问题的复杂度降低。这样更容易理解和解决问题，就像把一个复杂的拼图拆分成许多小的拼图块，每个小拼图块的拼接难度就比整个大拼图的拼接难度小很多。</li>
<li><strong>便于并行处理 </strong>分解后的子问题很多时候可以并行地解决。例如，在多核处理器的计算机上，对多个子问题同时进行处理，可以大大提高处理效率。在分布式系统中，不同的节点可以同时处理各自负责的子问题，加快了整个系统的运行速度。</li>
<li><strong>提高系统的可维护性和可扩展性 </strong>分治后的模块或子问题相对独立，当需要修改或扩展系统的某一部分功能时，只需要对相应的子模块或子问题进行处理，不会对其他部分造成太大的影响。比如，在电商系统中，如果要增加一种新的支付方式，只需要在支付模块中进行修改，而不需要对整个电商系统进行大规模的改动。</li>
</ol></li>
</ol>
<p><strong> 5.<strong>SOLID 原则 </strong></strong></p>
<p><strong><strong> 定义：</strong></strong>SOLID 是面向对象设计的五大基本原则的缩写，虽然它主要用于后端开发中的面向对象编程，但在前端开发中也有一定的应用。</p>
<ul>
<li><strong>单一职责原则（Single Responsibility Principle，SRP）</strong>：一个类或者模块应该只有一个引起它变化的原因。在前端开发中，这意味着一个组件或者函数应该只负责一个功能。例如，一个用于验证用户输入的函数就只应该负责验证输入是否符合要求，而不应该同时负责发送验证后的输入数据到服务器。</li>
<li><strong>开闭原则（Open - Close Principle，OCP）</strong>：软件实体（类、模块、函数等）应该对扩展开放，对修改关闭。在前端开发中，比如一个组件库，当需要添加新的组件类型时，应该能够通过扩展的方式添加，而不是修改已有的组件代码。例如，一个 UI 组件库已经有了按钮组件和文本框组件，当要添加一个新的下拉菜单组件时，应该通过创建新的代码来实现这个组件，而不是去修改按钮组件和文本框组件的代码。</li>
<li><strong>里氏替换原则（Liskov Substitution Principle，LSP）</strong>：子类型必须能够替换它们的父类型。在前端的继承关系或者接口实现中，这一原则很重要。例如，在一个前端框架中定义了一个抽象的图形组件接口，具体的圆形组件和方形组件都实现了这个接口，那么在使用这些组件的代码中，圆形组件和方形组件应该可以相互替换，而不会影响系统的正常运行。</li>
<li><strong>接口隔离原则（Interface Segregation Principle，ISP）</strong>：客户端不应该被迫依赖于它不使用的接口。在前端开发中，例如一个前端插件提供了多个功能接口，但是某个具体的页面只需要其中的部分功能，那么这个插件应该将接口进行隔离，使得页面只需要依赖它所需要的接口，而不是全部接口。</li>
<li><strong>依赖倒置原则（Dependency Inversion Principle，DIP）</strong>：高层模块不应该依赖低层模块，两者都应该依赖其抽象；抽象不应该依赖细节，细节应该依赖抽象。在前端框架的设计或者组件之间的依赖关系中，这一原则有助于降低耦合度。例如，在一个前端应用中，高层的业务逻辑组件不应该直接依赖于具体的底层数据获取组件，而是应该通过抽象的接口来获取数据，这样当数据获取方式发生变化时，只需要修改实现抽象接口的具体组件，而不会影响业务逻辑组件。</li>
</ul>
</div>
</div>
</div>
<div class="message-box-content-wrapper-nDROih"> </div>
<div class="answer-action-bar-MECk3C bottom-action-bar-wrapper-EmBxFl large-space-VAvLxB answer-action-bar" data-testid="message_action_bar"> 意义：
<ul class="auto-hide-last-sibling-br">
<li><strong>提高代码质量</strong>：遵循 SOLID 原则可以使前端代码更加健壮、灵活和可维护。代码结构更加合理，减少了代码的耦合度，使得代码在面对需求变化和功能扩展时更加稳定。</li>
<li><strong>便于测试和复用</strong>：代码的单一职责使得测试更加容易，因为每个功能单元的功能明确。同时，符合开闭原则等使得代码更容易被复用，例如符合开闭原则的组件可以方便地在其他项目或者功能模块中进行扩展和复用。</li>
</ul>
<p><strong>6 关注分离点（和分治思想一样也是一种分解方式）</strong></p>
<ul>
<li><strong>关联</strong>
<ul class="auto-hide-last-sibling-br">
<li>与分治思想有一定的关联。分治思想是将一个复杂的问题分解为多个子问题分别解决，关注分离点也是一种分解方式，它将软件系统的开发关注点分解为内容结构、表现形式和交互行为这几个方面。同时，关注分离点也有助于实现单一职责原则，因为每个部分（HTML、CSS、JavaScript）都有自己明确的职责范围，避免了一个代码段承担多种不相关的功能。</li>
</ul>
</li>
<li><strong>区别</strong>
<ul class="auto-hide-last-sibling-br">
<li>与分治思想不同的是，关注分离点更侧重于从功能性质（内容、样式、交互）的角度进行分离，而分治思想可以应用于更广泛的问题分解，如将一个大型应用按照功能模块（用户管理模块、订单管理模块等）进行分解。与单一职责原则相比，关注分离点主要是针对网页开发中的三种不同类型的职责（结构、样式、交互）进行划分，而单一职责原则更强调在代码单元（类、函数等）层面上一个单元只负责一个功能。</li>
</ul>
</li>
</ul>
<p> </p>
<p> </p>
</div>
<div class="auto-hide-last-sibling-br paragraph-u1TS5p paragraph-element br-paragraph-space"> </div><br><br>
来源：https://www.cnblogs.com/someonelikeyou/p/18538254
頁:
[1]