idea's blog

cd leveldb
CXXFLAGS=-stdlib=libc++ make PLATFORM=IOS

最简单的流式布局模型, 其实就是: 靠左, 靠右, 或者堆叠. 根据这个简单的理论, 可以用两个栈(Stack)数据结构, 一个表示靠左边的控件列表, 另一个表示靠右边的控件列表, 即可实现流式布局模型.

用伪代码表示如下:

// 视图控件
class View{
    private FlowLayouter layouter;
    
    // 当控件发生 frame 改变后, 调用此方法标记为需要重新布局
    void setNeedsLayout(){
        View view = this;
        while(view){
            view.markNeedsLayout();
            // 当控件需要重新布局时, 一般地, 它的父节点也需要重新布局
            view = view.parent;
        }
    }
    
    void layout(){
        for(View child in this.children){
            this.layouter.place(child);
        }
    }
}

// 流式布局管理器
class FlowLayouter{
    private Stack leftViews;
    private Stack rightViews;
    
    void place(View child){
        Position pos;
        child.layout(); // 子节点先进行布局
        while(!this.spaceFits(child)){
            if(child.floatLeft){
                View view = this.leftViews.pop();
                pos = view.pos;
                // 当被移除的节点比其它节点更高时, 继续移除
                while(pos.y > this.leftViews.last.y){
                    View view = this.leftViews.pop();
                    pos = view.pos;
                }
            }
            if(child.floatRight){
                View view = this.rightViews.pop();
                pos = view.pos;
                // 当被移除的节点比其它节点更高时, 继续移除
                while(pos.y > this.rightViews.last.y){
                    View view = this.rightViews.pop();
                    pos = view.pos;
                }
            }
        }
        
        // place child here
        child.pos = pos;
        
        if(child.floatLeft){
            this.leftViews.push(child.pos);
        }
        if(child.floatRight){
            this.rightViews.push(child.pos);
        }
    }
}

这段代码最重要的是两点:

1. 当某个控件发生改变时, 它需要重新布局. 同时, 它的父节点, 以及父节点的父节点, 一直到节点树的根节点, 都需要重新布局. 当然, 这是性能最差的方案, 优化的思路就是减少需要重新布局的节点的数量, 这需要发动每个人的聪明才智来想.

2. 用两个 Stack 来分别表示靠左的和靠右节点列表. 如果当前的空白空间不足以放下一个控件, 那么, 尝试从节点列表中移除一个节点, 这样, 这个布局区域就空出来了一些空间. 当然, 这个空间应该往下移, 不能和被移除的节点所占据的空间重叠. 因为流式布局的基本原理就是不重叠(除非通过特殊设定, 如负数的偏移量).

有了这个简单的流式布局模型, 你可以在所有最基本的绝对定位的 GUI 库上面实现功能强大的流式布局, 例如, iOS 的 UIKit 不支持流式布局, 你可以根据上面的代码扩展, 给 iOS 界面开发加上流式布局功能.

流式布局其实是非常有趣的一项功能, 它的模型很简洁, 但功能强大且应用广泛. GUI 界面的本质是树, 树是简洁而优美的, 而流式布局使用的数据结构是 Stack, 又是一种非常基础的数据结构.

说句题外话, 我已经实现了 iOS 系统上面的 UI 流式布局 - CocoaUI, 你可以试用下.

在 Web 开发中, 经常需要实现操作频率限制的功能, 以避免单个用户过度地消耗某项资源, 或者消除安全隐患. 例如, 限制某 IP 刷新页面的频率, 限制一个用户投票只能投一次, 等等.

要实现操作频率限制, 就要用到存储. 使用 SSDB 来存储, 可以支持海量用户的操作频率限制, 而且代码非常简洁高效.
Continue reading »

iPhone 手机的成功, iOS 操作系统功不可没. 而 iOS 操作系统的成功, 与早期 iPhone 单一的屏幕分辨率也有极大的关系. 不客气地说, 正因为早期 iPhone 手机只有一个分辨率, iOS 操作系统和其上面的 App 才不需要关心所谓的"响应式布局", "流式布局", "自动布局"这些技术, 它们只使用绝对定位的布局 - 每一个控件的大小和位置都是定死的, 几乎不变. 这样, iOS 应用开发者把精力放在了界面外观和交互体验, 最终促成了 iPhone/iOS 的成功.

不过, 从 iPad 的出现, 到 iPhone 5 发布, 以及后面的 iPhone 6/6+, iPhone/iOS 手机的屏幕分辨率开始多样化了, 这时, 界面布局便不能死守着绝对定位布局了.

为了解决这个问题, 苹果的方案是"Auto Resizing"和"Auto Layout", 特别是后者, 解决了界面动态布局的问题.

Continue reading »

默认用 Xcode 生成的静态链接库(.a)文件中, 会带有路径信息, 如 /Users/youname/path 等等, 事实上, 这些其实是调试信息. 但是, 这些信息暴露了你的系统信息, 包括你的用户名, 你的文件目录结构, 等等.

如果你想清除这些信息, 可以这样做:

[ref]
In LLVM code generation, set Generate debug symbols to No and Symbols hidden by default to Yes. For some reason, even if you tell it to strip symbols, it's not going to do it unless these are set.

Nginx 的限速模块, 也即 ngx_http_limit_req_module.

http {
    limit_req_zone $binary_remote_addr zone=zone_1rps:10m rate=1r/s;
    limit_req_zone $binary_remote_addr zone=zone_3rps:10m rate=3r/s;
    limit_req_zone $binary_remote_addr zone=zone_5rps:10m rate=5r/s;

    server {
        location ~ ^/index.php$ {
            limit_req_status 403;
            limit_req zone=zone_1rps burst=5;
        }
    }
}