论坛 › 福建 › 代码与图表关系的四个层次

esc0rp 发表于 2024-8-20 13:01:54

代码与图表关系的四个层次

    <h1 style="color: black; text-align: left; margin-bottom: 10px;">背景</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">像 Godot 或 Unity <span style="color: black;">这般</span>的游戏引擎，它们<span style="color: black;">准许</span>编写普通代码，<span style="color: black;">同期</span><span style="color: black;">亦</span><span style="color: black;">能够</span>创建和编辑场景。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-axegupay5k/e6ffd0e8ffd84acabd6cfd5c9080e376~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1724094632&amp;x-signature=isw%2Faklx4FU3wAybhFCaCPI0yWk%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Godot游戏引擎是一款制作游戏的软件，<span style="color: black;">能够</span>制作2D和3D游戏</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">咱们</span>都<span style="color: black;">爱好</span><span style="color: black;">运用</span>图表来<span style="color: black;">处理</span><span style="color: black;">繁杂</span>编程任务，将图表<span style="color: black;">做为</span>一种工具，与代码并行<span style="color: black;">运用</span>。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">代码与图表的关系，<span style="color: black;">通常</span><span style="color: black;">能够</span>分为以下四个层次。</span></span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">Level 0：图表与代码分离存在</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">咱们</span><span style="color: black;">能够</span>在一个专门的工具里绘制这些图表，<span style="color: black;">而后</span>用它们来辅助编写代码。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">能够</span>把图表放在wiki或知识库里，供项目成员查看。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">不外</span>，<span style="color: black;">这般</span>做有<span style="color: black;">有些</span>缺点：</span><span style="color: black;">图表可能难以被<span style="color: black;">发掘</span>，<span style="color: black;">况且</span>容易过时</span>。</span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">Level 1: 图表与代码并行存在</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">有一个简单的<span style="color: black;">办法</span><span style="color: black;">能够</span><span style="color: black;">处理</span>图表难以<span style="color: black;">发掘</span>的问题：</span><span style="color: black;">试试在文本文件中<span style="color: black;">插进</span>ASCII图像</span>。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">这般</span>，<span style="color: black;">咱们</span>就<span style="color: black;">能够</span>更方便地查看和<span style="color: black;">运用</span>这些图表了。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">日前</span>，这可能是<span style="color: black;">咱们</span>能做到的最佳<span style="color: black;">处理</span><span style="color: black;">方法</span>。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/03132071c6a547a4812b72808e80aaa4~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1724094632&amp;x-signature=uHyYpnMwM2C9fFADg5qE3rfPrM4%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">但<span style="color: black;">火速</span>就会变得杂乱无章。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/65c5fb3bebff4ba784b7bd6973c13aba~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1724094632&amp;x-signature=Wpao%2FI3kuVNaTMLbVgXm9VIRvvQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">这个<span style="color: black;">办法</span>有几个优点：容易实现（只要<span style="color: black;">大众</span>同意怎么做），<span style="color: black;">况且</span>很通用（可能有<span style="color: black;">非常多</span>其他用途）。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">但<span style="color: black;">亦</span>有缺点：</span><span style="color: black;">图表还是可能会过时</span>。<span style="color: black;">况且</span>，正如“<span style="color: black;">注释不是代码</span>”那样，<span style="color: black;">这儿</span><span style="color: black;">亦</span><span style="color: black;">同样</span>。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">另一</span>，<span style="color: black;">倘若</span>你是在终端里编写代码，这个<span style="color: black;">办法</span>就更不适用了。</span></span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">Level 2: 由代码生成图表</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">代码和图表应该共存，图表<span style="color: black;">能够</span>由代码生成。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">其实，从代码生成图表完全是<span style="color: black;">咱们</span>常用的集成<span style="color: black;">研发</span>环境（IDE，Integrated Development Environment ）<span style="color: black;">能够</span>做到的事。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/171f9ed4bd53483da2a422ec3e937f19~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1724094632&amp;x-signature=ZCZyvzR%2FG0NHeAv%2BNRcwzn3kJys%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">优点：</span></strong></span></p><span style="color: black;">总是保持最新。</span><span style="color: black;">非侵入性：<span style="color: black;">能够</span>集成到IDE中，不影响代码的存储方式。</span>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">缺点：</span></strong></span></p><span style="color: black;">这<span style="color: black;">能够</span><span style="color: black;">帮忙</span>你理解，但真不确定能否真正<span style="color: black;">帮忙</span>你思考？</span><span style="color: black;">可能不太吸引人，<span style="color: black;">由于</span>这些自动生成的图表<span style="color: black;">常常</span><span style="color: black;">欠好</span>看。布局一个好看的图表很难。</span>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">Level 3: 图表本身<span style="color: black;">便是</span>代码</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">图表即代码，<span style="color: black;">能够</span>直接执行，这才是<span style="color: black;">咱们</span>追求的<span style="color: black;">将来</span><span style="color: black;">目的</span>。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">我认为这<span style="color: black;">便是</span><span style="color: black;">最后</span><span style="color: black;">目的</span>。有些东西用文本表达更好，而有些则最好以视觉方式呈现。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">咱们</span>应该<span style="color: black;">按照</span><span style="color: black;">详细</span><span style="color: black;">状况</span><span style="color: black;">选取</span>最合适的<span style="color: black;">办法</span>来混合<span style="color: black;">运用</span>。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">别试图可视化简单的代码，<span style="color: black;">亦</span>不要在图表更合适时还试图编写代码。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">Luna<span style="color: black;">便是</span>一个尝试。<span style="color: black;">她们</span>尝试了双重<span style="color: black;">暗示</span>：所有内容<span style="color: black;">同期</span>以代码和图表的形式存在，你<span style="color: black;">能够</span>在两者之间切换。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/6a28b7c5ddac4665a2131ae92012ec1e~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1724094632&amp;x-signature=WwtGT9IB8BSAm8czKzfI0CeqDUM%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">但<span style="color: black;">这般</span>做，你不仅能享受到两种方式的好处，还会<span style="color: black;">同期</span>受到文本和视觉<span style="color: black;">媒介</span>的限制。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">你可能<span style="color: black;">没法</span>处理<span style="color: black;">哪些</span>难以可视化的内容（<span style="color: black;">例如</span>循环、递归、抽象），<span style="color: black;">亦</span><span style="color: black;">不可</span>处理<span style="color: black;">哪些</span>难以编码的内容。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">我认为文本编码还是应该用在适合的<span style="color: black;">地区</span>，但<span style="color: black;">咱们</span><span style="color: black;">亦</span>应该能切换到图表工具中，绘制状态机，并像执行文本代码<span style="color: black;">同样</span>执行它。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/1102318aeaeb47f6966b7be5774c4d6d~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1724094632&amp;x-signature=M6PSzTl2d%2FM4rMfYzm5mzGFwz68%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">当我说“绘制”时，我指的是<span style="color: black;">实质</span>的图形绘制。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">亦</span><span style="color: black;">便是</span>说，你<span style="color: black;">能够</span>直接操作图形，而</span><strong style="color: blue;"><span style="color: black;">不</span></strong><span style="color: black;">必须</span>把它们转换回文本。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">图表<span style="color: black;">不该</span>该替代或“<span style="color: black;">加强</span>”文本，它们应该和文本并存，<span style="color: black;">做为</span>一个独立的工具存在。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">想象它像游戏引擎，<span style="color: black;">例如</span> Godot 或 Unity。你<span style="color: black;">能够</span>编写代码，<span style="color: black;">亦</span><span style="color: black;">能够</span>创建和编辑场景。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">这些场景存储在自己的文件中，有专门的编辑器处理它们，不<span style="color: black;">必须</span>代码<span style="color: black;">暗示</span>。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">由于</span>在这种<span style="color: black;">状况</span>下，视觉呈现更合适。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/521f75a2677848ccb89f39b27974af51~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1724094632&amp;x-signature=eInkPyRQVgXTFq%2F33LhiHE6beqs%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">非<span style="color: black;">目的</span>：图表取代代码</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">最后强调的是：</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">不是在说用图形方式来编写代码。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;"><span style="color: black;">针对</span>文本<span style="color: black;">已然</span>能完成的任务<span style="color: black;">来讲</span>，图形方式其实只是一个不太方便的<span style="color: black;">选取</span>。</span></span></p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/5497c2d7101e49df924063e85ce0b7b6~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1724094632&amp;x-signature=tvqOSAMLGyZFog1zy2LQacMrH3A%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">这个<span style="color: black;">亦</span>回答了低代码平台为啥推广的<span style="color: black;">欠好</span>，有时代码更好。</span></span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">将图表用于适当的场景，如状态转换、内存布局和网络请求，而不是全面替代代码。</span></span></p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">参考</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">https://tonsky.me/blog/diagrams/</span></span></p>

4zhvml8 发表于 2024-11-7 16:06:20

感谢楼主的分享！我学到了很多。

b1gc8v 发表于 4 天前

我深受你的启发，你的话语是我前进的动力。

查看完整版本: 代码与图表关系的四个层次