业务逻辑和 UI 逻辑有啥区别？

Posted 2023-02-23

【中文标题】业务逻辑和 UI 逻辑有啥区别？

【英文标题】：What are the difference between business logic and UI logic?业务逻辑和 UI 逻辑有什么区别？

【发布时间】：2020-09-07 16:23:05

【问题描述】：

我在flutter学习状态管理，大部分时间我遇到business logicui logic和一些时间presentation logic，我在互联网上搜索它，因为人们用不同的语言解释它，我不能没有更好的理解，请问有人能以例子的形式展示这三种logic，并解释得很干净和容易吗？

【参考方案1】：

当我们使用库时，将其与代码的关键部分（即业务逻辑）分开是我们的责任和使命。 例如，在尊重这些原则的清洁架构中，目标是将关注点和角色分开，可分为以下几类： 1) UI（用户界面） 2) Formatter（格式、法律部分、内容） 3) 业务逻辑（业务规则） 4) 数据（可以是内存中的、API 或在线数据库等网络或本地持久存储/数据库）

在 UI 部分使用像 Flutter 这样的跨平台/多平台解决方案可能比在业务部分更符合逻辑。 业务逻辑不会经常变化，但在开发 UI 的过程中可能会经常变化。 例如，对于网络调用，我们可以自己实现这一层，也可以依赖一个知名的库。如果明天出现一个新的更好的，我们只需要替换我们层的实现而不影响整个模块或项目。 有时当客户说应用程序需要具有相同功能的新 UI 时，可能已经构建了这样的方式，大部分情况下只能在 UI 上进行更改，而不会影响背后的功能逻辑。 在颤振的上下文中，考虑一个基本应用程序的增加按下计数的例子，逻辑应该分开（可能在其他类/文件中）所以如果我们需要将按下 1,2,3 次按下更改为 a,b ,c...时代新闻，唯一的业务逻辑应该改变。 请按照以下示例进行操作：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  int _counter = 65;
  String hello = "a";

  // the only business logic change will be here...No UI change require
  void _incrementCounter() 
    setState(() 
      hello = String.fromCharCode(_counter);
      if(_counter!=90)
        _counter++;
      else
        _counter = 65;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$hello',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  

还是不明白，参考下面：(1), (2), (3)

【讨论】：

非常感谢您的回答，感谢您的努力，我投票赞成您的回答。你能告诉我你的例子中的UI logic吗？还有presentation logic?这里的业务逻辑是counter variable 或incrementing 或setState ?

UI 逻辑是内容在屏幕上的显示方式，（构建方法），业务逻辑是您向代码提供输入，返回您需要的输出。 （方法/类等）。 Setstate 显然会更新 UI 中的值。业务逻辑独立于平台。就像如果你想在 web 的先前基础上制作你的应用程序，UI 将像在抽屉中出现转换一样发生变化，但你实现的逻辑将完全保持不变。