对象内存布局系列博文写后记

今天总算把 对象内存布局系列博文共16篇文章发表出来了,文章是根据几年前记录下来的笔记整理、修改而成。当年写的过程很快乐,但在博客上发表的过程(copy&paste、上传图片等等)则比较枯燥乏味,不过为了能够和朋友们分享快乐,枯燥一点也没有什么。

 

我知道读这类文章的人不会很多,就像Stan Lippman的Inside C++ Object Model一书能够卒读的人很少一样,因为其中很多东西比较晦涩和抽象。所以,我是以异常啰嗦的文字和图片来进行说明,以期望让读这些文章的朋友,能在很短的时间内形成一个有关于此的一个形象思维(玄机逸士非常强调形象思维,就像在Newton的年代以前,大家都喜欢用几何的方法来解决问题一样,随便说说,Newton当初发明微积分也是通过几何的方法实现的,有《古今数学思想》一书为证:)。如果一个人能把所有逻辑思维,都能变成形象思维,那就太牛了。不过这样人的牛人肯定不存在),即形象思维->逻辑思维->形象思维,形象思维比较容易亲近,不那么高不可攀,并且会更多地给人以直觉和灵感。

 

文章是写完了,但却有言犹未尽之感,或许这就是C++的博大精深之处吧。望各路高手批评指正。

 

再重复一次,读这些文章的朋友应该不会很多,但只要有,那小弟就认为所做的努力就是值得的!另外,我自己就当在CSDN这块宝地上记笔记,整理学过的东西,总结经验和教训,需要的时候可以随时来看看,温故而知新嘛,自然是不亦乐乎了。

注:文章所有代码都经过验证,其中绝大部分是在VC6编译器上完成的,特此说明。毕竟memory layout和编译器还是有很大关系,因为C++ 的标准还是留了很多发挥的空间给编译器的实现者们。

以下是使用Tailwind CSS实现的微博博文布局示例: ```html <div class="flex items-start space-x-4"> <img src="https://via.placeholder.com/50" alt="avatar" class="w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center space-x-2"> <a href="#" class="font-medium text-gray-900">用户名</a> <span class="text-gray-500 text-sm">2小时前</span> </div> <p class="text-gray-800 leading-tight mt-1">微博内容</p> <div class="flex items-center mt-2"> <button class="text-gray-500 hover:text-blue-500 focus:outline-none focus:underline"> <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 inline-block"> <path fill-rule="evenodd" d="M13.707 5.293a1 1 0 00-1.414 0L10 7.586 8.707 6.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 000-1.414zM7 10a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zM6.293 8.707a1 1 0 000 1.414L8 12.414l1.293-1.293a1 1 0 10-1.414-1.414l-2 2z" clip-rule="evenodd"></path> </svg> <span class="ml-1">100</span> </button> <button class="text-gray-500 hover:text-red-500 focus:outline-none focus:underline ml-6"> <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 inline-block"> <path fill-rule="evenodd" d="M10 18a1 1 0 001-1v-5.586l2.293 2.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 11.414V17a1 1 0 001 1zM4 8a1 1 0 011-1h1V5a3 3 0 016 0v2h1a1 1 0 110 2H5a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path> </svg> <span class="ml-1">50</span> </button> </div> </div> </div> ``` 这个示例中,我们使用了以下Tailwind CSS类: - `flex` 和 `items-start`:使头像和微博内容在一个水平线上,并且头像在微博内容的上方。 - `space-x-4`:为头像和微博内容之间添加4个单位的水平间距。 - `w-12` 和 `h-12`:将头像的宽度和高度设置为12个单位,以生成一个正方形头像。 - `rounded-full`:将头像的边角变为圆形。 - `flex-1`:将微博内容的宽度设置为尽可能多的空间,以填充余下的空间。 - `font-medium` 和 `text-gray-900`:使用户名具有中等粗细的字体,并且颜色为深灰色。 - `text-gray-500` 和 `text-sm`:为发布时间添加淡灰色文本颜色和较小的字体大小。 - `leading-tight` 和 `mt-1`:为微博内容设置较紧的行距和顶部间距。 - `flex` 和 `items-center`:使点赞和评论按钮在同一行上,并且居中对齐。 - `mt-2`:为点赞和评论按钮与微博内容之间添加2个单位的顶部间距。 - `hover:text-blue-500` 和 `hover:text-red-500`:当鼠标悬停在点赞或评论按钮上时,将其文本颜色更改为蓝色或红色。 - `focus:outline-none` 和 `focus:underline`:为点赞和评论按钮添加焦点时删除边框,并在下划线下划线下方添加下划线。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值