写代码的随想(1)

 也许真该停下来考虑一下,为何要面向对象,为何面向对象能取代面向结构?在此之前的状态是怎样的?

说老实话,delphi我只是用得久而已,并没有深入消化,哪怕是如TStrings这样的类都没有进行过深入的了解,想想真是对自己失望。

为何我却不能清晰地说明我对于代码构建的理由。

 

对于一个事物,比如Form,很自然地就能想到,Caption应当是其必须要属性之一,对于“我使用API函数也一样能清晰的达到这一要求”,为何一定要封装呢?难道是为了继承?为了代码的复用?为了多态?我想说是的,我想所有成份都包括在内了,这就是我们的需求,而且不止于此。对于DOS程序,有至于较早期的win程序,我们在乎的是实现其功能,譬如FORM(或称为窗体,窗口,屏幕等等)显示CAPTION,无非是调用如TextOut(...)这样的API函数从指定的位置输出,类似的行为还有颜色,底色,色调等相关的内容,无非也就是调用操作系统提供的VGA操作函数。这在当时也没有被认为不妥当。

根据您的需求,下面是一个简单的“代码随想录”页面的 HTML 模板。这个模板实现了基本的结构,包括左侧目录和右侧内容区域。点击左侧的一级目录时,会显示其下的二级目录;点击二级目录时,会在右侧显示对应的内容(实际内容未提供,仅作为示例): ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>代码随想录</title> <style> body { font-family: Arial, sans-serif; display: flex; margin: 0; padding: 0; } .sidebar { width: 20%; background-color: #f4f4f4; padding: 20px; } .content { width: 80%; padding: 20px; } .menu-item { cursor: pointer; padding: 10px; border-bottom: 1px solid #ddd; } .sub-menu { list-style-type: none; padding-left: 20px; display: none; } .sub-menu li { padding: 5px 0; } .active { display: block; } </style> </head> <body> <div class="sidebar"> <div class="menu-item" onclick="toggleSubMenu(this)">数组</div> <ul class="sub-menu" style="display: none;"> <li><a href="#array-theory">数组理论基础</a></li> <li><a href="#binary-search">二分查找</a></li> <li><a href="#move-elements">移除元素</a></li> </ul> <div class="menu-item" onclick="toggleSubMenu(this)">链表</div> <ul class="sub-menu" style="display: none;"> <li><a href="#linked-list-intro">链表介绍</a></li> <!-- 更多链表子项 --> </ul> <!-- 其他目录项 --> </div> <div class="content"> <div id="array-theory"> <h2>数组理论基础</h2> <p>这里是关于数组理论基础的内容。</p> </div> <div id="binary-search"> <h2>二分查找</h2> <p>这里是关于二分查找的内容。</p> </div> <div id="move-elements"> <h2>移除元素</h2> <p>这里是关于移除元素的内容。</p> </div> <div id="linked-list-intro"> <h2>链表介绍</h2> <p>这里是关于链表介绍的内容。</p> </div> </div> <script> function toggleSubMenu(element) { const subMenu = element.nextElementSibling; if (subMenu.style.display === "none") { subMenu.style.display = "block"; } else { subMenu.style.display = "none"; } } // 自动滚动到锚点位置 window.addEventListener('hashchange', function() { document.querySelector(window.location.hash).scrollIntoView(); }); // 页面加载时处理初始锚点 window.onload = function() { if (window.location.hash) { document.querySelector(window.location.hash).scrollIntoView(); } }; </script> </body> </html> ``` ### 功能说明: 1. **左侧目录**:包含多个一级目录项,点击一级目录项时会展开其下的二级目录。 2. **右侧内容区域**:根据点击的二级目录项,在右侧显示相应的内容。 3. **自动滚动**:当 URL 带有锚点时,页面会自动滚动到相应的部分。 您可以根据需要扩展更多的目录项和内容。希望这个模板对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值