solid 问题统计

• 事件驱动和数据驱动

  事件驱动和数据驱动是两种编程范式，框架主要解决的问题就是补充事件驱动的弊端。在事件驱动的基础上结合数据驱动，搭配使用两种编程编程范式来减少编码量大、逻辑复杂的问题。

  数据驱动的表现形式为vm（视图-模型），视图是页面效果，模型是底层数据，数据驱动就是指数据变化时，自动触发相应视图的更新。

  事件驱动也就是通过页面中绑定的事件触发，即视图变更时也要同步修改底层数据。结合两者就能更好的同步视图和模型，从而完成更好的完成开发。

• signal的触发细节

  简单来说，signal能监测的精度为变量级别，这在修改对象类型时才可以注意到。也就是修改变量属性并不能触发页面更新，你需要修改变量才行（即重新分配变量）。可以采取以下三种方式：

  • 从原始变量构造出新的你所需的结果，触发页面更新
  • 直接浅克隆原始变量，对新变量进行修改，触发页面更新
  • 使用immer函数库，其可以在函数内部生成新变量，触发页面更新

  通过上述方式变更属性后，对于变量其他未修改的属性也同样会触发更新，这就是变量级别的另一个佐证。变量的其中一个属性被修改就表示变量被修改，所以会触发所有和变量相关的刷新。因此你需要保证所有的触发操作都是满足纯函数要求的。

• 样式分类

  • 区分主题（暗夜模式/自动模式/其他主题）
  • 区分移动端/PC端/IPAD端
  • 区分伪类

  但是使用了媒体查询时页面会变的异常复杂，所以媒体查询只能用于基本的样式调整。对于复杂的页面还是选择再写一个页面比较好。

• 暗夜模式和SSR

  在实现暗夜模式时，我发现了一个新的问题，spa的应用在进行主题切换时样式很不好看，因为默认样式只能有一套，而后在执行了代码逻辑后才能切换到新的主题。这会导致白屏的出现，也就是页面刷新时背景色会存在一个切换过程，这一点始终困扰着我。

  但是我看到有些网页是没有这个白屏过程的，在页面显示之前背景色就是正确的。你要在html文件中加入相应逻辑。

• 局部样式

  样式真是个头疼的问题，solid中导入样式是全局样式，而不是局部样式，这样很容易导致样式冲突，而给样式起名也很头痛。所以还是选择tailwindcss吧，它也是全局样式，但是因为是原子类样式，只要不自己添加新样式，那么就不会有冲突。

  如果非要添加自己的局部样式，那可以使用module.css，但这个使用上比较难受，但是是默认支持局部作用域的。

• tailwindcss

  tailwindcss是移动优先的。因此要先设置移动端样式，而后添加大屏样式。

• 全屏样式

  默认情况下body高度是可以自由滚动的，但是body的滚动条可能会因为body高度的动态调整时而出现时而隐藏，这会导致页面晃动，通常搭配弹窗使用时问题更容易出现。

  那如果将body设为屏幕高度，而后所有的弹窗都通过portal定位到body上，可能是更好的解决方案

svelte 问题统计