pure的设计理念

[fengzilong]

pure是什么

又一个组件库的轮子

仓库：https://github.com/fengzilong/pure 文档兼演示：https://fengzilong.github.io/pure

pure诞生记

pure使用了很多新的css特性，比如flex、vh等等

所以并不打算支持IE低版本🤷‍♂️

聊一聊设计细节

从 Pure.modal 讲起

或许你会问，为什么要支持这种命令式的书写方式呢？纯粹的声明式写法不好么？

答案自然是为了效率

这种形式的调用可以让你流畅地写完逻辑，而不需要写一堆控制Model显隐的逻辑，导致中断思路去修改模板代码。 从实践的角度去说，我们使用弹窗只是为了给用户一些提示，或者向用户索要一些信息，声明式也好，命令式也好，我们关心的只是动作的结果（通知了用户或者得到了用户的输入），而不是过程和形式，并不需要严格遵守声明式的写法，适当变通

Select/Option

再来说下拉框组件，Select传入options属性值不就好了么，为什么还要单独设计一个Option组件呢？

考虑下面这样的场景，如果从服务端拿到的数据是下面这种格式

[
    {
        orderText: 'option1',
        orderValue: 'value1'
    },
    {
        orderText: 'option2',
        orderValue: 'value2'
    },
    {
        orderText: 'option3',
        orderValue: 'value3'
    }
]

options传值一般是有格式要求的，这里假设格式如下：

[
    {
        text: 'foo',
        value: 'bar'
    }
]

那么你不得不对数据做一次转换，这种转换的代码在代码库中多了，难免会影响代码阅读和理解

这种情况下，Option的价值就体现出来了

下面这种写法是不是好理解多了呢？

<Select>
    {#list options as option}
        <Option value="{ option.orderValue }">{ option.orderText }</Option>
    {/list}
</Select>

通过属性传递一个复杂对象，会让组件变成一个黑盒，你可能传递了冗余的字段进去，你并不知道哪些才是真正的有效信息，这种囫囵吞枣的写法不能直观地传达出组件本身的意图，最终导致的结果就是，下次的重构会变得困难，你不敢轻易地删除某个字段

当然也不是所有地方都不适合通过属性传递复杂对象

比如Table

Table组件接收下面几个属性：fields、dataSource

• fields 描述了表格的元信息，相比写一堆thead、tr、thead、tbody、td，fields会是一种更好的抽象，更加简洁
• dataSource 表格本身就需要一个数据源，这个是表格的必要字段，数组即可

这种设计对Table来说是合理的