fadeoc / a-fadeoc-fe-dairy Goto Github PK

• 今天发现了一个很奇怪的问题，某个 div 的样式不对。它的样式是从一个公共的样式 composes 之后，又覆盖了一些特殊样式的，这个特殊样式没有生效。
• 经过 chrome 检查 css，发现样式没有生效。
• 开始搜索 webpack css module wrong order，发现确实有这个 bug，但是都用了 extract-text-plugin，但我根本没开启这个 plugin。
• chrome 排查 styles，发现所有的 styles 模块的顺序都对，直到那个样式不对的 div 所在的 styles 模块，它竟然比它 composes 的模块先引入了，因此被那个模块的 css 覆盖掉了。
• 三个小时过去了，仍然排查代码，没有任何进展。
• 无奈下启用排除法，注释掉该 css 模块的引用，刷新浏览器，css 模块还在。清除缓存，css 模块还在。有进展，这说明其他模块引用了这个模块。
• 在 Webstorm 中搜索这个 css 模块，找到了一个 ancestor 的 css 模块中 composes 了这个模块。源于昨日突然被要求加功能时，因为时间紧急没有完善的考虑 React 的模块安排，另外对 「css composes 会影响 Webpack 编译出的 style 顺序这个知识点不了解。」

因为上一个问题，所引发的问题就是被复用的窗口都是相同的，先不讨论这个设计模式的问题，先假设它是正确的，因此同样的窗口中，相同的 class 就会被全部取到。这样在 Iterating 的时候，就会出现问题，因为 class 的项多了。

为了解决这个问题，我使用了 nextsibling，在本地测好使，拿到服务器上不好使console.log 发现 nextsibling 是个 text。Google，MDN 文档说明如下：

改为 nextsibling.nextsibling，结果不稳定，这是一个坑。

最后硬生生写了新的函数，根据 Handlebars 的传值改变了 ID，老老实实的 getElementById 解决。

使用 Leader 的 PHP 函数时出现一个问题，label 下的 input 没有触发勾选动作。分析过程如下：

1. php 函数中调用的 JS 函数有 return -1; 也就是说到这里就返回了，onclick 没有触发 input 的默认事件。
2. 调用 js 函数，切换假 input 框的样式时出现问题，原因是 class 切换不正确。
3. 使用 JQuery 和手写函数，也都出现这个问题。
4. console.log debug 得知函数运行了两次，因此 ele 上面原本没有 class，点击后出现了 class 但是值为空。

如果禁止事件，真的 input 就无法生效，既然点击 label 一定会触发 input 的事件，那就把事件绑在 input 上好了。

Problem Solved. ROFL.

• 接触 PHP 框架整 3 个月了。我对 PHP 一直是很好奇的，对所有我不懂的语言也都是很好奇的。我尝试从原理上了解这个框架，但是没有成功，不过还是取得了一些成效。了解到了 PHP 是大体怎样控制状态的，因为没有使用其他框架的经验，在这个基础上觉得 PHP 对状态的处理有点麻烦，虽然很灵活，当时容易陷入一团乱麻的逻辑中。不过 PHP 是我这三个月最大的进步之一，这是让我很欣慰的事。
• JS 上在接触事件委派之前，一直使用 for loop 来绑定 li 的事件，但是很奇怪的是，内部的 function 传入的参数不对。突然想起某个夜晚在书中好像看过这个问题，是因为每次传入参数的时候，因为 closure 的问题，外部的参数已经运算完毕。当时理解不是很透彻，回去翻书重看，果然是这个原因。解决方法就是按值传 var x = function(num){}()。在解决多个 function 的变量作用域冲突时，第一次真正的使用了 IIFE，之前一直了解这个概念，但是不透彻，经过应用，也深入了理解。
• Leader 给设计的举报和分享两个模块，是分别绑定在每个按钮上的，通过 Handlebars 来传入 id，这就导致了一个问题，界面中有无数的这个隐藏页面，我觉得这样的设计模式很不好。引发的问题，一个是之前静态和交互是提前写好的，没有考虑到渲染时会出现多个页面，CSS 和 HTML 中的 id 成为引发 JS 失效的一个动作源。第二是所有同 Class 项 length 值的延续递增，这样就要修改 HTML CSS 和 JS。这里面存在着沟通问题，当然，页面冗余我想才是主要问题。可以在点击按钮的时候通过 Handlebars 获取该项 id，然后通过 PHP 传入到举报和分享页面中，这样 PHP 的通信层就要做更多的工作。