从 React 说起

对接触过 React 的朋友来说,jsx 的方式肯定不陌生。比如

<ListItem item-id="123" />

这个组件非常简单,就是名字叫 ListItem,然后传了一个 id 的值。为什么说这个呢?我们换个角度看这个组件。

把它当作一个函数来看

ListItem({itemId: 123})

我们可以看到,其实这个函数返回的结果只受这个 itemId 的影响,换成组件也是一样,组件内部的状态不会影响到父级组件,父级组件的状态除了这个参数,也无法影响组件。极大的方便了组件的稳定性,已经方便单元测试。

对了解过函数式编程的人,肯定对这个点非常了解,对,这就是纯函数。

什么是纯函数

• 其结果只能从它的参数的值来计算
• 不能依赖能被外部操作改变的数据
• 不能改变外部状态

纯函数非常方便,好处之前也讲了,来看看具体我们可以用这个做什么。

比如给一个数加一:

可能会这么写

var a = 1;
increment = funciton() {
 return a + 1;
}

但是按照纯函数的思路去写

increment = function(a) {
 return a + 1;
}

这样就不会存在如果外部变量 a 被修改而导致函数无法运行或者出错的情况。

其他

函数式还有很多知识点,函数式只是其中一点,接下来聊聊语义化。

比如这段代码

[1,2,3,4,5].map(function(num) {
 if(num % 2 != 0) return;
 num *= 3;
 num = 'num is ' + num;
 return num;
})

这个需求是将数组中的偶数乘 3,然后按照一种格式输出。虽然代码简单,但是不知有没有觉得其实这样的写法并不容易看出来在干嘛,语义化并不好。我们换一种写法。

[1,2,3,4,5].filter(n => n % 2 == 0)
 .map(n => n * 3)
 .map(n => 'num is ' + n)

为了简洁,使用了 ES6 来描述这段伪代码,这样是不是更加语义化,能够一次读下来明白代码在干嘛。

再换个例子聊,在 酷壳 中有一篇谈函数式编程,其中举了个例子非常形象,不过原文中使用的是 python,我在这里用 js 来实现。

比如,我们有3辆车比赛,简单起见,我们分别给这3辆车有70%的概率可以往前走一步,一共有5次机会,我们打出每一次这3辆车的前行状态。

一般的思路可能是这样的(用伪代码)

time = 5
positions = [1,1,1]
do (time) ->
 time -= 1
 postions.each (pos, i) ->
 if Math.random() > 0.7
 positions[i] += 1
 console.log '-' + pos

我们在这个基础上继续优化一下,把一些处理独立出来(伪代码)

time = 5
positions = [1,1,1]
move = ->
 for pos, i in positions
 if Math.random() > 0.3
 positions[i] += 1
drawCar = (pos) ->
 console.log '-' + pos
run = ->
 time -= 1
 move()
draw = ->
 for pos in positions
 drawCar pos
do (time) ->
 run()
 draw()

这段代码把一些操作都独立出来,不过有个问题是仍然依赖于外部的两个变量,我们在阅读这段代码的时候,需要在大脑中额外思考这两个变量在如何进行变化。

接下来我们要把这个外部变量砍掉,看看是怎么样的效果(伪代码)

move = (positions) -> positions.map (x) -> Math.random() * 0.3 ? x + 1 : x
drawCar = (pos) -> '-' + pos
run = (state) -> { time: state.time - 1, positions: move( state.positions )}
draw = (state) -> state.positions.map( drawCar )
race = (state) -> 
 draw(state)
 if state.time then race(move(state))
race({time: 5, positions: [1,1,1]})

可以看到,所有函数不再使用一个公共变量,函数返回的结果受参数影响,可以把这些参数当作状态来看。这个 race 也可以作为对外接口随意传入初始值,所有的函数可以单独测试。

函数响应式编程

之前的文章简单聊过这方面,今天还会举一点这方面的例子。

拿自动填充来讲,比如用 jQuery 可能会这么写:

$input.on('input', function() {
 if(stop()) {
 if(length > 2) {
 if(value != lastValue) {
 search();
 }
 }
 }
});

实际可能代码更加复杂,那用 Rxjs 来写会如何呢?

Observable
 .from($input, 'input')
 .map(function(e) {
 return e.target.value;
 })
 .filter(function(text) {
 return text.length > 2;
 })
 .debounce(750)
 .distinctUntilChanged()
 .flatMapLatest(searchPromise)
 .subscribe(function(data) {
 show(data);
 })

这样一来,代码非常有利于阅读,事件的整个过程可以一眼看出来。如果是第一次接触这段代码就能很容易地理解其中的意思,就是当这个输入框输入的时候,获取他的值然后过滤掉长度小于 2 的情况,然后只有暂停输入的时候,然后和上次不一样,就去处理一下这个值,获取到值之后就展示出来。

