web前端经验分享

CSS技巧

解决css样式污染方案

命名约定

BEM命名规范

.div-query{}    /*块(block)*/
.div-query__button   /*元素(element)*/
.div-query--valid    /*修饰符(modifier)*/

使用CSS Modules

import styles from "./button.css";

<h1 class={styles.title}>
  title
</h1>
// 会编译成 ===>
<h1 class="button__title_2IPqpsx">
   title
</h1>

css实现新手引导效果

mix-blend-mode

属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

mix-blend-mode: hard-light; // 强光模式下gray暗灰色会变成亮色达到高亮效果

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    #main {
      width: 100vw;
      height: 100vh;
      background: #fff;
      font-size: 20px;
    }

    .mask {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      top: 0px;
      background-color: rgba(0, 0, 0, 0.7);
      mix-blend-mode: hard-light;

    }

    .guide {
      border-radius: 5px;
      background: gray;
      position: absolute;
      top: 50px;
      left: 50px;
      width: 80px;
      height: 60px;
    }

    .guide-text {
      position: absolute;
      top: 120px;
      left: 100px;
      color: white;
    }
  </style>

<body>
  <div id="main">
    <p>文字文字文字文字文字文字</p>
    <p>文字文字文字文字文字文字</p>
    <p>文字文字文字文字文字文字</p>
    <p>文字文字文字文字文字文字</p>
    <p>文字文字文字文字文字文字</p>
    <p>文字文字文字文字文字文字</p>
    <p>文字文字文字文字文字文字</p>
    <p>文字文字文字文字文字文字</p>
  </div>
  <div class="mask">
    <div class="guide"></div>
    <div class="guide-text">↑这是文字</div>
  </div>
</body>
</html>

效果

JS技巧

高阶组件HOC使用心得

React的高阶组件本质上就是高阶函数,简单来说就是组件以实参形式传入其他函数中.

高阶组件并不是React的特性，是函数式编程的一种范式，最大的好处就是解耦和灵活性

比如实现一个在组件挂载之前做一些事情比如登录的高阶组件preMountHoc。

const preMountHoc = options => Component => {
  class WrappedComponent extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        loading: !!options.preLogin,
        authInfo: null,
      }
    }

    async componentDidMount() {
      if (options.preLogin) {
        const isLogined = auth.isLogined()
        // 生产环境通过cookie判断是否已登录
        if (!isLogined && process.env.NODE_ENV === 'production') {
          auth.authLogin()
          return
        }
        if (!application.inNTT) {
          const authInfo = await auth.getAuthInfo()
          this.setState({ authInfo })
        }
      }
      // do something
      this.setState({ loading: false })
    }

    render() {
      const { loading, ...rest } = this.state
      if (loading) {
        return <div>loading...</div>
      }

      return <Component {...this.props} {...rest} />
    }
  }
  return WrappedComponent
}
export default preMountHoc;

给preMountHoc传入需要的options和需要包装的组件，就可以达到我们的目的

class Home extends Component {
    ...
}
preMountHoc({ preLogin: true })(Home)

装饰器使用方法

@preMountHoc({ preLogin: true })
class Home extends Component {
    ...
}

可持久化的数据结构

使用immutable优化React

相比immutable.js复杂的api,immer只用一个api就能让js使用immutable数据

import produce from "immer"

const baseState = [
    {
        todo: "Learn typescript",
        done: true
    },
    {
        todo: "Try immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({todo: "Tweet about it"})
    draftState[1].done = true
})

精简的事件发射器发布/订阅

type Handler = (event?: any) => void
type WildCardHandler = (type: string, event?: any) => void

type HandlerList = Array<Handler>
type WildCardHandlerList = Array<WildCardHandler>
type HandlerMap = {
  [type: string]: HandlerList | WildCardHandlerList
}

/**
 * 精简的事件发射器 发布/订阅模式
 */
export default class EventEmitter {
  events: HandlerMap

  constructor(props = Object.create(null)) {
    this.events = props
  }

  /**
   * 监听事件
   *
   * @param  {String} type  "*"为全部事件
   * @param  {Function} handler
   */
  on(type: string, handler: Handler | WildCardHandler) {
    if (!this.events[type]) {
      this.events[type] = []
    }
    this.events[type].push(handler)
  }

  /**
   * 移除监听事件
   *
   * @param  {String} type  "*"为全部事件
   * @param  {Function}
   */
  off(type: string, handler: Handler | WildCardHandler) {
    if (this.events[type]) {
      const index = this.events[type].indexOf(handler)
      if (index > -1) {
        this.events[type].splice(index, 1)
      }
    }
  }

  /**
   * 触发事件
   *
   * @param {String} type
   * @param {Any} [evt]
   */
  emit(type: string, evt: any) {
    if (this.events[type] && this.events[type].length) {
      this.events[type].forEach(handler => handler(evt))
    }
    if (this.events['*'] && this.events['*'].length) {
      this.events['*'].forEach(handler => handler(type, evt))
    }
  }
}

}

使用

const emitter = new EventEmitter()

// 预先订阅事件
emitter.on('playTrack', e => console.log(e.uid) )

// 发布事件
emitter.emit('playTrack', { uid: 123 })

// 绑在window上可以方便原生调用js方法
window.gEmitter = emitter

Day.js代替Moment.js

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js

简单地说，只要你会Moment.js，那么你就会Day.js!

但是我们知道的，Moment.js 的大小是200多k,

Day.js的大小是2kB

100倍的差距，拥有同样强大的 API 无缝切换

github

爬坑

解决ios上audio不能自动播放

由于ios的安全机制问题，不允许audio和video自动播放，所以想要使audio标签自动播放那是实现不了的，即使调play()也是播放不了。

handleClick() {
  // do something
  if (isIOS()) {
    this.audio.play()
    this.audio.pause()
  }
}

就是随便一个点击事件，先播放，后暂停，之后再调play()就可以播放了

ios手机键盘弹起导致input无法聚焦的bug

问题：测试过程中发现键盘收起后的输入框无法聚焦，但是在之前被键盘顶起来的位置点击居然有效，键盘再次弹起，故猜测时webview的内部scrollview自己实现的键盘弹起上滚页面，但是键盘收起时页面没有回滚，只是因为定位的关系页面虽然还原，但是scrollview没动，导致点击元素还停留在键盘弹起的地方

解决：监听input的blur事件，执行window.scroll(0,0)让页面还原到初始位置

 handleBlur = () => {
    if (isIOS()) {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }

移动端调试工具

真机调试除了Charles抓包看请求,想看控制台的话

可以在url参数debug=true时动态插入调试工具

eruda比vConsole功能多

  <script>
    ;(function () {
        var src = '//cdn.jsdelivr.net/npm/eruda';
        if (!/debug=true/.test(window.location.href) && localStorage.getItem('active-eruda') != 'true') return;
        document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
        document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
    })();
  </script>

git解决远程仓库文件大小写问题

最近为了规范项目的目录，把一些项目的文件名称改成了小写。本地修改是没什么问题的，可提交到远程仓库后，问题就出来了：

远程仓库出现了大小写文件同时存在的情况，也就是远程仓库的大写文件并没有被修改：

解决方案:

// 设置本地git环境识别大小写
git config core.ignorecase false

// 有一些文件我们不想提交到git上去了，但是又被检测到有变化，我们可以采用
// git rm --cached file来停止跟踪这些文件

git rm --cached src/components/Header -r

然后同步一下

git add .
git commit -m 'rm Header'
git push

远程的大写文件就消失了