项目中遇到的问题及解决方案

移动端点击（click）事件300毫秒延迟的问题

移动端页面对于点击事件会有300毫秒的延迟，也就是js捕获click事件的回调函数处理，需要300ms后才生效，导致多数用户感觉移动设备上基于HTML的web应用界面响应速度慢，甚至有时候会影响一些业务逻辑的处理。

移动浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两次，可以看到内容或者图片放大，再次双击，浏览器会将网页缩放至原始比例。

浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

解决方案

• 静止缩放

<meta name="viewport" content="width=device-width user-scalable= 'no'">

使用这个方法必须完全禁用缩放来达到目的，虽然大部分移动端能解决这个延迟问题，但是部分苹果手机还是不行。

• fastclick.js
  FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

window.addEventListener(function(){ 
    FastClick.attach( document.body );
},false );

• 指针事件 - 即通过touch事件解决
  指针事件最初由微软提出，现已进入 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。指针事件是一个新的 web 事件系列，相应的规范旨在使用一个单独的事件模型，对所有输入类型，包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等，进行统一的处理。

---

使用antd第三方ui组件库自定义主题遇到的问题

修改antd的默认样式，需要采用 less文件覆盖的方式

• 遇到了整个antd样式没办法使用的问题

  原因是我在使用less-loader时，把node_modules里的antd包排除掉了。

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       modifyVars: {
+         'primary-color': '#1DA57A',
+         'link-color': '#1DA57A',
+         'border-radius-base': '2px',
+         // or
+         'hack': `true; @import "your-less-file-path.less";`, // Override with less file
+       },
+       javascriptEnabled: true,
+     },
    }],
    // ...other rules
  }],
  // ...other config
}

---

react中redux使用中间件时 logger要放在后面

import { applyMiddleware,createStore } from 'redux'
import reducer from './reducers/index'
// 引入logger中间件
import logger from 'redux-logger'
// 引入 thunk 中间件
import thunk from 'redux-thunk'

const store = createStore(
  reducer,
  // 日志 -- logger 的位置一定要放在最后，不然会出现显示信息不准确的 bug
  applyMiddleware(thunk,logger)
  // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

export default store