个人觉得函数式最大的好处就是能够把代码变得足够语义化,能够把自然语言或者流程图直接转换成代码。

现在我们从一个事件组合来谈代码。

举个大家喜闻乐见的拖拽的例子,先来分析一下拖拽是一个怎么样的事件

当鼠标左键按下时且开始移动,直到左键抬起。

直接可以用代码去描述这个组合事件:

var dragTarget = document.getElementById('dragTarget');
// Get the three major events
var mouseup = Rx.Observable.fromEvent(dragTarget, 'mouseup');
var mousemove = Rx.Observable.fromEvent(document, 'mousemove');
var mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown');
var mousedrag = mousedown.flatMap(function (md) {
 // calculate offsets when mouse down
 var startX = md.offsetX, startY = md.offsetY;
 // Calculate delta with mousemove until mouseup
 return mousemove.map(function (mm) {
 mm.preventDefault();
 return {
 left: mm.clientX - startX,
 top: mm.clientY - startY
 };
 }).takeUntil(mouseup);
});
// Update position
var subscription = mousedrag.subscribe(function (pos) {
 dragTarget.style.top = pos.top + 'px';
 dragTarget.style.left = pos.left + 'px';
});

就像 Rx 首页介绍自己

ReactiveX is more than an API, it's an idea and a breakthrough in programming. It has inspired several other APIs, frameworks, and even programming languages.

我在受 Rx 影响之后有了一点自己的理解。

抽奖

前段时间公司业务中写了个抽奖的页面,后面空闲下来了,开始思考抽奖这件事情,抽奖的事件流抽象之后应该是这样:

等待用户操作,期间可能需要检查用户状态,然后用户操作,确认操作结果,过滤不正常的返回数据,展现给用户

直接转换成代码应该是这样:

Lottery
 .filter(()=> {
 return true;
 })
 .wait(()=> {
 console.log('wait for click');
 return true;
 })
 .until(()=> {
 return new Promise((resolve, reject) => {
 setTimeout(()=>{
 console.log('user clicked');
 resolve(true);
 }, 2000)
 });
 })
 .filter((e) => {
 console.log('event: ' + e);
 return true;
 })
 .lottery(() => {
 return new Promise((resolve, reject) => {
 console.log('client request');
 setTimeout(()=>{
 console.log('server respones');
 Math.random().toFixed(1) > 0.5 ? resolve({data: 'hello'}): reject('net work error');
 }, 2000)
 });
 })
 .done((d) => {
 console.log('lottery result: ' + d.data);
 return d;
 })
 .error((e) => {
 console.error('error: '+e);
 })
 .filter((d) => {
 console.log('last filter: ' + d);
 return true;
 })
 .end()

所有的这些中间事件应该是可以随时拆卸和组装。

那思考一下如何用 js 来写出这样的接口。

首先这个事件流应该是一个串行操作,如果其中有一个报错或者更多的是返回了 false,应该直接打断事件流。

第一个想到的是 generator,但是 generator 需要自己去写执行器,还需要加上很多判断,我写过一段,发现由于这些操作中可能会返回一个 promise 对象,还是需要两个 generator function,非常蛋疼。所以还是直接上 async 函数,先来实现刚才说的这个接口:

/**
 * 抽奖的事件流抽象描述
 * 需要把所有的操作变成promise对象
 */
let Lottery = (() => {
 let Lottery = {};
 let actions = [];
 let errorAction;
 let actionNames = ['filter', 'wait', 'until', 'lottery', 'done', 'error'];
 for(name of actionNames) {
 if(name == 'error') {
 Lottery[name] = function(action) {
 errorAction = action;
 return this;
 }
 } else {
 Lottery[name] = function(action) {
 actions.push(action);
 return this;
 }
 }
 }
 Lottery.end = () => {
 doActions(actions);
 };
 let doActions = async (actions) => {
 let ret = null;
 try {
 for(let action of actions) {
 ret = await new Promise((resolve, reject) => {
 let result = action(ret);
 if(typeof result == void 0 || result == false) reject();
 resolve(result);
 });
 }
 } catch(e) {
 errorAction(e);
 }
 return ret;
 };
 return Lottery;
})();

里面还用到了函数式编程的一些技巧,比如懒执行函数,把所有的操作函数先存起来,最后再去执行。

代码还有很多问题,比如不能很好地处理报错,也就是不符合事件流的事件处理,还有暂时还没有加上让这个事件流循环起来的操作,毕竟用户操作不是一次性的,而且似乎不太符合函数式编程的思想,不过至少接口可以跑起来,符合预期了。

原文地址:https://suanlatudousi.com/2015/10/23/use-semantic-code/