jquery去除样式_前端函数式编程之五：从jQuery而来，看函数式工具形态演进

const _count = 0
jQuery("div.demo-li")
  .find("ul[class^='shop-card']")       // 此处返回类型 Array<Element(S)>
  .removeAttr("disabled")
  .one("click", { count: _count }, function(event){
    $("#count-container").show().html(even.data.count);
  })
  .fadeIn(1000);

// Array 去除'Betty'以外的团队成员随机排序
const teamNames = ['Devin', 'Betty', 'Jack', 'Dolly', 'Shirley', 'Vivian'];
teamNames.map(x => [x, Math.random()])
                 .filter(x => x !== 'Betty')
         .sort((x, y) => x[1] - y[1])
 
 
// Rxjs5 每等待一定间隔后，生成一些雨滴
const gapSec = 500
const generateDropTimes = 10
const rainMakingFunc = () => { console.log('generate some raindrops') }
_.Observable.timer(0, gapSec)
                .take(generateDropTimes)
                .map(x => 1 + Math.round(Math.random()))
                .subscribe(rainMakingFunc)

// 入参  使用标注使得更清晰
const teamCount = 13
const newTeamNumbers = [2, 4, 5, 8, 9]
const C = teamCount
const N = newTeamNumbers
 
// 函数1 常规循环做法
function pickMember(C, N) {
  const members = []
  for (i = 0; i < C; i += 1) {
    const _member = {
      org: 'techTeam',
      number: i
    }
    if(N.indexOf(_member.number) >=0) {
      members[i] = _member
    }
  }
  return members
}
 
// 函数2 基于过程的简单封装
import _ from 'lodash'
function pickMember(C, N) {
  const setRangeList = count => _.range(count)
  const fillMember = (x, i) => { org: 'techTeam', number: i }
  const ifPick = (_N, number) => _N.indexOf(number) >= 0
  const filterPicked = number => ifPick(N, number)  // 此处依赖N, 可再拆分
  return _.filter(_.map(setRangeList(C),fillMember),filterPicked);  
  // 基本的封装下，入参C在最中间的函数处传入
}
 
// 函数3 基于过程的compose/pipeline处理
import _ from 'lodash'
function pickMember(C, N) {
  // 改造方法，将 N 也作为入参传入
  const setRangeList = [count, _N]  => [_.range(count), _N]  // 第一个函数
  const fillMember = (x, i) => { org: 'techTeam', number: i }
  const mapAndFill = _.curry(_.map)(_, fillMember)
  const mapFillWithTail = [range, _N] => [mapAndFill(range), _N]  // 第二个函数
  const ifPick = [number, _N] => _N.indexOf(number) >= 0
    const filterByPicker = _.curry(_.filter)(_, ifPick)   // 第三个函数
 
  if (Math.random() > 0.5) {
    // 3.1 compose  _.flowRight 在lodash4 之前为 _.compose
    // 从右到左依次调用函数
    return _.flowRight([filterByPicker, mapFillWithTail, setRangeList])([C, N])
  } else {
    // 3.2 pipeline  _.flow 在lodash4 之前为 _.pipeline
    // 从左到右依次调用函数
    return _.flow([setRangeList, mapFillWithTail, filterByPicker])([C, N])
  }
 
}
 
// 函数4 适度转换后的链式操作
function pickMember(C, N) {
    return _.range(C).map(x => ({ org: 'techTeam', number: x }))
                             .filter(x => N.indexOf(x.number) >= 0)
}

// Rxjs6 pipe方法
import * as __ from 'rxjs/operators'
import { timer, range, interval } from 'rxjs/index'
// 中间省略
timer(0, _gdSec).pipe(
                                __.take(_generateDropTimes),
                                __.map(x => 1 + Math.round(Math.random()))
                )
                              .subscribe(this.rainMaking)
 
// 对比Rxjs5 链式操作
// _.Observable.timer(0, gapSec)
//                   .take(generateDropTimes)
//                   .map(x => 1 + Math.round(Math.random()))
//                   .subscribe(rainMakingFunc)

// promise表示条件语句
const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}
 
// async 表示条件语句
const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data
  }
}

import React, { useMemo } from "react";
import { observable } from "mobx";
import { observer,  useLocalStore } from "mobx-react";
 
const Counter = () => {
  const store = useLocalStore(() => ({
    count: 0
  }));
    // const store = useMemo(() => observable({ count: 0 }), []);
 
  return (
    <button onClick={() => store.count++}>
      {store.count}
    </button>
  )
};
 
export default observer(Counter);

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
 
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log
 
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log
 
    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log
 
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }
 
  render() {
    return null;
  }
};
// 0 0 2 3