能用HTML/CSS的时候就不要用JS
Oct 8, 2016在经历了一些实际项目之后,我意识到了一点:能使用html/css解决的问题就不要使用JS,为什么呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。
1.导航高亮
导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。
在经历了一些实际项目之后,我意识到了一点:能使用html/css解决的问题就不要使用JS,为什么呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。
导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。
因为在全局作用域中声明的变量和函数都自动成为全局对象Window的属性,这经常会导致命名冲突,还会导致一些非常重要的可维护性难题,全局变量越多,引入错误BUG的概率就越大!所以我们应当尽可能少地使用全局变量,模块化的目的之一就是为了解决该问题的!
问题描述:
在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的点击穿透
而立刻收起来,导致用户无法使用选择器,最初尝试在用户点击了Select之后为select下面的表单层添加pointer-events:none
的CSS样式避免屏蔽点击效果,结果发现这样做只能保障穿透下去的点击事件不会点进input框导致聚焦事件发生,但是依旧无法避免弹出来的选择器收起来,初步猜测应该是由于穿透下去的点击相当于点击了一次空白区域,导致选择器收了起来。
问题描述:
遇到一个微信端bug,我的预约列表页面中,因为吸顶时间条需要根据页面垂直滚动位置改变内容,而惯性滚动过程中无法触发js事件,导致时间在惯性滚动结束后才会改变,相应的,向上惯性滚动过程中因无法触发js事件,导致吸顶条在滚动结束后才消失,而不会在正确位置(距离页面顶部大约100px)消失。